Responsive Website Design: Terms to Know

You can’t help but have heard of “responsive website design.” These sites offer users a consistent and pleasing experience, no matter what type of device they are using. So, for instance, if I’m using my smartphone to look at product information, the site will look and feel the same when I switch to my tablet to purchase. Simple enough concept, right? That’s where simple ends though! Designing a responsive website is a process, and it can be intimidating for non-designers. Here is a quick look at some of the terminology you should know before you delve into RWD.

Whether you are going to build your own responsive website or hire a designer, it’s always helpful to know what you’re talking about! (We’ll also practice some content curation by giving you helpful links so you can learn more or see examples.) Here are some keywords that you want to learn:

• CSS3. This is a language that controls the layout and style of webpages. It literally adds color and life (in the form of stylistic elements) to your website.
• Media Queries. In CSS3, media queries allow you to present content, whether a video or text or images, to a specified range of devices without having to change the content. The media queries can look for things like width and height of the browser window and of the device, the orientation, and the resolution. If it detects, for instance, that someone has a smartphone, it can respond with a specific layout. It will “re-architect” the content to suit the screen.
• Fluid Grid.  RWD creator Ethan Marcotte said that responsive design has three components: a fluid grid, fluid media, and media queries. Screens range from tiny mobiles to 30-inch desktops, and sites have to respond optimally on those, and any in between. A grid is divided into a number of columns, and then each element is designed with proportional widths and heights. Regardless of the device, the elements adjust their widths and heights proportionately, again, staying within the dimensions of the parent container – meaning it won’t go too small or too big.

Tutorials can help us understand these terms better and see how they work within the structure of the responsive website. Here are a few to get you started:

• Hongkiat.com. A one-stop shop for tutorials ranging from introductions to RWD to advanced tips.
• ResponsiveWebDesignBlog. This blog has everything from tutorials to examples to book suggestions for the RWD nerd, or those who aspire to be RWD nerds.
• SmashingMagazine. Tips for a better responsive website.
• NetMagazine. This link has a Q&A with Ethan Marcotte. Get answers from the horse’s mouth.