What is Responsive Web Design (and who cares)?

Click to start your day with a thought or smile.

POST:

We have all gone on websites that are unreadable on a mobile device. Some of the more common problems of unresponsive or mobile sites are:

The font is too small
we had to scroll every direction
images were too small
layout didn’t make sense
Buttons or links are so small they cant be clicked.

Responsive Web Design means designing a website that “responds” to the size of the screen on which the website is viewed so that it looks good, is easily readable, downloads as quickly as possible and navigates with buttons that are easy to use. Prior to responsive web design, either a developer had to create two or more versions of the website (desktop, laptop, cell -profile view and /or landscape view), or the user had to scroll horizontally AND vertically to view a page, making mobile sites extremely un-user-friendly. It’s necessary for today’s websites because a majority of people view websites on mobile devices, and since not all mobile devices are have universally sized viewing windows, modern websites need to adapt. Users expect to be able to use and move through a site as easily on their laptop or cell as they do on a desktop. Responsive web design makes sure that the content is viewable (without a magnifying glass) and has a nice layout on mobile, which is sometimes different even than on the desktop. Certain elements may be removed if they might cause too much data use or take too long to load. The order items are viewed might be rearranged to assure the most important text is seen first, or that the layout of text and images makes sense.

Here is an example of a part of my website homepage in desktop.

Normal transition of this area to mobile would go from top to bottom and left to right. That would make the order image, text, text, image. It would be confusing which text goes with which image.

The mobile view was modified so the content displayed the text for each image coming after that image.

Google penalizes non-responsive sites by giving priority to mobile friendly ones, so not having a responsive web site can have a negative effect on your SEO ranking.

Responsive websites save money because a web developer doesn’t need to create entirely separate websites for different sized devices. The developer still has to spend time to make adjustments to the site, so it scales in a user friendly and intuitive way. Since device creators can’t seem to agree on standard screen sizes for devices, the site has to make the adjustment.

Most sites anymore are responsive to some extent, but it pays to hire a developer who understands making the responsiveness fluid.

One of the only disadvantages of responsive websites is that it’s virtually impossible to have the level of control we once had in the design layout of a site. When I started as a web designer 20 years ago, we designed for the common height and width of a desktop, then translated that design to a pixel perfect website. We had absolute control over the width and height of all elements. A responsive site is relatively proportioned, not absolutely proportioned. In other words, a 1200 pixel wide site was 1200 pixels wide on all screens, with leftover area if the screen was bigger or cut off if it was smaller. Today, if that 1200 pixel site is 100% of the width of the window, it renders as 360 pixels wide on a 360 pixel wide cell, 1260 pixels on a laptop that’s 1260 pixels wide (and 1400 pixels on a 1400 pixel wide laptop), and so on. However, if I have 3 areas across with images, I may not want them to get as little as 120 pixels wide on a cell so I may make them 50% wide on a laptop and 100% wide on a cell so the images are nice and the text is readable.

It has taken adjustment not only for web designers and developers, but also for clients.

I believe an educated client is the best client. In a later post I will explain the term ‘mobile first’.

Today is: Bologna Day

When was the last time you had a bologna sandwich? Mustard or mayo?

Quote for the Day:

“You’re braver than you believe, stronger than you seem, and smarter than you think” –A.A. Milne

Group Name for Today:

A skulk of foxes

Upcoming Days:

Oct 26: Howl at the Moon Day and Night
Oct 27: American Beer Day
Oct 28: National Chocolate Day
Nov 3: Turn Back the Clocks

The Author, Leah Richter

Since 2004, I have been passionately creating websites from the design to the coding, to the content for businesses and organizations. I love web design even more than when I started.

I began with a Master’s Certificate in web design concentrating on coding and graphic design from an accredited online school and have added 20 years of experience and a boat-load of additional courses over the years. I offer my clients education, experience and expertise- and a sense of humor.