An Approach to Making a Website Responsive

How shall it look?

That's the question that needs to be answered for various screen dimensions before determining a responsive site technique and coding the project.

Deciding on technique first can restrict the design of the website. Therefore, appearance first. After that, determine a technique that accommodates the desired appearance.

There are many computers and devices and screen dimensions in use and the future will bring even more.

There are no standard screen sizes. There are no standard aspect ratios manufacturers stick to. Each computer and device manufacturer decides the dimensions their machines will have.

It may be impractical to design a website that will present your site professionally in every current screen size, much less any future screen size. But a range can be determined within which the website will look good.

The first decision to be made is the width dimensions of the smallest and the largest screen sizes your website will be designed for. Whatever is decided, the website needs to look professional when displayed in dimensions between the two extremes.

The basic design for the web pages will need to be established before the responsive site can be built. Rather, before it can be built without having to return to change things as the design evolves.

By "basic design" I mean positioning of elements. Where the logo will be placed, the navigation, the ads or notices, the content itself, and so forth. Also the basic design of the header and footer.

Where to start?

If you already have a design you're satisfied with, that's the obvious place to start. Revamp the design as needed to look good at the widest and narrowest screen widths you previously decided on.

Otherwise, start with the narrowest screen your site is being designed for so your web pages look good there. Then design for the widest screen.

It is necessary to make designs for one or two mid-width screens when neither the wide screen design nor the small screen design look good in widths between those two extremes.

It would be prudent to design for a mid-width screen even if it isn't necessary. Designing for a mid-width can provide valuable insight for determining at which width the design switch shall occur.

When a basic design is ready for each width that will have its own design, determine the widths where the design switches shall occur.

The points where the design switches are the widths where the elements no longer fit comfortably on the screen, but the design for the other width does. If necessary, make a design for an intermediate width.

You now have website designs for the various screen widths and know where designs will switch from one to another. This puts you in a good position to make an informed decision about which responsive site technique to pursue.

(This article first appeared in Possibilities ezine.)

Will Bontrager