As a UI (user interface) website developer, I’d be lying if I said I don’t yearn for the days when websites were created with one medium in mind: the desktop computer. Back in the good old days, testing meant checking on just a handful of browsers – not multiple smartphones, tablets and desktops.
But times have changed, and the web has changed along with them. The birth of the iPhone in 2007 and the iPad in 2010 have meant users are turning to alternate viewing platforms in ever increasing numbers. Welcome to the world of responsive design, where layouts shrink and expand and elements fly around the page to fit on whatever device is being used!
The user sees the responsive site adapt seamlessly from device to device. Behind the scenes, however, there’s some key development tools making this all possible.
1. CSS Media Queries – Responsive Design’s Best Friend
The cornerstone of any responsive website is CSS media queries; they truly are (at least for a UI developer) the best thing since sliced bread. Without them, responsive design just wouldn’t be possible. In practice, they enable specific style rules to be targeted to a range of different screen sizes. To make use of them successfully, consider these basic tips:
Work with the website designer to establish breakpoints and target your styles accordingly to smartphones, tablets and desktops. Breakpoints will set out how the layout should change as the screen size shrinks. The jury’s still out on where these should fall exactly, and different developers will use different standards, but these are the rules I follow:
Desktops: 1024 pixels and above
Tablets: 768 pixels to 1023 pixels
Smartphones or smaller devices: 767 pixels and below
- Consider hiding elements altogether on smaller resolution devices if it makes sense to do so. For example, large graphical elements such as banners aren’t really useful to a mobile user – they’re mostly in the way.
- Avoid using fixed width elements, as these won’t adjust properly. Instead, use declarations that make use of percentages or max-width values.
2. A Flexible Site Needs a Flexible Menu
The central element to any website is its navigation; without a well designed menu system users won’t have a way to get around your site. While media queries can aid with the styling of a responsive menu, a little JavaScript is needed here.
Rather than starting from scratch, there’s a ton of existing frameworks out there with all the functionality built right in. If you’ve started with a theme that’s responsive, it may even have this already. If you do need to implement this from scratch however, FlexNav is the one I like to use. It’s simple, lightweight and can be modified to look great at all the different breakpoints. Best of all, it’s totally free!
3. Testing Isn’t An Exact Science
Without a doubt the hardest part of creating a responsive site is testing for cross-device compatibility. This is why continuous website maintenance is so important! For obvious reasons it’s not practical to keep an inventory of all devices available on the market, but there are some approaches that can help things along in this area:
- Sign up for a testing service. Services like Cross Browser Testing include a variety of popular mobile and tablet testing options.
- Use Chrome’s Emulation Panel. While it’s not perfect, I find this enormously helpful to get a sense of how things are looking on popular tablets and smart phones. Check out the documentation here.
- Check on your co-workers’ devices if possible. This one won’t be feasible for everyone, but if you work in a design studio it’s a good chance that your co-workers are toting different smartphones and/or tablets, so ask if you can try the site out on their device. This can often reveal problems that don’t show up in emulation tools.
- Don’t forget the desktop! With so much focus on alternate display types, it’s easy to forget the good old desktop browsers. So make sure to do standard cross-browser checks too.
Given that responsive design is still a relatively new field and is changing almost daily, new tools and practices are emerging all the time. These are just some of the basic approaches that I use, but I’d love to hear what other developers and designers are doing. Feel free to share in the comments below!
Not confident in your website’s responsiveness? Check out our expert web redesign services or website maintenance services.
Get Started Today
Start getting the online leads your quality business deserves today. Get a free no-obligation initial 30 minute consultation from one of our Google Certified Experts.
An EnvisionUP expert will respond within one business day or less with the next steps.
Watch Ellie flourishing despite 3.
Watch Ellie flourishing despite 4.