There’s a lot of industry buzz going around now about Responsive Websites. Let’s first address exactly what a responsive website does. A responsive website responds to the size of the screen of the device on which it is viewed. A responsive site is basically an “elastic” site which stretches or compresses, and elements move, depending on the size of the screen. Subsequently, font size becomes smaller on smaller screens, thereby making it difficult to read on a smartphone. Today, it’s important to understand the need for Responsive AND Adaptive Websites. This is when the website is coded to adapt to the features of the device on which it is viewed, thereby providing the tablet or smartphone viewer with a more functional and engaging website experience, which for a website owner often means the difference between gaining or losing a customer, or making or losing a sale.
Responsive Example: If you look at the desktop view of The Malden Bridge Chef Cooking & Pastry School website, shown at left, the logo is on the left and the menu is on the right.
Now, for the tablet portrait view, shown at left, notice that the logo is centered at the top and the navigation (or menu) is centered under it and all of the other elements on the page are displayed in a way that prevents having to scroll right or left to see the entire page.
Adaptive Example: If you compare the desktop view, at the top and the smartphone view, at right, you can see that the logo is on the left on the desktop and is centered on the smartphone and, more importantly, you can see that the navigation which is occupying most of the page on the desktop, now becomes a SIMPLE “menu” button on the smartphone view, so that you can see part of the page content, without having the screen cluttered by the navigation.
If you look at the top of the screen on the smartphone view, you can see a “bar” with an home icon, a select option with the words “connect with us” and a phone icon.
- The home icon is the home or “main site page” link button on the desktop view. It is removed from the navigation and put at the top left of every page so that users can have easy access to the home page from anywhere on the website.
- The select option picks up all of the social network links (which can be placed anywhere on the desktop view of the website) and places them accessible from any page on the site. We also add an easy “email us” link to the select option.
- The phone icon takes advantage of most of the modern smartphone features, which enables the user to automatically dial the website phone number with one click.
Also, on the smartphone view, we adapt the size of the font to be a little bigger so it is easier to read on a small screen.
You may see “responsive website” articles or advertising frequently these days but responsive-only websites do not have the features for smartphones stated in our adaptive example above. This is why we build responsive AND adaptive websites. Because responsive alone simply isn’t good enough.
To test The Malden Bridge Chef website or other responsive and adaptive websites on your desktop, tablet or smartphone, click here
For more information about how Lavery Design Associates can build an effective website for your business, contact us.
Article by Jerry Mohr