Responsive Web Design: Are You Ready?

Code for web design

“Responsive web design” is a phrase used as a technology buzzword. It usually refers to a website that degrades well on small-resolution viewports. In today’s article, I will cover what responsive web design is, why you should use it, and how you can implement it in your current website.

What is responsive web design?

Responsive design is a design approach that optimally displays websites on a variety of screen sizes. It enables websites to display differently for each device (e.g. smartphones, tablets, and computers). This approach eliminates the need to create a separate, “mobile-friendly” version of your website and, ideally, keeps you from making the same change in two or more instances of your website. To view responsive web designs in action, simply adjust the width of your browser on websites that use this design technique.

Some examples of websites that have incorporated a responsive design layout are:
https://212mediastudios.com/
http://www.disney.com/
http://www.gumbyframework.com/
http://www.bostonglobe.com/
http://www.css-tricks.com/

Why use responsive web design?

Using responsive design saves you time as a developer and designer by allowing you to develop one site to fit the viewports of your smartphone, tablet, and desktop users. But that’s not the main reason to implement a responsive design. The biggest advantage is delivering a product that’s usable and looks great across all the devices that access your website. Building a great experience for your viewers helps ensure their satisfaction, encouraging them to return to your site.

How do you use responsive web design?

At the most basic level, implementing responsive design is done through media queries in your Cascading Style Sheets (CSS). Media queries in your CSS allow you to target specific blocks of CSS toward certain media, or attributes of particular media. For example, you can set the min-width attribute to 1024px for a viewport that applies a block of CSS to the page’s mark-up—if the screen resolution is at least (hence min-width) the specified unit amount.

It is also possible to use multiple selectors to target a more specific type of media/viewport. For example, the following media query targets a media type of “tv” with a minimum width of 1080px:


	@media tv and (min-width: 1080px) {

		#watch-now {
			display: block;
		}

	}

Conclusion

Responsive web design is still just getting its start, working its way into sites around the web. But I expect this design technique to become more and more prevalent across the internet. Using responsive web design saves time developing and delivers a better user experience that’s tailored for each device. The sooner your website becomes responsive, the better!

tmelvin-thumb
Thomas Melvin
Back-End Developer
Learn More about Thomas!

About 212 Media Studios

212 Media Studios is a full service marketing agency, based in Warsaw, IN. Providing services such as SEO, social media management, print marketing, branding, and videography, 212 Media Studios specializes in helping businesses of all sizes catapult their marketing and brand awareness to the next level. To learn more about 212 Media Studios’ services visit our services page or contact us with special requests or for more information.