If You're Responsive And You Know It, Fit To Frame
Kickoff · Lesson 4 ·
In this lesson, we take a look at what responsive web design actually looks like - and what it doesn't. You'll learn why it's important to adjust content and functionality for different platform views, and also the value of looking at cute dogs.
So what do we mean when we talk about responsive web design? It means filling 100% of the browser view in a way that 1. looks good, 2. adjusts in order to respond (see what we did there?) to the needs of different platforms.
So for instance, this site (see image below) looks the same on each platform, but if you look at the difference between the phone, the tablet, and the desktop, the image size and functionality changes based on the size of the view. A+
Some very responsive sites to browse for inspiration are Pack, Smashing Magazine, and Mashable.
You can also find a fantastic list of more responsive websites here.
But what happens if you don't account for those adjustments? All kinds of chaos, is the answer. Buttons may be too small for someone to press on a phone; images may appear too small or too blown out; headers can disappear; whatever you're looking, in general, doesn't look like it quite fits. This is what you'll learn to avoid.
For sites that are responsive-ish, but have some issues, check out Whole Foods and Worry Dream.
And for an example of a non-responsive site, look no further than Resting Bitch Face.