What Is It?
Responsive web design is basically a way in which you can design and develop a website and have the same viewing experience across all desktop and mobile devices.
Why Should You Care?
In the past, web designers & developers created only static websites in which the most optimal viewing experience was on the desktop. When smartphones came along, a separate mobile website was created based off the desktop version that was more mobile friendly. With responsive design, you’re able to do both at the same time with the end goal being to have a website that will function properly on all devices and most of all; to save you precious time.
How Can I Get Started?
So how do you begin making your next web project responsive?
Before you even begin any kind of coding or design you must understand the basics on how it works. In this post I will outline some concepts you will need to know before you start.
Key Concepts
A Mobile-first Approach – Smartphones are very popular these days. Chances are most people you know have one. Since more people are using their phone to surf the web, it’s a no-brainer to design and develop for mobile first. While there is no standard “right” way of designing for responsive, taking a mobile-first approach will definitely make your life easier in the long run.
Understanding The Grid – Using a column grid system is a common practice in every day design and layout, you can also apply these principals to responsive web design as well.
Nested Columns – This is where things start to get interesting. The basic idea is, for example, you’re working with a 12 column grid with 1 row that spans all 12 columns (figure 1). Now you want to place content inside this row. You first need to figure out how many columns each item takes up and they have to equal to 12. Lets say you have a headline that takes up 4 columns, then the next item, lets use paragraph text, has to be less than or equal to 8 (figure 2). Let see it work in html code:
Fig. 1
Fig. 2
The end result will be that your headline text will span all 4 columns and your paragraph text will span 8 columns equaling to 12 columns. You can even make layers upon layers of nested columns if you really wanted to, however, thats not recommended.
Media Queries – A new feature in CSS3, a media query lets you specify how content will show on a specified device by setting certain conditions like screen resolutions and is essentially the foundation of responsive web design. The usage of media queries basically differentiates how a website looks like between an iPhone and Galaxy S4.
Frameworks – To speed up your development process, you can download various freeware development frameworks depending on your needs. Some popular frameworks are ZURB Foundation and Bootstrap. These frameworks come with readymade and customizable style sheets as well as various Javascript libraries.
Whats Next?
Now that you know the basics, I hope you have a better understanding of what responsive web design entails. Next time I will provide a more in-depth explanation on what these concepts are and how to apply them.
