Author: Ashish Roy
January 3rd, 2018
0%
For the past five years, mobile has dominated desktop as the most popular form of digital media access. For the year 2017, the number of mobile users is expected to reach 4.7 billion and 58.9% of those users will be using their mobile to access the internet. That’s nearly 2.7 billion people that will be using the internet on their phones. That number alone proves the importance of designing webpages that function optimally on mobile devices. There are two main approaches to accomplishing this
Mobile First is exactly as it sounds- creating a webpage for mobile first, before desktop. Within the last five years, designers and developers have shifted their thinking from desktop to mobile. What does that mean exactly and how does it change the design process? With mobile first, designers are forced to pare down information. There is a lot less real estate to work with on a mobile screen so designers must research and incorporate the most important functions to the mobile design. Designers are also working with a less powerful computer so they may be less ambitious with the functionalities they will develop.
Maybe you are saying to yourself “well, that all sounds great, but why should I care?” The mobile first approach is essential if you plan to have an online presence. It will only make your life easier in the long term. If you start designing desktop first then you are more likely to develop functionalities that do not process well on mobile, meaning you might have to scrap your desktop design and start over. Here are a few steps to getting your mobile first strategy off on the right foot:
1. Make a Content Inventory
Take the time to map out on a spreadsheet or equivalent tool all of the pages you will include on your mobile site.
2. Make a Visual Hierarchy
Start to prioritize the most important and move it to the top of the inventory you created. What content are you mobile users going to use most? Move that to the top.
3. Wireframe with the Smallest Breakpoints First
Use the smallest breakpoint model first and then scale up from there, expanding the screen until there is too much white space.
4. Enlarge Touch Points
Your mobile users won’t have the benefit of targeting with a fine, pixel-precise mouse. Fingers are much larger and as such need larger buttons to push. Apple recommends 44 pixels square for touch targets. Also be sure to give hyperlinks plenty of space.
5. Avoid Hover at All Costs
Desktop designers sometimes count on users hovering the mouse over an item to interact with it. There is no great way for a mobile user to hover, the functionality just doesn’t exist. Steer clear of using hover in mobile design.
6. Think Beyond Webpage
Think more in terms of an app than a webpage. What other features could be added to enhance the mobile experience? Think about adding expandable widgets or AJAX calls to make it the process more user friendly.
7. Test It
Get on your own mobile device and bring up the website. Do this before accessing it via desktop or laptop. Have your inventory list handy and go through everything you hoped to include. Does it function the way it is supposed to? Could it be made even better with some re-design?
Responsive Website Design is the formatting of a website that it can be optimally viewed from any type device: PC, tablet and smartphones. This might sound very familiar to the mobile first approach introduced above and this is because responsive web design is a feature of mobile first design. However, responsive is different in that it starts with designing for desktop and working down in formatting for tablet and mobile.
From a design standpoint, responsive web design is a combination of moveable grids, layouts and images that function from CSS media queries. So when the user is looking at a website on their phone and then moves to a desktop, they have a similar experience due to the flexibility of the layout. Pictures and content may be arranged, but the user can do and see everything on mobile and desktop.
Responsive came onto the scene before mobile first, that is sometimes why there is confusion between the two approaches. Another example of responsive website would be if you were to grab the corner of your browser and readjust the size. Make it smaller and you will see the content rearrange itself so that it is not cut off. Believe it or not, it was once common for webpages to just end where the browser did so that user had to scroll around to find content.
If you are interested in using a responsive design approach first, here are two basic components to consider integrating:
1. Meta Tag
Use a meta tag in the head of your code to reset your viewpoint. Most mobile browsers scale to wide viewpoints to fit the screen. The viewpoint meta tag will reset this so that the viewpoint width fits the device, rather than initial scale.
2. CSS Media Queries
Media Queries are the essential piece to creating a responsive design. It engineers the conditions that tell the browser how to render a page for a specified viewpoint width. Basically, you are writing the code that tells the webpage that if a screen is 700 pixel, make the content 50% of the screen. That can be written for all of screen sizes needed.
It is best to follow the trends of the time and utilize a mobile-first approach. Responsive design does not take into mind limiting content. Users will get more out of their experience if they only see the essential information on their mobile device. By only resizing the webpages, they still may not receive the functionality they need to have a positive user experience.
Not sure which approach is best for you? Cibirix can help you in finding the best design, UX and UI solutions to engage audience, win business over any device or platforms. Check out our UX and UI page for more information, or you can contact us today for consultation of what design approach you should select and why.
Since founding Cibirix, Ashish has leveraged his marketing degree to lead the agency in crafting meaningful digital marketing experiences for clients. His results-driven approach is a unique mix of analytical thinking, crisp visual aesthetics and a desire to simplify frontends while developing robust architecture. With a passion for design, technology, & marketing, He leads each aspect of the agency’s business and oversees its talented team of digital professionals.
