ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Mobile First Web Page Design: User Centric, Concise, Fast, Progressive, Responsive

Updated on November 20, 2016
janderson99 profile image

John uses his scientific skills (PhD) & experience developing 50+ websites to research, review & evaluate SEO, website design, Social Media

Page views on small screen mobile devices is growing fast. It represents two-thirds of all traffic and will soon be three-quarters. In 2010, Google announced that it would follow a “mobile first” strategy and predicted that smartphones would eventually overtake PCs in popularity. The message was that Google's software programmers would 'work on mobile first' versions with desktop versions a second priority. This prediction is now a reality. Google's clean, white, concise and elegant pages exemplify this commitment.

In February 2015, Google announced the mobile-friendly update which boosted the rankings of mobile-friendly pages and downgraded ranking for unfriendly pages for mobile search. Pages designed solely for large screens had reduced rankings in mobile search results. Google has developed tools that recognises and rewards pages that are legible and usable on mobile devices because more and more users search using mobile devices and they want better outcomes on small screens. Google has also placed more emphasis on page rendering speed, particularly for mobiles, with tools to test speeds , which list likely causes of slow delivery.

Many companies and website owners have opted for responsive designs, which means that their pages degrade for rendering and display on mobile screens. Others have developed separate pages specifically for mobiles, or a suite of pages for screens of various sizes.

Others have bitten the bullet, and have adopted a 'mobile-first' design strategy. Pages are designed for small screens and for 'clicking' or on small screens. These pages are upwardly responsive or progressive. This means that they expand seamlessly for larger screen sizes. This is a one-page fits all approach.

This article discusses the merits of a Mobile First approach for designing webpages.

Design options for varying screen sizes - Design for PC first and degrade to mobile screens or Design for Mobile first and progress to larger screens. Both use responsive methods.
Design options for varying screen sizes - Design for PC first and degrade to mobile screens or Design for Mobile first and progress to larger screens. Both use responsive methods. | Source
Example of how screen size affects website design
Example of how screen size affects website design | Source
Examples of Websites that Use Mobile First Responsive Designs
Examples of Websites that Use Mobile First Responsive Designs | Source

What is Mobile First Design?

Mobile First Design is simply a design, which starts with a page designed specifically for mobile devices, but, which is responsive and seamlessly displays on PCs and larger screen sizes using a progressive approach.

See the image for an explanation

This is the opposite of building pages for PCs and having a responsive system for degrading the content so that it displays on small screens.

However, the mobile first design concepts address much more than the small screen size:

► Speed limitations, Concise Content, Smaller Pages, Less Complexity

► Font size

► Links and click on screen requirements for Mobile Devices

► Optimized Images that render quickly

► Speed maximized by placing the contents of CSS (.css) and Javascript (.js) files within the page, and addressing other limitations to speed. Consider hard copy HTML pages rather content management systems or database systems

► Ads designed for mobile devices

► Concise delivery focused on what users want, answering questions and providing succinct information

These requirements are each discussed below.

Key Elements of a Mobile First Design?

Responsive Design for Rendering on Larger Screens

Responsive design is built around devices and systems that target specific devices and viewport sizes. You can code your initial CSS for a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.

Instead of start big, and then reduce (successive degradation), the opposite method is applied - start small and then expand (progressive enlargement).

Responsive layouts are relatively very easy to do with one-column layouts, but can also work with more columns.

Fast Rendering Speed to Overcome Mobile Device Limitations

Many mobile devices that use Wi-Fi and other broadcast connections, are relatively slow because of the devices' limited computing capabilities and slow internet access. This means that having a fast rendering speed for a web page is critical. It also means that pages have to be smaller and simpler so that they can load faster. Tables, videos and other elements do not work very well on small mobile screens. Images and other elements that can take a long time to load, need to be optimized for speed.

A key element of mobile-first design is that pages have to render very quickly within the constraints of a small screen size (less than 20% or the size of PC Screens, and reduced computing power.

The Google Speed Optimizer Tool provides insight into the page elements that affect render speed. Some of the tips this tool provides are:

  • Minify CSS
  • Minify HTML
  • Minify JavaScript
  • Leverage browser caching
  • Reduce server response time
  • Avoid landing page redirects
  • Remove render-blocking JavaScript
  • Enable compression for various elements
  • Optimize JavaScript and CSS resources by adding the code directly to the page.
  • Optimize images with proper formats, lower sizes and the use of compression techniques

A radical suggestion derived from this advice on Speed

Anyone who has used wordpress, content management systems and databases has been plagued with the need for regular updates and load speed problems associated with databases. The speed optimizer tool suggests replacing Javascript (.js) files and CSS (.css) files with the HTML directly added to each page on your site.

The logical next step from this to improve speed is to 'hard-wire' and to 'hard-code' all the content on your pages. Do you really need your content in a database and a system that plugs text from the database into a content management system to render your pages? The alternative is stand-alone HTML pages with all content built-in, using a HTML editor.

Adding a new page can be done by copying your last page, and changing the different elements, such as text and images using the your HTML editor. This means changing the title, description, text in the body, images and layout, by pasting into a copy of an existing page. It is almost as easy to do this via HTML edits, than to enter new elements into a database.

Hard coded pages are blindingly fast. Google loves them and you can include the code you have in js files for css etc. on each page.

Radical perhaps but Google seems to be pushing for that way to go. Once you have published an 'article' you probably won't need to change it. If you do, then it is a simple process of editing the HTML. In some ways this is returning to the way pages were originally developed - pure HTML.

Concise Content, Smaller Pages, Less Complexity, User Centric

A Mobile First approach is minimalistic, both to address load speed limitations, but also because mobile users want simple information to answer their questions or to provide what they want. Instead of starting out with very large and complex design on a PC that has all the bells and whistles, the content needs to be reduced down to the bare essentials. This may mean presenting the full gambit of information on multiple pages. Concise, elegant simplicity is the key focusing on what you know your users want (User Centric).

It requires a smart design that present the information succinctly at the top of the page. Users do not want to scroll endlessly to find what they want or to be required to wade through links.

A good example is a pizza website. Mobile users go to the site to order a pizza and that is what the landing page should do. Users should not have to go to a home page and find a link to the ordering page. You can provide all the information about ingredients, policies, employment on other pages. So, provide what users want up front, 'in your face' concisely and precisely. It is a fundamentally different design concept. The trade-off is that the responsive rendering of the page on PCs with large screens may seem 'under-done', but it will still deliver what users want, and over time, fewer and fewer people will be accessing your site on PCs.

Mobile first design places greater emphasis on delivering what users want, answering questions and providing succinct information. To achieve this, you need to clearly understand your users and what they want. Simply deliver their needs.

Larger font size and styles that suit mobile devices

Font sizes, types and styles should be chosen to suit mobile screens. Inevitably, this will mean larger fonts on PC screens as well. This may not necessarily be a disadvantage. A good example of how this can work is the site Medium.

Links and click-on-touch-screen requirements for Mobile Devices

Links and navigation devices need to be designed to operate on mobile devices. This means larger text and more space around the links, less use of menus, and large buttons that are easy to find and click on.

Optimized Images that render quickly

Properly formatted and compressed images can save many bytes of data and can load quicker. There are many software tools that optimize images to display on web pages without the compression compromising how they appear. There are also many ways to use HTML and CSS to set maximum display sizes for images on larger screens, while allowing images to reduce in size to match the screen size.

Use Ads that are designed for mobile devices.

Google offers many responsive ads that display well on small and large screens. These ads are designed for mobiles, but expand on larger screen.

Be Aware of the need to design for multiple screen sizes

You can't design ONLY for mobile devices, as the page may not work very well on larger screens. There are many compromises to consider. Your goal should be to craft an elegant layout that is versatile, efficient and functions well on all viewport sizes, but with mobile screens as the priority.


A good reference for a case history study of implementing and Mobile first Design is Smashing Magazine

See HTML5 Rocks for further information

© 2015 Dr. John Anderson


Submit a Comment

  • Savy Nic profile image

    Savy Nic 

    3 years ago

    excellent article! i think this blog includes all the points related responsiveness and each bit of information that is required to get serious traffic on website. Thanks!


This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

Show Details
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)