RWD aka Responsive Web Design isn’t a creation of Ethan Marcotte.. Perhaps he is a great thinker who enlightened the minds of other developers. Starting with what, why and how RWD developed, it would be great if you first tour an introductory class.
I assume that you are already aware of what actually RWD is and why is it being a major component/concept while designing a modern website.
Well, to sum up or conclude RWD in 2 sentences, we could simply call
RWD as the combine use of media queries and use of percentages to achieve a web page which is easily accessible on a device irrespective of its size (height or width).
Now coming to the point of focus and i.e Webdesign tutorials to design responsive websites. That said, without any more gaps and pauses, here are the best Responsive webdesign tutorials on the web.
The person who coined the concept of RWD for web design has a blog in which he has described the key concepts of Responsive web design. Basically, the tutorial is set on the basis of an example with which he described the use of responsive web design practically, he has put an effort to tell what are the media queries and how they contribute in designing a responsive website with the help of HTML5. Other key concept that he mentioned was the use of percentages that is the basis of the RWD.
There are other tutorials too related to adaptation and practical use of Responsive web design in the classical web design for beginners.
Pete LePage, the Google Dev author has comprehensively described that how to orient web designs from the mobile first perspective. The tutorial is divided into sections and sub sections describing the use of media queries with break points and use of view ports to avoid uneven content on websites visited by various small screen and large screen devices.
A great concise tutorial on responsive web design for beginners covering all the necessary topics including the use of HTML5 layouts in responsive design, grids, media queries, mobile-first concept, view ports and proper use of media (images, audio/video) to make it responsive in every possible device.
Before the actual coding, we have to see if our content works on all possible devices. Well, the concept of prototype isn’t new but mainly focuses on how the typography looks on the web page. This includes the overall appearance of the content including the adjustment of content as the device gets smaller and to act so by bringing up the breakpoints to adjust the content where required.
Not everything is perfect and designing a perfect responsive website is just impossible because its a progressive thing and had to adjust with upcoming devices having different sizes. Author has described the 5 pitfalls and their solutions to accommodate the glitches which usually happens while designing a HTML5/CSS3 responsive site.
Bootstrap combined with Dreamweaver CC 2015 will certainly solve almost all the problems of designing with code. An Adobe certified tutorial having an extensive course outline is what would surely help you learn the basics and the advanced techniques to build a responsive web design easily.
Webflow is an online software to create responsive front-end web pages with the help of intuitive UI and numerous options. Blo.io is offering a seamless course on how to use Webflow to create web pages which can be operated both by programmers and non programmers.
1stWebDesigner has a short responsive web design tutorial of 15 minutes in which the author has tried to put on the practical skills to work. Using a simple HTML5 header/footer wireframe, he created a website which is responsive on multiple mobile and desktop platforms. You can also copy the code and experiment it to your needs.
Tuts+ presents a nice easy tutorial describing all the aspects of the need of the responsive layout for websites. I watched the tutorial and I might say, its good enough to learn the basics of the responsive design and use of the media queries to achieve a responsive designs for your websites.
The presenter also stimulates a web page targeting all the key points of designing a responsive website. Its a step by step visual guide to learn the key points of website’s responsiveness.
I personally had attended this course and I found it a professional well designed course on designing responsive websites being practical and engaging. This course is hosted by Edx and Microsoft is the partner institute teaching this phenomenal course.
The whole course carries along with topics like introduction to responsive websites, bootstrap framework and its CSS/Js components and using bootstrap theme to make things easier.
Apart from the text, the thing which makes the web pages more thoughtful, engaging and visually appealing is the use of the images. Jenkov has divided the tutorial into sub sections in which he is discussing about sizing of the images, using responsive CSS classes to adjust the image on multiple devices and use of SVG images to create a seamless auto resizable responsive web page experience for users.
Adobe TV presents the Edge Reflow tutorial, the software which is currently the giant of front-end developing. The tutorial covers the most important topics of building a Responsive Web Design in Edge Reflow including the usage of grids to create a responsive behavior in the web page with the help of certain CSS rules. It also includes the use of intuitive options to support the web page and adjusting the size of fonts and spacing to make it appear even on all sort of devices.
Every successful web design has a strong and stable wireframe in behind but when it comes to designing a responsive website, it requires an extra effort to create a multiple set of wireframes to get an idea of breakpoints and designing accordingly. Here, Balsamiq does the trick. Balsamiq provides a great platform to design responsive mockups for your websites before it goes live on the web. Certainly, this tutorial touches the topics of planning and wireframing to create the exceptional and stable website mockups providing the examples of real world responsive applications.
Did you enjoyed this blog post? I bet you have enjoyed it.. Well, we all are born to learn something new everyday and today is the day to learn responsive web design. Feel free to throw me your experiences with the tutorials and with designing responsive websites for yourself or for your clients. Criticism appreciated!