30 Useful Responsive Web Design Tutorials
So we’ve reached the end of our "Responsive Web Design week", tonight’s post will be the last of the series. We are going all out to help you hone your skills in manipulating those codes to respond at will when displayed on different devices. And to do this, we are featuring 30 Responsive Web Design Tutorials found online. This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.
We’ll start off with introductory tutorials in ‘Breaking the Ice’, something like an RWD: 101 class you should attend to get the hang of the concept before we move on to ‘Start Building’ exercises.
Lastly we’ll end with a ‘Do More’ section in which we’ll feature tutorials that play with horizontal layouts, ‘elastic’ videos, drop-down menus and slide-to-top accordion navigations, thumbnails and the sticky issue with tables.
But first…
Here’s a recap of the two tutorials that were featured earlier this week by our authors:
Responsive website Navigation
By Thoriq Firdaus – [View tutorial]
Here’s a tutorial to help you make your very own responsive website navigation. One of the most important aspect of a website is how easy it is to navigate through different parts of the site. Find out how to optimize this with CSS3 with this tutorial.
Responsive Resume
By Jake Rocheleau – [View tutorial]
If you are a web professional and an online resume is already part and parcel of your career, then you should take the opportunity to turn that resume responsive as well. Make it easier for employers and clients to find you on any device. And while you’re at it, your own resume doubles as a portfolio of what you can do as a developer.
Breaking the Ice
Now, where were we? Ah yes, let’s get some ice-breaking action started!
Beginner’s Guide to Responsive Web Design
By Nick Petit – [View tutorial]
This tutorial is a great starting point for beginners as it describes what web responsive design means, how it came to light, as well as explanations about fluid grids and media queries among others. Check out the resources listed at the bottom of the tutorial as well.
Introduction to Responsive Web Design: Video
By Nick Petit – [View tutorial]
This is a tutorial that is close to 9 minutes long which skims the surface of what responsive web design is about, how it came to be, the impact it has on the design of a website and what elements are involved in producing a responsive web design. If you are looking to understand what responsive web design is about without heading into coding first, you should start with this video.
How to Turn Any Website into a Responsive Site
By Rochester Oliveira – [View tutorial]
This is another tutorial that starts from the basics but breaks everything down bit by bit, including the OS and browsers you are turning your website responsive for as well as the elements that are affected when the website is viewed from different devices. The author also featured some useful WordPress and jQuery plugins to help make your work far easier.
Responsive Design in 3 Steps
By Nick La – [View tutorial]
This tutorial, will explain how you can produce a responsive web design with meta tags, HTML structure and the all-important media queries. You need some knowledge of CSS to understand it..
Designing For A Responsive Web
By Max Luzuriaga – [View tutorial]
Here’s an article that is not so much a tutorial as it is a guide to creating responsive web design. That said, the author literally tells you the do’s and don’ts of responsive web design. There are explanations about why certain features are not responsive enough, how to work with proportions and modules, and best of all, it is relatively short and easy to absorb.
Responsive Web Design: A Visual Guide
By Andrew Gormley – [View tutorial]
If text-filled tutorials are not viable options, try this video tutorial instead. It is still rather technical but if it makes you feel better, you don’t have to do much reading. It’s about 25 minutes long and the video-maker actually fast-fowarded through the parts where he codes, then goes back to explain what the codes do.
Start Building
Alright, let’s start building some responsive designs, starting with…
Fluid Grids
By Ethan Marcotte – [View tutorial]
Say grid, and you would think ‘rigid structures’, say fluid and you’d think that it could flow from one side of the screen to the bottom or top or side when you apply pressure to the browser, but put those two together and you would probably think you need to look at this tutorial to fully appreciate how fluid grids can help make your design more responsive.
Fluid Images
By Ethan Marcotte – [View tutorial]
By the end of this article, you should know who Ethan Marcotte is. Here’s a hint: he is the one who came up with the concept and term for web responsive designs. His name will pretty much turn up in every other tutorial in this list so why not take advice about fluid images straight from the Master himself?.
Scalable Navigation Patterns in Responsive Web Design
By Michael Mesker – [View tutorial]
This tutorial talks about the lessons the author learned from a working on a large-scale responsive web design project. Read his ‘walkthrough’ about how to create templates that are easier to configure for user-friendly and responsive results. It is a great look behind the scenes in understanding how to design interfaces in the best way for desktop, tablet and mobile views.
Responsive Web Design with CSS3 Media Queries
By Nick La – [View tutorial]
And another excellent tutorial to make you learn how to design a cross-browser responsive website template with HTML5 and CSS3. It’s a step-by-step approach and there are demos of a web design before and after the media queries were implemented to better appreciate the impact of media queries.
CSS Effects: Space Images Out to Match Text Height
By Zoe Mickley Gillenwater – [View tutorial]
This tutorial makes you learn the trick of making fixed-width images change their size and spacing in order to line up with the accompanying text, no matter how the browser window is resized.
Adaptive Layouts with Media Queries
By Aaron Gustafson – [View tutorial]
Learn how to use adaptive or flexible layouts with CSS media queries. Just follow the exercise to learn to adapt your design to double-column view or single-column view as well as to prepare the design for the iPhone and iPad.
Responsive Images: Experimenting with Context-aware Image Sizing
By Scott Jehl – [View tutorial]
Here’s a tutorial that used the build-from-mobile-first approach. This technique specifies a larger size for the images to use on larger screen resolutions, minus image requests as well as UA sniffing.
Do More
Elastic Videos
By Nick La – [View tutorial]
This tutorial deals with the scaling of videos as your browser window is resized. It’s essentially a CSS trick and there’s a demo to see the trick at work in the tutorial itself.
Hiding And Revealing Portions Of Images
By Zoe Mickley Gillenwater – [View tutorial]
The tutorial is actually taken from the author’s book, describing how to reveal or hide portions of images depending on screen resolutions. It teaches you how to dynamically crop images when the screen size changes, showing you only part of the full image when there is limited space.
Responsive Content Navigator with CSS3
By Mary Lou – [View tutorial]
Prefer a fancier way for users to navigate around your side? Then, you should read through this tutorial to learn how to code in some cool transitions: fade in, slides, rotations and scaling up. The transitions are essentially content layers that were shown or hidden with specific coding.
Create a Responsive Web Design Template
By Harry Atkins – [View tutorial]
This is a short tutorial to produce a responsive web template that works both on the desktop as well as on the iPhone.
Responsive Horizontal Layout
By Mary Lou – [View tutorial]
This tutorial teaches you how to create a horizontal layout with several scrollable content panels. Using The Origin of Species as the sample text, each chapter of the book is separated in columns placed next to each other in full-browser mode but when shrunk down to small enough, the layout changes to a fully vertical scrolling ‘book’.
Convert a Menu to a Drop down for Small Screens
By Chris Coyier – [View tutorial]
This tutorial will show you how to convert a menu to a drop-down list when the browser window is narrow, or when you are on a mobile device. The row of links in the upper right corner of the page gets converted into a drop-down menu to save space without sacrificing navigation options.
Flexible Slide-to-Top Accordion
By Mary Lou – [View tutorial]
Learn how to create a simple and flexible accordion layout, with fade-in transitions and adjustable widths based on screen size and resolutions.
How to Use CSS3 Orientation Media Queries
By Ryan Seddon – [View tutorial]
Based on the simple rule that defines portrait (height larger than width) and landscape (width larger than height) modes, you can write a media query to target specific styles based on the mode you view it on. This tutorial will show us how to do just that and it comes complete with a link to a color-changing chameleon that uses color to demonstrate this change as you shrink the browser window.
Responsive Data Tables
By Chris Coyier – [View tutorial]
Tables are a source of headaches when it comes to small screen sizes but that doesn’t mean that we need to completely avoid tables. Learn how to use media queries to make your table change formats completely when you switch to mobile screen sizes. View the demo to get an idea of the magic you can make based on this tutorial.
Fluid CSS3 Slideshow with Parallax Effect
By Ring Wing – [View tutorial]
Create a CSS3 slideshow where two background images are used and when the positions of the backgrounds are changed, a parallax effect is seen. Apart from that, the slideshow is flexible, resizing itself as the browser window closes in on it.
How to Build a Responsive Thumbnail Gallery
By Joshua Johnson – [View tutorial]
This is great for websites that feature thumbnails in a gallery. As the browser window is resized, the layout is changed to occupy between two columns (smaller screen sizes) and five (maximum) columns. For more similar slideshows and sliders, check out our Top 10 Free Responsive Image Galleries/Slideshows article.
Optimizing your Email for Mobile Devices
By Ros Hodgekiss – [View tutorial]
Even emails can be optimized for small-screen view like how websites are. Most of the time the text in an HTML email is resized to a point that is not made for comfortable reading; learn how to manage this and more from this tutorial.
using frameworks
Build a Responsive Mobile-Friendly Website with Skeleton
By Joshua Johnson – [View tutorial]
Skeleton is an awesome framework to build responsive websites with it. This tutorial takes you in a step-by-step guide on how to use Skeleton framework to build awesome responsive designs. You will be stunned to see how easy it is to implement.
Responsive Web Design with HTML5 & Less Framework 3
By Louis Simoneau – [View tutorial]
If you haven’t been properly introduced to Less, then do check out our own Less CSS tutorial first to get a taste of Less. In this tutorial, the Less framework was used to let you see clearly the effects of media queries.
Conclusion
And that concludes our Responsive Web Design series. We hope that the themes, tools and other resources featured in this series have helped exposed the concept of responsive web design to our readers. But how would we know if you don’t tell us?
Let us know your feedback on the series and if you have suggestions for more ideas you want to see at hongkiat.com. Drop us a line, or a comment below.
Related posts:
- 50 Useful Responsive Web Design Tools For Designers
- Top 10 Free Responsive Joomla Themes
- Top 10 Free Responsive Image Galleries/Slideshows
- 40+ Free Responsive WordPress Themes
via hongkiat.com http://www.hongkiat.com/blog/responsive-web-tutorials/