The fact that web design is a field that keeps on changing everyday means that as a designer you need to keep yourself abreast with the changes. You cannot design a mobile focused design the same way you have been creating websites for years. You can’t. Old methods cause problems when your aim is to produce responsive designs. Learning new trends, however, will help you harness your relevance in the web design market.
This article is meant to sharpen your skills in creating responsive web pages. It is a list of 10 online tutorials that will go a long way in nurturing your skills. It’s not comprehensive, but it will get you started just fine.
1. Beginners Guide to Responsive Web Design
Whether you are new to web design or a professional who has been around for a while, creating responsive web design can be confusing. This is because of the profound thinking that is required. Creating responsive web design is no longer a wave that is expected to pass. Nor is it a technique that will get a chapter in our history books. The fact is, it increasingly is growing into a standard practice.
This tutorial is meant to give you a clear understanding of what responsive web design is and how to go about it. It will teach you about media queries, fluid grids etc. View the tutorial here.
2. Techniques for Gracefully Degrading Media Queries
As you know, media queries is a CSS3 module that allows content rendering to adapt to conditions such as screen resolution. Without Media Queries fluid layouts would hassle to adapt to the large number of screen sizes out there. Fluid layouts can appear narrow and unreadable on small devices and enormous on large screens. Media Queries enable your design to adapt to typography.
On top of this, CSS3 media Queries are supported by most modern web browsers. For those that don’t support, this tutorial will show you how address this problem. Read on CSS3 Media Queries.
3. Responsive Design in 3 steps
As a designer, this tutorial is meant to show you the basics of responsive web design. It focuses on:
- Meta tag – The author of the tutorial goes into detail to show you how to make use of the viewport tag to adjust the data on different screen sizes.
- Html structure – Here, the author lightly touches on the html structure.
- Media queries – so far, media queries have been popping up everywhere on this article. This tutorial will also show you how to render pages for specified viewport width.
You can checkout the tutorial here.
4. Turn your Website into A Responsive Design
In the past, designers targeted one medium, computer screens. As a result, their websites displayed horribly in devices of a smaller screen size. In the recent years, an array of devices that make use of the internet have cropped up. This means, your design needs to put these devices into consideration.
This tutorial is a guide on the dos and don’ts when building a website. The author outlines why some features are not responsive and the formula to work with modules. Checkout this tutorial for more information on designing for a responsive web design.
5. CSS Effect: Space Images Out to Match Text Height
As the title suggests, this tutorial focuses on the text and images on a webpage. It explains how to make fixed-width images change their spacing in order to stay aligned with the accompanying text.
The author uses illustration and code to show you how to keep your page flexible and have the design balanced on screens and fonts of different sizes. Check the tutorial.
6. CSS: Elastic Videos
Are you in the habit of incorporating videos and animations in your web pages? Are the videos giving you problems when you change the screen size?
This tutorial will teach you how to use CSS to make your videos elastic (resizable). The tutorial is short and to the point. How to achieve elastic videos.
7. Converting A Menu to A Dropdown for Smaller Screens
Have you ever wondered how to turn your horizontal menu to a dropdown when the screen size narrows? I mean, isn’t it much easier to have tabs instead of tiny links. It surely will make things easier.
This tutorial shows you how to make menus that are horizontal on big screens while on smaller screens, the menu changes to a dropdown. Convert menu to dropdown.
8. Fluid Grid
Do you want to know how to create a website that has a fluid design and can technically fit on the browser of any device? This tutorial will help you achieve that Fluid grids.
Incorporating Grids in your website, will help you build responsive web pages that will work perfectly on all of your users’ devices.
9. Responsive Web Design Techniques, Tools and Design Strategies
This tutorial is an all-inclusive arsenal that focuses on the tools techniques and articles all geared towards equipping you with the skills you need to create your own responsive designs.
It goes a notch higher, to touch on ways to make a responsive design for your Email. Checkout the tutorial.
10. Adapting to Input
All along, we have been talking about making the display responsive lest we forget the importance of having a functional input design. What do I mean by functional input design? Your webpage should be good at accepting input in a world where phones have keyboards and some desktops have a touchscreen.
This Tutorial, weighs deeply on this issue and is guaranteed to give you top notch advice on this. Adapting To Input.
Parting shot
The above 10 tutorials, which have been carefully selected, bring us to the end of this article. We hope that the tools, themes and other resourceful ideas shared in this article will help you grow your responsive design skills.
