Responsive web design has gained incredible traction among designers, developers, and potential site owners. A responsive site’s efficient ability to adjust layouts on the fly for desktops, tablets, mobile and other devices with varying screen sizes makes it incredibly valuable. If you’re just delving into responsive design, it can seem like a daunting task. To help get you started, I’ve compiled a list of useful tips to prepare for your responsive web design.
- Know your platforms and browsers.
Are you developing for a mobile site or a desktop? And for which browsers? Knowing this ahead of time helps you assess what your limits are, if any, like knowing you may want to steer away from CSS3 on IE while embracing it on mobile because CSS3 on mobile is awesome.
- Know the min and max sizes.
No site can be infinitely responsive. Once you know the answers to #1, it may help in deciding the minimum and maximum resolution. This way you know what you’re aiming for when re-sizing elements on your site. Images and page elements can only get so large or small before they start to look strange or break the UI.
- Percentages in CSS.
Percentages should be used for just about everything, mainly padding, margin and/or the widths of elements. What I like to do is find out what these numbers are with pixels and then use my browser inspector to get the closest I can with percentage. Also, instead of trying to be a math whiz, I’ll let Google find me a calculator and just get my percentages that way. Decimals are okay in percentages as well: http://www.percentagecalculator.net/
- Fonts should steer away from percentages.
While percentages are fantastic for CSS, re-sizing fonts with percentages can be tricky. It can be done but there is a risk that re-sizing font with percentages may render your type completely unreadable, at some point. That’s certainly something we want to avoid, so instead, it’s best to either leave the original desktop sizes alone or bring them down a point or two, so long as it’s still readable. Keep to using pixels with font sizes and line heights so that you can have more control.
- Sometimes bigger is the way to go on a smaller platform.
I used to think that responsive meant taking a desktop site and just shrinking everything down to proportion. That’s not necessarily the case, and to adjust to smaller screen sizes like tablets and phones, it’s better practice to shift elements and/or make elements larger. Simplify the design to give the user a legible version of the site with everything that’s necessary. Clicking an element with a mouse versus your fingertips is an entirely different experience.
What other useful tips do you have for responsive web design? Share with us in comments.