One Website, All Devices

A responsive website is a necessity in today's market. Google has discovered that close to 60% of consumers visit a company's mobile site during the buying cycle. Without an effective and user friendly mobile site, you are undoubtedly missing customers. Your audience in on mobile so you need to make sure you are in the game too. 

Confused about what a responsive website even means? It is defined as a website that is designed to respond to whatever device someone is using, be it mobile, tablet, or desktop.

These key points illustrated with GIFs will lay it out in layman's terms. 

 

Responsive vs. Adaptive

Responsive sites moves fluidly between screen sizes while adaptive sites will hitch as the browser expands.

 

Relative vs. Static Units

Using relative units will ensure your site doesn't look weird as screen sizes shift.

 

Flow

When the screen size decreases, content uses more vertical space, causing anything beneath it to be pushed down. This is called the flow. 

 

Breakpoints

With a breakpoint, the layout is able to change at predefined points. Such as, 3 columns on a desktop, but only 1 column on mobile devices. 

 

Max/Min Values

Having content take up the full width of a screen may look good on a mobile device, but on a large desktop, it might not make visual sense. Min/max values can be adjusted to prevent content from spanning the width of a much large device.

 

Nested objects

Wrapping elements in a container keeps it tidy and easy to understand. This is especially useful for content that won't be scaled, like your logo.

 

Desktop or Mobile First

By starting with mobile first, added limitations can help inform better decisions through the rest of the web building process.

 

Bitmap Images vs. Vectors

Detailed icons with fancy effects are best formatted as a bitmap. However, vector images adapt better to different resolutions, so opt for this option if your element isn't super detailed.