![]() So you’ll often hear people referring to screen width in responsive design when they really mean viewport width. For mobile devices, the viewport width is essentially the same thing as the screen width, since you can’t have a non- full-size browser window like you can on your computer. That is more or less the same thing as the width of your browser, which is why we can resize our browser window to demonstrate responsive design. In responsive design, what we’re generally going to be querying is the viewport width. That sounds pretty straightforward, right? That’s a media query. If the time is not 12:00, then don’t eat lunch. If those letters look too much like algebra, I can give you an example: If the time is 12:00, eat lunch. And even if you’re not a programmer, the concept is simple:ĭo Y. It’s just an if-then statement, if any of you are programmers. It’s actually pretty simple how a media query works. This is the magic part of responsive design. Media Queries The third part of responsive design is media queries. The columns all stayed the exact same width, so although the empty margins gave us some room to maneuver, after those were gone, the browser had no choice but to chop off the right side of the page. It’s also a newspaper, also with three columns. That’s because everything is measured in percent instead of pixels. Note that the columns have each decreased in width in proportion to the site. This is the site at about 1280 pixels wide. Media Queries The first two, the flexible grid and flexible images/media are pretty easy to explain. Media Queries There are three parts to responsive design. Making your browser window very narrow (about 300 pixels) will give you a decent idea of what a website looks like on a mobile phone, but not entirely. But what we’re really talking about is the difference in how a site looks from one device to the next - such as a mobile phone, a tablet, a laptop, or a desktop computer. Just an easy way to see the changes all at once. The text stays the same size, but the content rearranges from three columns to two and then one column as the browser window gets narrower. Site in your browser and then make the browser window narrower and wider - see what happens. Instead of making the website really tiny so it fits, the browser is able to keep the content a normal size regardless of what size your screen is, and then it just kind of rearranges everything so it fits on the screen in a way that makes sense and takes advantage of the available space. Responsive Web Design Responsive design.(yes, a lot of sites are still like this) If you made the text big enough to read, you couldn’t even see the whole line of text at once. They were very, very tiny, and you had to zoom in and out to read anything. The rest of you can just click forward a few slides. But for those of you who need a little background, I’m going to explain reaaaaally quickly what responsive design is. If you’ve been doing some responsive design, or at least know what it is pretty well, this presentation is going to tell you about some tools and resources that will make it easier for you to build responsive sites. Not an introduction to responsive web design. You playing along at home! Almost as good as being there.* Patterns Preprocessors Responsive Images Responsive Data Tables Polyfills World Tools & Resources to Make Responsive Design Easier Cleveland Web Standards Association OctoClarissa Peterson What We’ll Cover: Frameworks Navigation ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |