In the wake of Google’s “Mobilegeddon” businesses are looking for ways to make their site mobile-friendly. At Orion Group, we recommend responsive design over mobile sites (see our comparison here). But what does responsive web design mean? What makes a responsive website “mobile-friendly”?
Think of it like shape shifting. The website sees how wide or tall a screen is, and adjusts images, content, and boxes accordingly. The best way to understand how this shape shifting works, is to think of a website as a set of adjustable boxes inside of adjustable boxes (see image).
In websites that are not responsive, these boxes usually have a set height and width, like one and a half inches tall by 8 inches wide. But responsive web design uses percentages instead of set widths. Let me give you some examples:
Example 1 – a website “header” (the top part of the website that stays the same on all pages)
On this website, the header is set to 100% wide, which on a desktop computer is around 10 inches wide or more, but on a phone, 2-3 inches wide. It never goes beyond the width of a screen so users don’t have to scroll to the right or left to see the menu and other information.
Example 2 – website “columns” (displays content side by side)
Look at this paragraph and the previous example’s paragraph. If you are on a desktop, laptop, or wide tablet these two paragraphs will show in two columns, each half the width of the content area. But on a phone or small tablet, these two sections are the whole width of your screen and one is above the other. This makes the columns much easier to read on a phone.
Every website is unique and so is every page’s content. Sometimes there are 10-20 boxes inside of each other that all need to be told how to act and at what width. Yes, responsive design can get complicated, but in most cases it is better than building whole separate mobile-only website.
Still have questions about responsive design or are unsure if your website is responsive? Contact us and talk to one of our experts about mobile-friendly websites and mobilegeddon.