What is a Responsive Website?
A responsive website, simply put, is a website that looks great no matter what device you’re viewing it on.
Responsive websites are now a requirement, as important as the website itself. Devices such as a desktop or laptop computer, any sized tablet, or any type of phone - your website should look great regardless of operating oystem, browser, browser version, or the brand of device.
How do you make a website responsive?
To make a website responsive, there must be what are called “break points”, or specific situations that change the way the website appears. Break points are typically based on resolution, which is the size of the screen the website is being viewed on. By default, I design using a single break point. This means that you’re either viewing it on a full sized screen like a laptop or desktop, or you aren’t and it show’s the mobile version. The single break point happens when you view the website on anything smaller than these screens, which is to say any device smaller than your smallest laptop screen.
Designing for EVERY device resolution is a grand undertaking, but essentially a waste of time…
At least in my opinion. There are so many possibilities that unless you want to spend thousands of dollars on a developer to make every possible variation, you should focus on two or three breakpoints maximum. Like I mentioned before, by default I only use design for a single break point at 768px or 48em depending on how you develop, and that works fine for most of my clients. Some like 2 or 3 breakpoints, so I build accordingly, and I bill accordingly. After all, there’s a lot of testing involved, and you’re essentially designing 2,3 or 4 layouts versus the good ol’ days where you’d just design one. Designers & Developers – What are your thoughts on responsive designing, how many breakpoints do you think should be standard, and what are the resolutions you typically design for?