In the PREVIOUS part, we understood What is Mobile Responsiveness and why it is essential. And this post, as we promised, will be dedicated to what-to-do and what-not-to-do for making your website mobile friendly.So, let’s jump straight to What-to-do part:

 

What-To-Do For a Great Responsive Design

From the relentless practices of designers & developers, certain practices have evolved, and have proved to be the most basic practices that must be adopted to attain the best degree of mobile responsiveness.

 

  • Mobile First

If you’re about to built your website or blog, make sure it’s mobile first. Making website mobile first ensures your website is functioning across all the device screens. Also, Google prefers websites that are mobile friendly in its SERP ranking.

 

  • Use Frameworks:

One of the most intriguing factors about Frameworks is that they are tailor-made, and you only have to make some changes to personalize them. And they are as easy as it gets. Skeleton, Foundation 3 and Bootstrap are the popular frameworks. However, the most popular is Bootstrap.

 

Read Article: Bootstrap Implementation in Magento 2.0

 

  • Implement Viewport Meta Tag

Viewport Meta tag tells the browser that page needs to fit the device screen. Therefore embed Viewport meta tag or, your website won’t work well on Mobile Screens. It prevents unnecessary zooming of the pages thus enforcing pages to impart an app page like experience.

 

  • Implement Media Queries

Media query is another feature that contributes to the page fitting the screen size. It allows the browser to ask the device what its screen size is. Also, ensure that it is configured for all devices not just the for the popular two or three devices.

However if defined as 100%, it would fit the layout irrespective of the screens to which it is opened at.

This ensures greater flexibility for your website and the better experience for your users.

 

  • Use simpler Design

Another important or, probably the most important, point is to use simpler designs for your websites. The reasons, firstly, it lets you project only the important aspects of your business leaving out other unnecessary details. And Second is, it prevents the clutter-ing due to unimportant elements and excessive information which otherwise can make the user experience bad on the devices with smaller screen sizes.

These are the points that MUST be implemented to ensure a flawless mobile responsive website. However, there are certain points that must be prevented or they make the overall experience horrible.

Thus, now

 

What-Not-To-Do For responsive Design

  • Don’t Use Flash

Since Flash is almost an obsolete technology as it doesn’t work great with mobile devices. Restrain yourself from using Flash.

 

  • Don’t use Pixels, instead use Percentages

When defining the image size don’t use pixel instead use percentage. For example, if you define the width of an image to be 500 pixels, and you open it on the device whose screen width is 300 pixels, then invariably, you would have to scroll to the right of the screen to view the whole picture, and this distorts your user’s navigation experience.

 

Keeping these points in mind would help you come up with a mobile responsive website and ensure greater user experience. However, relentless testing in the real world is another thing that can’t be ignored at all. It is an indispensable element of building a compelling web experience.

 

Now that you’re aware of What’s and Whatnots’ of the mobile responsiveness, in the next blog post we will be discussing how to test your website for mobile responsiveness.

 

Tags:
Magento Mobile App builder mcommerce mobile responsiveness responsive design for mobile