Imagine this, you’re at your local coffee shop. Instead of reading through the newspaper, you’re catching up on email, perhaps doing a few Google searches. Somehow you have wandered onto a website while casually consuming data.
In this type of setting, the person is typically using their smartphone or tablet with one hand. Scrolling up and down, but not doing a whole lot of advanced moves. If the content on your website is easy for this user to consume, the result is they will be more engaged. If the content is hard for this user to consume, then they might find themselves zooming in and out of the screen or worse they might be panning from one side to the other. There is a good chance they might even go to another website instead.
As we all know, tablets and smartphones offer apps which are customized for that devices experience. The web offers solutions as well. In addition to the standard desktop website, there are native mobile website designs. There might be a site that is optimized for the Apple iPhone 3G, another for the Samsung Galaxy S III, another for the Amazon Kindle Fire HD. Each of these devices has a different screen size, resolution, operating system and web browser.
There are specific business cases that call for a native mobile website design. However, there are many more cases where we just want the website to look as good as it can, given the capabilities of the device. Rather than try to keep up with the latest gadgets, a responsive website instead asks the device a few basic questions. They include:
- What is the screen size?
- What capabilities does the web browser have?
Based on the answer to these questions the website responds and adapts to the web browser that is viewing it. Instead of getting caught in an endless cycle of trying to keep up with the latest gadgets, a responsive website takes a fresh approach.
The Responsive Solution: Flexibility
At it’s core, a responsive web design is flexible. This flexibility allows a website to change it’s layout, how big images are, and how rich the experience is. Develare recently created a responsive website based on the StudioPress Streamline theme. That theme is the perfect demo for showing a real world responsive website adapt to each device.
Full Size Layout
Although tempting to call this the desktop resolution, that would not be accurate. There are many tablets, including the newer Apple iPads and the Amazon Kindle Fire HD 8.9", that have higher resolution screens than many laptops and desktops. Therefore, it is more accurate to refer to this layout as the full size layout. Here are the key features:
- Background: Yes. Notice the dark brown color shown to accent the body of the page.
- Fonts: Full size
- Images: All images are full size
- Layout: 3-column layout
- Sidebars: Yes
Medium Size Layout
This layout is targeted at high resolution smartphones, but would be displayed on any web browser that has the same 640-pixel width that the typical high resolution smartphone has. The Apple iPhone 4, iPhone 4S, and iPhone 5 all use this resolution in portrait mode. The Samsung Galaxy S III, Galaxy Note II, Motorola Razr Maxx HD, and many other smartphone devices would display the site in a similar manner. What is important to note is this layout is completely dependent on screen resolution. Therefore, lower resolution tablets like the Amazon Kindle Fire 2 would display this layout too. Here are the key features:
- Background: No. There is one white background now.
- Fonts: Full size
- Images: All images are full size
- Layout: 1-column layout
- Sidebars: No. The sidebars have been moved to a lower portion of the page.
Small Size Layout
Some of you may be wondering, how are you going to support the legions of folks who have not upgraded to the new higher resolution smartphones? Perhaps your typical user is older, or in another country where lower resolution smartphones are prevalent. This layout is similar to the medium size layout and illustrates just how flexible a website with responsive web design can be.
- Background: No. There is one white background now.
- Fonts: Full size
- Images: Some images are full size, others are squeezed down to fit the reduced width of the browser.
- Layout: 1-column layout
- Sidebars: No. The sidebars have been moved to a lower portion of the page.
Benefits of Responsive Web Design
- Simplicity: No need to have a desktop, tablet and smartphone version of the site.
- Usability: Using your fingers to zoom in and zoom out of a website with are workarounds. Horizontal scrolling is even worse. With responsive web design both of these usability issues are solved.
- Engagement: The typical responsive website will see visitors stay on the site longer, and visit more pages. The reason is simple. It’s easier to use.
Conclusion
The responsive web design approach is a great solution for small business. If you would like to show the same content to desktop, tablet and smartphone users, a responsive site is both cost effective and easy to maintain. Maybe, the responsive approach, is just the tool you need for your mobile website design strategy.
