10 Useful Libraries and Resources for Responsive Web Design

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning!

Basics

Let’s start with these articles which explain the basic ideas of responsiveness.

 1. Make it Responsive

 Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.

                                                   Make it Responsive

 2. MDN’s Responsive Web design Tutorial

 This is a nice MDN article about some of the basic strategies people use to achieve responsiveness, such as liquid or fluid layouts, media queries and fluid images. They have also highlighted useful links to external resources on responsive web design.



                                            MDN’s Responsive Web design Tutorial
3. 5 Really Useful Responsive Web Design Patterns

 DesignShack’s awesome article features lots of example patterns which can help you plan your own page layout. Some of the examples are really simple and others provide more imaginative ideas on how to arrange HTML elements.

                                                  5 Really Useful Responsive Web Design Patterns

 4. Responsive Web Design Tutorial

 Shayhowe presents an excellent series of lessons on web design. One of them teaches you how to make any page mobile-friendly. They start from the foundation of responsiveness and move up to different ways of making any page perfectly viewable in different screen sizes.

                                                       Responsive Web Design Tutorial

 5. 9 Basic Principles of Responsive Web Design

 Froont made this strange article that shows us the difference between divergent strategies used in making responsive web apps. They get bonus points for using cool animations to present the advantages of each technique. This is a very fun way to learn new things.

                                             9 Basic Principles of Responsive Web Design
6. A List Apart’s Responsive Web Design Tutorial

 An in-depth article on responsive design that covers topics such as fluid design and media queries. You’ll find something to learn in this great resource whether you are new to web developing mobile-friendly apps or you’ve already done a few responsive projects.

                                             A List Apart’s Responsive Web Design Tutorial

 7. Responsive design in 3 steps

 This tutorial is intended to show you the basics of responsive design. It’s short and focuses only on the most important aspects. It features a helpful section on the viewport meta tag so that your sites can fit on screens perfectly.

                                                        Responsive design in 3 steps

 8. Interface Sketch

 This is not a guide, but is useful nonetheless. This is a collection of free sketch templates for web, mobile and tablet platforms. The templates are in PDF and contain multiple pages and layouts. Simply download a template, print out the pages you need and start sketching your next responsive design.
                                                       
                                                             Interface Sketch

CSS frameworks

Writing responsive CSS by hand takes a lot of experience and most times you will be better off by using a framework. Here is a list of some of the best.

 9. Ink

 Quickly create responsive HTML emails that work on any device & client. Even Outlook. Email anywhere. On any device. How HTML email was meant to be read.

                                                                  Ink

 10. Skeleton

 Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, from desktop to mobile. This framework consists of a base html page that includes the necessary initial markup, some stylesheets which can help you with styling your page and an included icon-set.


Conclusion

We hope that you find all these responsive plugins and resources useful! They will give you a great start into responsive design, and a lot of tools for creating your next awesome design.
Location: Bengaluru, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles with 2 pseudo-elements — :before and :a
Read more

The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u
Read more