The word mobile-friendly or responsive is now part of our daily vocabulary – but what exactly does it mean?
A website that is ‘mobile responsive’ is designed to provide an optimal viewing experience in all browsers. This means that rather than simply re-sizing the entire site to fit proportionately into a browser window, a responsive site will creatively reorganize the elements in a way that promotes easy reading, navigation, and scrolling in order to optimize the user experience. All of the elements are placed on a flexible grid and simultaneously resize accordingly as the browser window changes. Photos, for example, may realign themselves from a row to a column for a better viewing experience. To witness the effect, try dragging the handlebars on the browser window on your desktop computer or just compare the difference in the appearance of a website as it appears on different devices.
With more than 50% of online traffic coming from mobile devices – mobile responsiveness is a trend that is not going away. In fact, Google is penalizing those websites that have not adopted a responsive theme. I have included images below from a site that I recently upgraded from a WordPress theme that was not behaving well on mobile platforms. Open Meadow Homes now has a thumbs up from Google.
A view of the homepage of Open Meadow Homes on a desktop computer. Notice that the navigation menu spans across the width of the page. As the user scrolls down the page the next section features three widgets side by each.
A view of the home page of Open Meadow Homes on an iPad displays the navigation menu in a minimized form. The widgets too, re-position themselves for optimal viewing. If they simply resized to fit in the window the content would be too small to read without forcing the user to zoom in.
Lastly, here’s an example of a view of the home page of Open Meadow Homes as seen on an iPhone 6 plus. Virtually all of the items have moved to a vertical position on the grid.
