Responsive design. It's all the rage. If you've done any research about creating a website recently, you've probably seen this buzzword floating around all over the place. But what does it really mean?
At the most basic level, responsive design simply means a website that adapts to the type and size of the device the user is browsing with.
How we got here
For years, most websites were created with what's called a "fixed-width" style. An informed decision was made based on the desktop screen width of most users. As developers we tried to choose a size that looks good on the smallest popular screen size, center the content, and add white space to fill the browsers of users with larger screens.
And then came the smart-phone. We're all familiar with mobile sites. Visit any of the major cable news websites on your smart-phone and you'll likely be redirected to a separate website with a different look and content. This model can be useful, but it presents a few issues. One of the big ones is that maintaining a separate mobile site means maintaining a separate set of content, links, etc. There are also SEO considerations to think about. And a separate mobile site can really frustrate users if they can't find the desktop version content they are looking for on the mobile version of the site. You need to really know your users and your content if you are going to make this work.
A fresh alternative
The thing is, we are now in an era where we don't just have phone and desktops. We have tablets, phablets, and all kinds of phones with different sized screens, etc. There are some people who create separate websites for just about every size/type of device they can! The cost and time to manage this kind of a monster can really add up. Sometimes it makes since, sometimes it doesn't.
As all of these devices have come into the marketplace, the technologies used to build and display websites have been evolving too. It's now easier than ever to create a dynamic website that responds to the device it's displayed on. Enter responsive design.
How it works
Instead of a fixed-width, we design and build a fluid site with what are called break-points in mind. We can still come up with a traditional looking desktop design initially, and then we can make some informed ideas about how to tweak the layout when a device falls within a range of widths and orientations. The idea isn't to make the site look the exact same on all devices, but rather to intelligently adapt. For example, on the desktop version the site may have three columns: a narrow left navigation menu, wide content area in the middle, and a right rail that contains ads. On a tablet with a smaller width, the layout changes and the right rail content moves below the content area. When a phone pulls up the site, perhaps the site shifts into a single column layout: the navigation turns into a more mobile friendly menu at the top and the rest of the content flows below.
There are many other layout changes that can happen, but every site is going to be different. Some other common responsive design patterns include:
- Horizontal drop down menus changing to a vertical accordion style menu
- Hamburger menu icon (three lines) to reveal a menu
- Sticky headers and footers
- Fluid image sizes
As with mobile only sites, we also have to consider the fact that users on touch devices have no mouse. So we need to make sure that things like drop down menus, which rely on hover states, adapt to respond to touch – or change into a completely different menu style as mentioned above. If there is an image carousel or slider it would be good to allow the user to swipe to advance to the next item rather than click on a small "next" link.
The new CSKern.com
As you might have noticed, we recently launched our new website. And it is responsive. As with all of our web projects, we didn't just make this decision based on the fact the responsive design is an emerging trend. We feel it is the best solution for our content and our users. View our site on a couple of different devices, or just resize your browser window to see how it adapts.
What to do
So, before jumping right in to your next website project, take some time to think about where the medium is headed. Take a look at your stats and see how many of your users are visiting your site on a mobile device. Think about what you want your website to accomplish for you. Is your content generally flexible, or is it complex and rigid? What are your users looking for? Is what they are looking for dependent on what situation they are in?
Some folks will tell you that responsive design is the only way to go. Others might even say it's a terrible idea. We don't claim to be true believers either way. I don't think you can make a blind decision like this without doing a little soul searching beforehand. But responsive design is certainly a great tool that can be used to solve a lot of today's websites' problems.
Here's a few good examples of recently launched responsive websites:
Interested in talking about responsive design for your website? Request A Quote...