Mobile First is our newest approach to website design fundamentals.  It means exactly what it says, the emphasis of the design and website build standards are based on placing the user experience of the mobile user as the highest priority.

Why Mobile First?

The online world is well beyond “going digital”.  It has gotten personal, and few things are more personal than our attachments to our mobile phones.  How often do you wander more than 10 ft from your phone and don’t you feel ‘naked’ without it?  Pants pockets with space for my phone are as important as size, fit and color.  The online evidence to suggest mobile matters most is becoming increasingly clear.  In 2016 we passed the tipping point in North America where web browsing activity, searching, viewing, watching, buying, playing is now more than 50% happening on mobile phones as compared to desktops (laptops and desk top computers).  In SK, where the landline infrastructure is extremely high quality, the numbers are still skewed a bit towards desktop.  In a very recent examination of Saskatchewan based websites, the data over the first 75 days of 2017 suggests that for both B2C and B2B websites, 41% of user sessions are mobile and 59% are desktop (including tablet).  However, compare this to some similar analysis from 2 years ago where the split was roughly 25% to 75% and you can see that the future is clear, and the future is mobile.  See this article for more detail on this mobile vs desktop comparison.

SK B2C websites mobile vs desktop

SK B2B websites mobile vs desktop

How Does Mobile First Affect Website Design?

The obvious answer is in almost every way and then some more.  As dial-up modems died off and high speed internet bandwidth became more ubiquitous, we as website developers had the luxury of being both bloated and inefficient.  Big shiny graphics, transitions, slide shows, and (gasp) Flash was at the forefront of design.  Big bandwidth plus big screens meant we could load our pages with all varieties of visual effects and all manner of graphics.  The thought of efficient coding to conserve file load times and optimized images were tossed out the window in favor of more, more, and more.  Now it all matters because today’s most prolific group of web searches and information about your business seekers are on their phone, where screen size and often bandwidth are at a premium.

What Does Google Think About Mobile First?

Some evidence suggests that it has already happened, although Google claims it’s still in the future for the entire Google search rankings results to be based on the mobile search experience.  Yes, Google has different search bots that view your site through different lens (Google and the search industry call them algorithms) and produce different search results.  The mobile search algorithm places more emphasis on things like page speed (including image size) and ease of navigation.  Consistent with both both search lenses however is that content is still the major ranking factor (don’t lose sight on the value of content).

Apps vs Websites

Are mobile optimized websites killing the market for mobile apps?  No.  Apps will remain an important part of the mobile landscape as they often work in different ways than a website.  Apps can be used often without an internet connection, storing data locally or waiting for a WiFi signal to sync data.  Some apps, such as banking apps, are used to improve the security of the information transferred while others such as games are simply download and play with data transfer only required for upgrades or in app purchases.

What is a Tablet, Desktop or Mobile?

When we do our own analysis of user behavior by device type, we tend to think of tablets as merely extensions of the desktop, a convenient way yo bring your larger screen experience from the desk to the coffee table or the counter top.  While there is certainly a portion of tablet use that is truly mobile, especially tablets which are Bluetooth connected to mobile phones for data use, more tablet use is in-home and more a matter of convenient form factor as opposed to out and about usage. So when we compare mobile to desktop, we typically include the roughly 7% to 10% of searching and browsing on tablets as desktop.

Responsive Design

There are several key characteristics to consider with respect to design criteria when taking a Mobile First approach.

  • Screen Size: The practice of coding websites so that they adjust, adapt, respond to the device used to view them is still as relevant as when Responsive Design became “The Thing” earlier this decade.  Now it just starts at the other end.  Previously the approach was to adapt as the screen size shrank to the lowest common denominator, the mobile phone screen.  Now the lowest common denominator is actually the most common screen size.  The design process is now flipped on it’s head, begin at the phone (Mobile First) and scale up to the desktop monitor size.
  • Speed: It’s a fact of technology, the handheld devices, as amazing as they are, do not often have the same computing power and processing speed of a laptop/desktop.  Plus, when data speeds go wireless, they are typically slower, whether that is over a cell network direct to the phone or in-home / in-office WiFi.  So the challenge is to do less code, to use image sizes wisely, and to think through
  • Navigation: Less clicks to get from home page to desired content is even more important.  A relative comparison.  The pointer of a mouse on a screen will typically occupy 20 to 30 pixels of the 750,000 plus pixels on the screen.  That’s many times less than 1% if you want to do the math.  A finger on a phone screen, on the other hand, can occupy anywhere from 2% to 5% of the screen so navigation must be both compact and expandable.  There is no room for a large header menu and in order to avoid incorrect navigation choices there needs to be adequate separation of navigation elements.  Two factors that are not commonly an issue on a large screen display but two factors that can drastically affect the user experience of the mobile user.  Also regarding navigation, the ability to use combination keystrokes to jump to the top of a page to access the header or menu is not possible so navigation aids such as a floating “Top” link can be very well received by users.
  • Content: Content is why you have a website.  Content is what your website users are consuming. Now the interesting trend is that when mobile phone internet use started to grow rapidly, users were commonly looking for certain key pieces of information.  Store hours, phone numbers, addresses.  This is till true, they want contact information readily available, but the willingness to read, to view images, to watch videos has leapt passed most expectations of what and why a mobile phone would be used.
  • Architecture: The Mobile First approach has flipped a few website design conventions on their heads.  A common phrase was “above the fold” to describe the desire to place the most valuable content of a web page to be view able when the page first loads.  “Above the fold” is an old newspaper term that migrated to the field of website design that is slowly dying.  However the concept of higher up means more value, in terms of website real estate, is still true, but now it is executed differently.  Websites are commonly built with many pages, self-contained topics, dispersed throughout the navigation system.  However this is contrary to what has developed as the easier practice of scrolling vs. clicking links to move from content topic to new content topic.  So now good site architecture often evolves around related content topics, stacked within a page, accessible both by links within the page (anchor links) as well as continued scrolling to slide from one sub topic to another.
  • Branding: This is harder with mobile, but simpler, in ways.  With less real estate available on screen at any one time, the branding must be minimized, but consistent.  A large logo and a home page splash screen are simply annoyances no mobile user wants.  So work must be done to ensure the brand is strong, the company purpose is obvious, and that these do not conflict with allowing users to get to the content they want.

Responsive design still makes sense, but now in opposite order to how we used to think about taking the Website design and then working it back to the mobile design.

Mobile First web design takes us full circle to when we had to think harder and prioritize what to put on the screen and in what order.  Getting Mobile First right will significantly improve your brand perception and your mobile website user engagement.  Those factors usually mean a more positive experience, more interaction, more potential business.