Why your small business website needs responsive design
More than half of global internet traffic is generated from mobile devices. This figure increases when you look at the websites of local businesses, especially restaurants, as users are often finding your page while they are out and about and looking for somewhere to eat. Tourists and travellers also often only travel with a mobile device and this is how they explore the city.
Mobile devices see the internet in a very different way than desktop computers. The original mobile browsers were designed to display traditional desktop websites on a small screen, but overtime it became apparent that these websites were difficult to use and not suited to the mobile experience. Enter responsive design.
What is responsive design?
Traditional websites were created with a static layout. The layout didn’t change depending on the size of screen the user was using. If the content was larger than the window displaying it the user would have to scroll to see all of it. The earliest forms of responsive web design actually came before mobile devices and were created to deal with that very problem. Flexible width layouts allowed designers to create websites that would scale to any size window. Content would adjust to the width of the window and the user would still scroll up and down, but not left or right.
Today, responsive design, means a lot more than just scaling elements on a page. Picture a standard two-column layout where you have two columns of text side by side. On a standard desktop display this layout looks just fine, but without responsive design your phone attempts to squeeze both columns onto a smaller screen, shrinking them to the point where the text is illegible.
A responsive design solution for this problem would be for displays below a certain width to stack the columns on top of one another rather than keep them side by side. Now each column can take up the full width of the display and still be large enough to easily read, the user simply scrolls down to see the next column. All the content is still on the page, but it is presented in a way that is most appropriate for the device being used.
Taking responsive design further
The last example is pretty basic, and fortunately content management systems like Squarespace have responsive design functionality built into all of their templates that works out of the box. But what if we look at a more complicated example?
Squarespace provides a calendar block to display content like events on a calendar instead of as a list. This is a great feature that only takes a few minutes to setup. Place the calendar block on a page, point it to a list of events and you’re all set. The only problem is that on mobile devices the calendar is too small to be useful.
Responsive design isn’t just about rearranging the existing elements on a page to fit the display size. Responsive design can also mean representing the same information in a different way so that it is more appropriately presented to the user. In the above example we might decide that the calendar looks great on a desktop or tablet, but for a mobile user we will swap it out with a list of events presenting upcoming events first.
Contextual responsive design
We have now seen that responsive design principles can allow us to present the same information in different ways depending on the device. But what about presenting different information depending on the device? When browsing a restaurant website on a desktop users may spend longer on each page, they may browse menus and look at photos. When browsing a restaurant website from a mobile device, the most important information might just be location, phone number and hours. Contextual responsive design allows us to prioritize the information the user is looking for which we can make assumptions about based on the type of device being used.
How your business can use responsive design
Every website is a first impression of your business. Websites that don’t use responsive design are difficult for users to navigate and feel dated. Websites are also competing for a limited amount of the user’s attention span. Presenting the information they are looking for in a device-appropriate way that is easy to read and navigate allows you to make the most of a potential customer’s time on your site. The last thing you want is for a user to leave your site having not found the information they were looking for because your site was too difficult to use on their device.
Read more
https://www.w3schools.com/html/html_responsive.asp
https://www.invisionapp.com/inside-design/examples-responsive-web-design/
https://en.wikipedia.org/wiki/Responsive_web_design