Mobile First Website Design

Home / Mobile First Web Design » Mobile First – Web Design

Why Mobile First?

Mobile First is the 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. 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 colour.  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.
Mobile First website design means prioritizing design decisions for the device most users will be viewing your website on, their phones.
- NMI
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 favour 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?

This has already happened. For most websites their Google search rankings results are 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

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 favour 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 is a Tablet, Desktop or Mobile?

When we do our own analysis of user behaviour 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 the experience when the screen is in our hands, not on the top of our desk.

Navigation:

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.

What We Do

  • We improve the online marketing efforts of Saskatchewan based businesses. With Saskatchewan's huge geography and small population, we have learned to rely on our innovation and our resourcefulness to create our own success. Netnotic Digital Marketing helps your company take it's marketing message to your customers, whether they are around the corner or 12 time zones away. Our specialty is building search optimized websites, making it obvious to search engines (such as Google, Yahoo, and Bing) what your site is about so that you get more qualified traffic.

From the Ground Up

  • Starting from scratch is the easiest way to construct a high ranking website. The advantage to starting from scratch is a clean start. The entire site can be designed to incorporate search optimization strategies. There is nothing sacred or no past "golden content" that might be sacrificed in the process of building a search engine optimized web sites.

Do we fix websites?

  • Yes. Every website has room for improvement, many more than others. If you find that your website is performing below your expectations, we can provide you with an improved design that engages your customers and makes more effective use of your online real estate. Of course, in the process we will also perform our website optimization techniques to help bring more search engine traffic to your site. Site improvements can range from simple tweaks to add consistency of design to the whole site, navigation improvements, modifying the graphics. or a complete site rebuild

If you have any questions?

Feel Free to Contact Us

Contact Us

Mobile First Website Design for Saskatoon

It's not just Saskatoon based businesses that we are able to help with their website development needs.  Extending outside of our home city, we have provided website design for all over Saskatchewan and even reaching out to clients all across North American. Using video chat, file sharing, text, email and phone calls we are able to provide our Digital Marketing services to any business in any location.