Nowadays using a theme with responsive and sleek design becomes a trend. Proven by a great hype of new responsive themes, templates and webpage layouts have been created and available either freely or by purchase. Do you want to switch from Old-school designed template to a responsive one? Following the hype and trend, you should do that from now. But how?
The easiest one is to search, download (or purchase) and use a responsive theme if you are using WordPress, Joomla or any other popular CMS.
But if somehow you want to leverage your design skill, then reading, learning and immediately-practicing some cool guides are the next answer. Luckily, we have some selection tutorials about responsive web design to elevate your skill and knowledge from scratch.
This one is obviously a detailed explanation as well as introduction to what is a responsive design along with fundamental things you should know. Explained by Nick Petit, readers is introduced to “fluid grid” which is the first key idea behind responsive design. Readers will also get to know about “CSS3 Media Queries” which is the second important part that gives responsiveness to a web design.
Being responsive is not always about fast but also flexibility. You may skip the “bla bla” part and jump forward to create your very first responsive web template. In that case this nice “how to” tutorial written by Harry Atkins will guide you to do that. You’ll have simple design but it shows you what and how a responsive design is.
In this article Ethan Marcotte explains some basic ingredients of responsive web design layout. Meet the Fluid grids, Flexible images, and media queries which are the three technical ingredients for responsive web design. He explained well along with some basic examples of responsive architecture.
This article is really the perfect guide explaining how to transform any traditional website or blog into a responsive one along with all the tools needed. The main purpose of this articel is to providing few ways to take your current site and turn it into a mobile friendly one, with little effort.
This 8 minutes 47 seconds video will introduce the ideas of a fluid grid and responsive web design. Hopefully you can understand the concept easily by simply watching the video. Must see!!
As long as you have basic CSS knowledge, you can create your very own first responsive layout in 3 steps along with its meta tags, HTML structure and the all-important media queries. All the basic things you should know are all-in.
This article is not purely a tutorial but all the do’s and don’ts of responsive web design you should know about. All pieces in the Responsive puzzle are explained briefly. Max Luzuriaga tells you: What is Responsive Web Design?, The Designer’s Role, Grid Systems Guidance, How To Think Design Proportions, How to Make Your Design Modular and so on.
Feel not so comfort reading a step-by-step guide? What if all you need is just watching a step-by-step visual guide demoed in a video. This one does not only teach you how to build responsive web designs that accomodate everything from your mobile phone up to your massive desktop, but also provides you with needed source files for practicing the guide.
CSS3 media queries add a lot of control and power on how your webpage will be display depending on multiple factors such as device size, orientation, aspect-ratio and many others. This article shows you most common tricks used for responsive web designing.
Creating a responsive design to fit in any ranges screen resolution from 320px (iPhone) to 2560px (large monitor) or even higher will be much more easy following this tutorial because readers can simply use download-able .zip files containing all materials needed. Making use of HTML5, CSS3, Media Queries CSS, Flexible Images, Flexible Embedded Videos, and Scale Meta Tag techniques, every reader will learn quickly.
11. WTF GUIDE: How to Create Your First WordPress Responsive Theme
This newly posted guide on SmashingHub explains how to build your very first responsive WordPress theme designed from scratch or using existing theme of your blog. The whole guide is pretty basic and very suitable for newbie.