– Responsive design means
making your site flexible. Flexible so that whatever
it looks like on the web also looks pretty good
on the iPad, iPhone, and really, any device. So here you can see we have this site. It looks pretty good on the web, and these are the smaller versions of it, and it also looks pretty
good on the iPhone. One way to test if your site
or any site is responsive is just by opening it up in the browser and then doing this. (mimicking creaking) Making it smaller, right? And you can see how it would look at each of these different sizes. The smallest I can make it here, which is pretty much the iPhone style, you can see it looks pretty great.
So, what does a not
responsive website look like? Let's check out the New York Times. With the New York Times here, you can see that when I do our test and I pull it in and make it smaller, see how it kinda cuts off over here? This text isn't wrapping around
as nice as it was before. The one language that really
makes responsive happen is CSS. It's this media query,
this @media bit that says if your website screen is about 768, then make the width of
the site to match that.
If the screen is 992, make
the width to match that, et cetera, et cetera. And you may have one, two, three, or a hundred of these on your project, it kinda depends on the
size of the project. You could always add responsive later on, but it's gonna be a lot more effective to do it in the beginning. And luckily, there's some great frameworks or really free code out there that you can use or your
developers can use for free. The two that come to mind
are Twitter Bootstrap, or Bootstrap as they just call it now, and Zurb Foundation. These two frameworks are basically like a free grid of code that you
can build your site on top of and they get about 80%
of the responsiveness just right out the box, it's awesome. So remember, responsive
design is writing code once to make your website
look awesome everywhere.
(chill electronic music).