Hello,
I'm Mervi Eskelinen!
An artist, nerd and sorcerer, dedicated to make world softer and better for everyone, and to get you to make more art. Make art, change the world!
What is… Responsive Web Design
Responsive is a word you hear now pretty much every time someone talks about web design. Some people slightly mislabel it as mobile responsive. Either way, responsive websites are here and with the current technology they are the way to go. Responsive websites have been here for a long while, previously as fluid width designs. After the media queries were introduced in CSS3 around 2008/2009, the term Responsive Web Design (RWD) was coined.
In basics, responsive websites respond to screen/browser size/resolution, and possibly screen orientation. So if you are accessing a responsive website with a smartphone the browser you are using checks if the stylesheet of the site include definitions which comply with the smartphone's screen size, orientation and other possible features. In responsive web design the emphasis is in the device screen (or browser) size and orientation.
Responsive website is created mainly with using fluid grids (for example percentage sized over fixed pixel sizes), flexible image sizes and CSS3 media queries. In addition to that a responsive site usually includes a HTML5 viewport meta tag, which tells your browser to fit the content of the site to the size of the screen. A responsive website can be enhanced with JavaScript snippets. Purists steer completely away from JS. Today an increasing amount of people are disabling JavaScript from their browsers so relying solely on JS in serving your content is a bad idea.
A mobile site is usually a separate site which is served when the site is accessed with a mobile device. A purely responsive website doesn't really care which device is being used to access it. Thus an often used term, "mobile responsive", is mislabeling a responsive website. It's time to get a new web designer and developer, if your current one calls a responsive website "mobile responsive". A good responsive website takes different desktop and laptop screen sizes into account, not only mobile screen sizes. For example, if you are accessing my site with a desktop or laptop device you can resize the browser window to see how the site responds the changes.
When well done, a responsive design helps your website audience to get a better user experience with your site. It can also help with your SEO efforts, especially since Google has increased the visibility of mobile friendly sites on mobile search. It's also the way Google recommends you make your website mobile friendly, over separate mobile sites. Badly done a responsive design can be distracting and break your site for your mobile audience. One of the many common mistakes on responsive sites is using too small font sizes.
My best tip when creating a responsive website or turning your old site responsive is to simplify the underlying structure of the site. Drop off the extra elements and unused sidebars. I also urge not to think responsive web design as an add-on or a feature but as the essence of the site.
What is... is a series of short overviews of web (and, more widely, Internet) related terminology and phenomenons.
This is a reader supported blog without paywalls and advertisement. If you appreciate my work and want to help me rewild the internet, please consider becoming a free or paid patron today. I can't do this without the support of readers like you. So if you can to contribute financially, I would really appreciate your help.
