What is responsive web design? The best way to find out is to go to the source, the man who came up with the term originally. According to Ethan Marcotte, your design needs to have three elements in order to be considered responsive.
- Flexible Grid Foundation
- Images Must be Flexible
- Media queries are used to determine view to show
Understanding Responsive Web Design
It’s important to start with a strong foundation – a flexible grid design. Luckily, there’s a lot of information available online that will show you how to implement this groundwork for making your site easily viewable on any device. Find out more about fluid grids.
A little trickier is making sure all of your images resize correctly when viewed on different devices. As is usually the case when it comes to the Internet, there’s more than one way to do this. The important thing to remember is that you should test often and tweak before you launch any new design. Find out more about fluid images.
Last but not least, you need to install a way to know which style sheets and images to use depending on the type of device being used, operating system being used. A lot of third-party scripts make this relatively easy to include in your website. Learn more about CSS3 media queries.
Top Tutorials for Responsive Web Design
As a bonus, here’s a list of some of the best online tutorials for responsive web design.
- Beginner’s Guide To Responsive Web Design By Nick Petit – This tutorial is a great resource for those who are new to RWD and want a good overview.
- How To Turn Any Website Into A Responsive Site By Rochester Oliveira – This one explains the basics and gives advice for jQuery and WordPress plugins.
- Designing For A Responsive Web By Max Luzuriaga – Want to learn more about the grid system of design? This website is for you.
- Responsive Web Design: A Visual Guide By Andrew Gormley – This is a long 25 minute video, but if you don’t like reading, it’s a good way to get the technical details you need.
- Optimizing Your Email For Mobile Devices By Ros Hodgekiss – If you do a lot of email marketing, you’re going to want to check out this tutorial to help with email messages for mobile devices.
Any of the links above are a great place to get started learning even more about responsive web design. If you have any experience with this or have any questions, please leave a comment below.
