@istitch

It's Not a *Page*

Different outputs on different devices with the same code? Yup. We're no longer required to create multiple designs for multiple devices. Instead, devices interpret layouts in different ways, depending on the context in which the information is viewed. Separate mobile websites are a thing of the past.

For too long, web design has been an extension of print design, hence antiquated terms we use every day such as ‘web page.’ Until recently, designs started off with constrained proportions, with the designer laying out a page, as though it was going to be printed and cut to a particular size. For the web, that’s the wrong approach. Designs should melt into whatever format is best for the device on which they are viewed. It should be thought of as a moldable cluster of information, with variables and tolerances built to mesh with different formats and devices. Techniques used to make a site responsive will help you achieve this.

So, WTH does responsive mean?

A responsive web page contains code that specifies layout elements to turn items on and off, depending on the size of the window in which the page is being viewed. Each particular point in the width of a layout that triggers a change in what's being displayed is called a breakpoint. For example, if you wanted to remove an element when viewed on a mobile device, you could set a breakpoint to a width of 480px, so that any window above 480px wide will display the item. Anything below 480px will not. Many developers set up breakpoints to correspond to the screen sizes of the most popular devices.

Get jiggy, but not too jiggy...

Just pick one break point, such as the 580px, and go with it

The trick with responsive design is to keep it simple. I'd say, 1 or 2 breakpoints tops. For example at the largest size, all of the elements on the page show up like any other page, with items arranged in columns on a grid. When the window is re-sized below a certain point, like let's say, below 580px wide, all of the elements stack up and down, and buttons become larger, so if someone is looking at the page on a cell phone, it would be easier for them to read and interact with the content on the page. I've noticed that many of the layout frameworks out there contain multiple breakpoints for different devices and versions. I say that's too complicated. Just pick one break point, such as the 580px, and go with it. It's much simpler and cleaner that way. If you're above this threshold, show the whole layout, otherwise stack everything.

Line your layout with Sass

One of the ways you can efficiently develop layouts like this is to use a CSS grid system. One of my projects, Lining for Layout is made with SCSS, so you can customize the grid for whatever you need. It works for liquid or fixed width layouts and can also be made responsive by nesting the css inside of media queries, set at certain breakpoints. Whenever I have a choice, I use lining to develop modular, responsive layouts.