With the resolution of smartphones and tables changing from big to small and back a mobile version of your website is practically essential; If you’re thinking that one design for the BlackBerry, another for the iPhone, the iPad, Android, Kindle can be daunting; You’re right and there is a better way.
What is Responsive Web Design?
Responsive web design is a technique for design and development in which layouts should respond to the user’s behavior and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids, layouts and images. As the user switches from their laptop to smart phone, the website should automatically switch to accommodate for resolution, image size. This eliminates the need for a different design and development phase for each new gadget on the market.
How to test a web site for responsiveness
Well the easiest way with today’s technology is to whip out your smartphone and load the webpage. However, if you’re on your computer simply resize the window; If the layouts start to change, becoming more usable then that website is responsive.
Why is Responsive Design Important?
When a potential customer views your website that very well may be the first and only contact. So it’s important to have a website that takes full advantage of whatever device they may be on. Chances are if a customer can’t read about your business, they will just click away. Using responsive design gives your business the edge to handle shoppers on the go. In an increasingly mobile world — that can be the difference between making and losing a sale.
Let’s take a look at companies that are reaping the rewards for correctly implementing responsive web design.
CamelBak’s website takes full advantage of responsive design, notice when we transition to the mobile view, their e-commerce shopping cart formats itself as to still be usable to viewers on a smaller screen size.
In the same fashion as the example above North Face consolidates its cart, search and menu when the view shrinks to a smaller device. The site also achieves a particularly nice effect is the number of items in the cart when the layout is changed.
Change.Org is often known in the news as an organization that does just what it’s name describes; Change. As such their petitions and interactive user base is of particular importance. Notice as the screen size shrinks change.org still takes advantage of the potential signup turning a rather long form into just a simple button click. This is a technique I’ve used many times to handle mobile forms that may be too large for a smaller screen.
If you’re curious, also take a look at the Fit Ferret Case Study
The thing to notice here is the inline signup for alters itself to be in a vertical orientation for mobile devices. This is important because it lets any potential signups still read the initial pitch while being able to complete a signup.
Not having a responsive website is likely losing customers due to immediate page drop offs. Ensuring your website is designed responsively is an top notch way to stay relevant with your more mobile customers. It’s a way to inform customers about your business on any device despite the size.