Responsive Web Design

You might have heard the term responsive web design. It is generally associated with designing to give an optimal user experience on all devices.

Since more people may be viewing your website on tablets, smartphones (or just feature phones), and large TV screens than are looking at it on the more traditional computer and laptop screens, it has become incumbent on designers to learn responsive web design.

It is something that anyone who is involved in the process of creating websites should know something about. That means more than just developers and coders. Marketers, social media workers, UX (user experience) and UI (user interaction) designers all need to understand how a site works on other screens and with their users.

Of course, it is more than screen size, but also about improving the user experience based on how we use devices and maximizing their capabilities. If your website can be viewed in a vertical and horizontal format, how can you maximize that?  What does a touchscreen or a retina display allow you to do? Or, on the bad side, if you do not design with all of that in mind, how bad will your site look on other screens?

All this means that you start with content strategy before creating a visual design. (It turns out most designers start with the default design being for the narrowest screens.) A lot of this is still using HTML elements and CSS properties, plus media queries to display different CSS styles based on a device’s viewport width. And you need to rethink all the "old" design elements like images, typography, and navigation.

I also like to think of responsive design as meaning that the designer responds to the needs of the client and their users. That is an area that takes more than tech skills. It seems a bit insulting to call those "soft skills" but sometimes they are viewed as softer than than the hard coding types pf skills.

Designers use performance optimization techniques to make sites lighter and faster, especially on mobile browsers. The answer is not to design two websites – one for mobile and one for larger displays - but to have the site know what type of device is being used and adjust automatically.

I'm no pro at this and I am still learning responsive web design. and how to think outside the desktop box. As with many things in technology, we all need to be, like these new designs, flexible and wanting to deliver the best experience to our users no matter who they are and how they interact with us. That is why you will also hear about having a  responsive design "workflow."

I made this demo site in Blogger using a responsive web template and it is getting easier and easier for people to build website (including responsive ones) using WYSIWYG tools like Blogger or Wordpress without knowing much about HTML, CSS, or responsive design. But it definitely helps to know some of that. 

There are plenty of templates for sites like a portfolio site to showcase your work that includes the ability to display an image carousel and that automatically adjusts according to the device. If you resize your browser window or switch devices, you can see how that template responds.

Want to learn some responsive design on your own?  Try these two titles (click covers for info).