CSSConf US 2014

La importancia de las media queries basadas en la altura del dispositivo

Antoine Butler  · 




Extracto de la transcripción automática del vídeo realizada por YouTube.

hi thank you for the intro as she said my name is Antoine Butler and I'm a front-end developer for an advertising agency outside of DC called HD DG we build you know websites and apps for organizations like National Football League Volkswagen and so on

and I'm really excited to be here because I'm on a team of 14 developers who are primarily full-stack they do really crazy javascript stuff node and Python development and I'm one of the few dedicated front-end developers which makes something

like CSS comp really awesome so I'd like to say thank you to everyone for having me and not doing a B track right now instead so thank you so on to while I'm actually here my talk embraced the vertical the future of hi Pia queries when I went around

to my team I kind of asked them if you were here what do you want to know about vertical media queries and how to use my things slipping here and pretty much the consensus was what are vertical media queries and I thought you know what that's a really

good question so maybe I'll backtrack and make sure we're all on the same page as far as what about media query is so apologize if this is a very entry-level introduction to the subject matter so again what is a vertical media query I'm going to

paraphrase the spec because it's entirely too wordy which reads a media query allows you to tailor your layout based on any number of conditions against a media type and those available conditions are of course aspect ratio orientation resolution color

and size and while I'm here is to talk to you guys about size because it's not just the whiff that counts I had to that gift that gives me a moment to breathe so a part of me if I sound ridiculously nervous or if I don't in the Amy because this

is also my first talk ever yeah and luckily I think we're kind of running a little over so I might be able to make this short you can get everyone to lunch long time but I wanted to quote Chris koya from a article I think two years ago where he said measuring

width is a nice practical example of media queries but it's not the only thing available but despite that if you go to any CSS gallery your littered with websites that are responsive based entirely on its width I mean even media queries media query I es

peptides that are responsive almost entirely based on their width so to kind of reiterate what a media query is this this is what we all typically do what we see on the CSS galleries are we running a media query and we're testing against a width size the

max with or men with a vertical media query does the perpendicular I'm just checking against the hike hence the name and brace the vertical so what why does it matter it's that's a good question because I mean if you look we what we all in this

room have done some amazing things using the width as our primary condition but I don't think that's good enough I think there's opportunities for us do some really cool things with our layout based on height so one of the reasons that I don't

think the width is good enough and while height is important is one because content size is variable not intrinsic and by content I mean words not images because of course if we sell I image to be one percent with and we make our with more narrow the image

gets smaller our content our words don't scale I we make our with scenario and the content gets solar another reason is that we increase the scrolling which isn't a bad thing because the fold doesn't exist but it is an opportunity for us to improve

upon the users scrolling experience another reason is device fragmentation and by device I mean any electronic or mechanical device that we use to consume web content so not just handheld tablets but also the laptops and eventual TVs that we will peruse the

internet with and a shameless plug for my wife who is a rabid fan of Wizard of Oz netbooks apples and androids oh my these are the devices that we're talking about not just the handheld stuff that's in our pocket right now also the laptops that or

a desk and yeah so question who here remembers this I think it actually originally was posted around 2010 but they did a another article in 2013 to discuss device fragmentation when this came out I mean there was blog posts left and right about how responsive

web design was destined to fail because it was just too many variables if to me it felt like responses fear-mongering it wasn't like we could just go out and settle the break the breakpoints so I always hated that grab because it was it was overwhelming

you couldn't you couldn't really grasp what needed to happen what I like better was this graphic from the same article which kind of does a better job of explaining what we do because it shows the list amount of widths that we all have to deal with

[ ... ]

Nota: se han omitido las otras 2.438 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.