Designing websites that provide an optimal viewing experience for the user – regardless of the display device – is something “the people” want…but not every web designer does. We’ve pulled together three ways you can apply some best practices in RWD to make sure your websites work well for the masses.
Wait, What is Responsive Web Design?
Good call. Let’s get some overview out of the way. In short, Responsive Web Design (RWD) is a set of web design practices and philosophies focused around creating one user interface design that works on all devices, regardless of the display device.
Right now, smartphones account for 80% of Internet searches – and really, that’s probably a pretty conservative number. No matter how you look at it, it’s never been more important to learn and apply these design philosophies and techniques to your web applications.
- Design Responsively
Designing responsive sites means you understand the best site layouts to use when converting a wire frame into a real design – you can’t just design to one device and add fluidity. Design responsively by incorporating RWD principles into the design from ground zero.
Generally, this means that the layout and its HTML code should be as simple as possible. Menu options and navigation should be easy to implement by using HTML doctypes. Use an application such as GZIP to compressing page resources, reducing the number of actual bytes that the user must download to view the site (especially helpful for mobile users with limited bandwidth).
- Use RWD Tools to Make It All Fit
An RWD approach to web design requires you to adapt the layout of the webpage to the display device – you can easily do this using fluid grids, flexible images, and Cascading Style Sheets (CSS) media queries.
In the olden days, you could just set a container size to “x” pixels, and this image to “y” pixels, and that font to “z” pixels. Sure, the user might have a monstrously huge monitor, but by and large, the site would look the same across the board. Now, you have no idea what size screen will be used to view your site – the same user could view it on three different devices at the same time – and there’s no true standard for pixel sizes. Enter, fluid grids and flexible images.
A “fluid grid” means you must specify the size of page elements in relative units, such as percentages, instead of absolute units, such as pixels. By using units such as percentages, your site will automatically adjust itself to fit the screen size, and giving the user a better experience based on their device. Ta-da!
Since you’re using relative units for the grid, you need to make sure your images aren’t larger than their containing element – again, using relative units (hence, “flexible images”).
CSS3 media queries determine the width of the browser page, which decides which CSS style rules to use for what width – basically, the queries make choosing the right styles for the right device.
It all works together to make sure everything looks right on the user’s device. Think of it like those machines (also known as “baristas”) that make sure your latte has the right percentage of espresso and milk for your specific size of coffee cup.
- Treat Mobile Users Like You’d Treat Desktop Users
Taking another poll – how many devices are in your bag right now? I have three – a laptop, a tablet, and a smartphone…and an aching shoulder from carrying it all around. Ten or so years ago, people would’ve looked at me like I’m a crazy person; today, my dad – with his flip phone barely taking up any space in his pocket – is the one getting the looks that say, “Is that a flip phone? Did we just time-travel? Did I finally get my wish to go back and invest in Apple?”
Today’s web users have a range of devices, including a smart phone, tablet, laptop and desktop (unless they’re my dad). The need to provide an optimal viewing experience for these users means that a site’s appearance needs to adjust without creating content or suffering function losses. This means that all page elements (images and grids) must be completely fluid, so they can automatically reconfigure for each device.
If your RWD tool belt is missing some tools, check out our updated course catalog for some great options to fill the gaps. To get started with RWD, try our Building Responsive Sites Using HTML5 and CSS3 course – which we are, as always, committed to customizing (for free!) to fit your project, your people, and your specific learning goals. Talk to our training experts now, at (877) 629-5631.