What is responsive design?
Responsive design is the practice of making a website respond to the width of the user’s viewport (window size) and adapt accordingly. In it’s early stage (5 years ago) it was also sometimes called ” adaptive” design, though usage of that term has pretty much disappeared.
Responsive design really only started manifesting when smartphones started to become popular. Sure, the idea had existed in some state for a while, developers had to accommodate for users with different sized monitors, but that was mostly dealt with by making your website as narrow as the lowest resolution monitor that would be viewing it. So for quite a few years the sweet spot for the width of a website ranged from 900-960 pixels. This way users on monitors with a 1024 x 768 resolution (the lowest common monitor resolution) would be able to see the whole site.
Why do we need responsive web design?
Now I don’t know what the resolution of your monitor is (I could take a pretty educated guess those thanks to the website analytics we have) but I’m going to guess that it’s a little better than 1024 x 768. Actually, according to our analytics, about 8-10% of you have a resolution of 1024 x 768 or lower. So if we make a site that caters specifically to those users, 90% of you are going to have a lot of unused real estate on your screen.
Now me personally, I have 3 monitors, one at 1440 x 900, one at 1920 x 1080, and one at 2560 x 1440 (it’s ok to be jealous of this last one). If I visit a website that’s 900 pixels wide there’s going to be anywhere from 540 to 1660 pixels of empty space on the sides of that site. So why don’t we do something with that? That’s where responsive design comes in.
On the other end of screen resolution we have tablets and phones:
- iPhone 5: 1136 x 640
- iPhone 6: 1334×750
- iPhone 6+, Samsung Galaxy s5, HTC One: 1920 x 1080
- LG G3: 1440 x 2560
- iPad Air: 2048 x 1536
- Nexus 7: 1920 x 1200
- Kindle Fire HDX 8.9″: 2560 x 1600
- Microsoft Surface 3: 2160 x 1440
Wait, what? Those resolutions don’t seem that low… That’s where things get a bit complicated. See, if I served the same website to a phone with a 1920 x 1080 display as I served to a desktop with a 1920 x 1080 display it would be unreadable. So your phone actually does some scaling to make up for that fact. The iPhone 5’s scaled web resolution is actually 320 x 568. Most tablets size down to about 1024 x 768. There’s a great guide to the resolution of iPhones here.
To make a separate mobile site or not?
Some people get around the responsive issue by redirecting users to a completely separate site when they’re on a mobile device. From a user experience stand-point this is pretty atrocious. These sites often have no resemblance whatsoever to the main site and are often stripped of many features. I’ve seen very few good examples of mobile dedicated sites. It just makes more sense to make your site responsive.
