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.
When the screen size decreases, content uses more vertical space, causing anything beneath it to be pushed down. This is called the flow.
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.
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.
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.