Luthiery Laboratories

Rather than 'responsive web design', which is a catchy name for something that just doesn't work and never will, this site is designed with what I call Rational Web Design.

What is Rational Web Design? You're looking at it. Here are the basic principles:

• Select a maximum width for the layout, here 1200 pixels. Outside this size, show a decorative background if you want.
• Select a minimum width for the screen, here 320 pixels ( my phone. )
• Select one transition width, here 800 pixels. This will be explained below.
• Select one font size that will work across a reasonable range of screen sizes, here 18 pixels.
• The column split is 70% content / 30% navigation.
• Design all content to resize/flow smoothly from the minimum size to the maximum size.
• Keep it simple - content flows from top to bottom in one big stack with no intervening elements (floats) that might upset things at certain sizes.
• Mobile Last. No website looks good on a phone, why on earth would you make that your primary design criteria?

At the transition width, the design changes from 'large-screen' to 'small-screen':
( But with the recognition that you don't really know anything about the screen size, the best you can do is guess. )

• Layout changes from two columns to one. This maximizes space for content.
• Main navigation moves from the sidebar to a convenient popup. The rest of the sidebar moves to the end of the page.
• Borders become narrower - there is no point in wasting pixels on empty space.
• Spacing in lists increases slightly. Lists tend to be lists of links, and increasing the item spacing makes for easier touch screen use, without upsetting things otherwise.

Rational Web Design has a number of advantages for both the end user and the webmaster:

• Readability is preserved from phones right up to giant monitors.
• Usability is preserved across all sizes. The sidebar is always available on large screens, and for smaller devices, the popup menu can be 'pinned' open so the user can quickly navigate around.
• Design is tremendously simplified by restricting the layout to just two versions and restricting the size of the layout to a manageable range.

If you're on a real computer, try resizing the browser window to see how smoothly this works. The single-column mode works so well, you might actually prefer it. It also works really well on a tablet, and as well as can be hoped on a phone.

The reason Rational Web Design works is that it does not make a lot of highly specific assumptions based on data that is unavailable. Unlike responsive web design, Rational Web Design does not try to adapt to a multitude of different devices when there is no way to detect what device you are actually dealing with. Based on the only reliable piece of data available - window width - Rational Web Design guesses either a "large device" or a "small device". It then adapts to suit, but in subtle and restricted ways, so that if the guess is wrong, the site remains usable.

Apart from the issues of device vs layout, there are a few other points:

• Make the most of available space - no huge blank borders that you could land a 747 on. Everything is fitted together as tightly as possible while maintaining readability and aesthetics.
• Get right to it - don't waste the precious space at the top of the page with useless eye-candy. Branding may be important, but it's not what your user came for.
• For readability, text is maximum contrast - black on white. Testing has shown that for screen-reading, sans-serif fonts work best, while on paper serif fonts work best. This is how writing has worked since the invention of paper clay tablets.
• For usability, all clickable elements - links, buttons, etc - are the same color, here blue. That color is still highly legible and easily discernible from the main text.
• The color palette is restricted to just a few shades - avoid the "every crayon in the box" look. Color and decoration come from the content itself - images presented as large as possible.
• Above all else, there is consistency - fonts, colors, spacing between elements, etc, are all standardized across the entire page and the entire site. This has the added benefit of compacting the css code to about one tenth the size of a typical WordPress theme.

So take that Gargle, and hire some real web designers.