Responsive Web Design

The web is a different place than it was 5-10 years ago. People are coming from all sorts of varied devices and your website should be accessible and usable in each environment. But, who wants to make multiple version of a single site and keep up to date with all the new gear that comes out? Nobody. Instead, let’s make sites that readjust themselves when viewed through something other than a desktop or notebook browser.

There are a few ways of doing this, each with their own set of pros and cons:

Browser Sniffing

There are hundreds of devices and more are being created each year. Keeping up with a device library and all their individual specifics is a chore. Going this route, it’s best to build upon what the community has going already, I recommend a codebase like mobileDetect to get you started. The benefit of coding for specific devices is the ability to make sure things look perfect everywhere. This is a lot of work, however, as they’re always be more devices to build for.

Opinion: Too much work!

Redirect to a Mobile Version

Having a mobile site can be it’s own unique project. Perhaps mobile users have a completely different behavior and content needs than a desktop user might have. This makes perfect sense for some projects where there is a definite line between a mobile vs desktop user.

To do so, you can build upon browser sniffing either via Javascript or a server-side language like PHP. When a user goes to a page, they’ll be redirected to a mobile version of the site. I see many sites that will redirect to the homepage of the mobile site rather than the specific page the user wanted. This is annoying and makes the user have to re-navigate to what they wanted to see. In addition, if you’re not providing a complete website experience on mobile, the user may need to switch to a desktop view to get the content they need.

Opinion: Manage 2 unique code bases? No thanks!

Responsive Design with CSS – Best Solution

By far the best practice is to use @media queries in CSS to show the same website content, but display it differently based on something like browser or desktop size. Build your site for desktop and modify it’s layout for smaller devices. There are 2 ideal ways to do this: a) design everything with percentages so that they readjust with any window size, or b) set alternate styles based on a max-width using @media. I prefer option b and find that anything less than 800px these days is most likely a tablet or smart phone.To add @media queries to your CSS file, build your styles for the default desktop site and add class specific alternate styles with a block like so:

@media screen and (max-width: 800px) { 
    .contentBox { width:100%; float:none; } 
    .adBanner { display:none; } 
} 

These styles will be ignored until the browser window, or device screen itself falls within the max-width of 800px or less. An iPhone will always show the mobile layout, an iPad or Android tablet would show the mobile view in portrait and desktop view in landscape and will readjust without refreshing the page. You can include as many different rules as you’d like to hide/show content, resize boxes, or move things around to make sure your design looks best in all the environments you wish to support.

I recommend checking your website analytics to get an idea of just how many of your audience is coming from a phone or tablet these days… it may surprise you. Might as well give them an awesome looking design to fit their device.