As smartphone and tablet adoption rapidly increases, so does the importance of mobile-friendly websites. According to ComScore:
As of January 2017:
71% of online minutes in the US are spent using mobile devices, and not using some other device such as a desktop or laptop computer.
However, interacting with websites on smartphones and tablets is not the same as doing that on desktop computer monitors. Factors such as Click versus Touch, Screen-size, Pixel-resolution and support for Adobe’s Flash technology have become crucial. Links that are too small to click on easily, text that is too small to read without zooming, pictures that don’t fit on the screen and animations that don’t show at all may discourage a smart phone user.
What is Responsive Design?
Responsive design is an approach to web design that is intended to provide an optimal viewing experience — ease of reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones). The navigation, screen layout, images, media and other elements adjust according to the screensize or device viewed on.
This differs from the approach of building a separate mobile website. The advantages of a responsive layout over a separate mobile site include reduced development time, reduced maintenance time since there is only one website to update, and better search engine visibility because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for search engines to crawl, index, and organize content.
Responsive Website Examples:
Mobile Menus
Good mobile menus assure that links are big enough to click on, but stay out of the way of the content. Click the icon, and the mobile navigation can drop down from the top or slide in from the side.
Stacking elements
Side by side boxes may look fine on a desktop computer, but on a cell phone they will look cramped, and images may be too small to see well. At smaller screen size, different elements can be rearranged to fit the available space.
Mobile-Friendly Tables
Columns are converted to rows to keep all the data accessible and readable. No text running off the screen. All the text is big enough to read.
