I recently visited a website on my mobile phone to read some of its informative content. Sadly, I had to keep scrolling from one end of the browser window to another to a point where I couldn’t do it anymore. It is such a pity in the world where Google Report shows that more than 60% of traffic comes from mobile and tablet users.
It is quite imperative for web developers and designers to ensure that the website is responsive and the layout works well for different screens. Last week, a client approached me with the suggestion I assist with SEO. After doing the basics that include keyword research, competitive analysis, and site health; I added the website to Google Analytics for tracking.
It has been said before that numbers never lie. In a week’s span, the traffic coming from mobile stands at 70.69% while desktop stands at 29.31%.
A deeper look into the various screen resolutions adds even a weightier emphasis on the importance of ensuring that the website is fully responsive. You can check if your website is responsive enough.
Adaptive vs. Responsive vs. Fluid Web Design
Has it ever dawned on you the number of times you touch your phone in a day? Research shows that the average number of times a person touches a phone in a day is over 2000.
Let’s say you are at the office using the desktop to access a certain eCommerce site. However, because it is late you decide to check if they have what you need once you get home. You get to your house, pull out your phone and boom, images are broken and the content runs from one end and disappears the other end. Such a website is not responsive.
It is not only important for web designers to understand the difference between Responsiveness, Adaptability, and Fluidity. Google rolled out an update in 2015 that ranks high mobile-friendly sites. Google algorithm is concerned with the accessibility and performance of the website on mobiles providing the user with a good experience. Mobile-friendliness depends on Adaptability, Fluidity, and Responsiveness.
Responsive is a wide field that encompasses both adaptive and fluidity in websites. The responsive website combines fluid layouts, media queries, and flexible grids in meeting the needs of different mobile screen resolutions.
Media queries play a vital role in controlling the scalability of content according to the device the user is using. You might have noticed while using at a desktop, the website display type, height, width, columns, etc is different from how it appears on mobile. This is courtesy of media queries.
In a nutshell, responsive means changing the layout continuously based on either the actions of the user or the device.
Adaptive design changes the website layout depending on the specific screen resolution “breakpoints” using pixels in media queries. Adaptive design has to detect the screen size to load the appropriate layout. In most cases, the screen widths are 1600, 1200, 960, 760, 480, and 320. The 960 is the most commonly used of all the screen sizes.
The advantage of this design is its certainty in providing a positive user experience through a functional user interface. Secondly, the loading speed of websites is high because of no adjustments needed while loading the pages. Unlike Fluid that could cause jumping when the window is resized, Adaptive has no issue scaling up or down.
Uses relative units and proportional widths to change in a fluid smooth way. When the screen size of a device changes, the fluid layout using the percentage instead of pixels spread over the given space.
Suggested mobile layout design
- Logo: Highly recommended and good practice to be in the upper left-hand corner of mobile sites.
- Search: Hide the text box and use the search icon to indicate the functionality.
- Content: Depends on the type of content. Gallery of images will display different from text messages, a form will display differently from a video. Determine the kind of content you are going to use.
- Navigation: The best practice is to have it in the upper right corner. The other option is the thumb zone that
- bases on easy-to-reach, hard-to-reach, and in-between areas.
You cannot afford to have a non-responsive website at an age where the majority of the potential clients, partners and content consumers are on their mobile. A website that provides the best experience for the user no matter the type of device they are using will always convert.
Do you have any struggles with having your website responsive?