Presentación
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
organised awesome what performance me up which I where she's going to say anyway but yeah resource of you guys get a chance if you're in the area check out performance and hey all right thanks for coming before we get started I want to recommend joined
in you guys haven't been reading talks go in there and put some feedback in there I know all the speakers really appreciate hearing how the talks have been going so after this talk of you this one if you're my talk yesterday check out that one as well
all the slides and links are available right now at this short URL you can find them you don't have to take pictures of the slides or anything you can just find all the links available right away so messy stats you may've seen these yesterday they're
the same ones we run a handmade marketplace we get about one and a half billion page views per month we did about 1 billion dollars in sales last year and we have over a million lines of PHP so that's kind of the stack that we're building and trying
to work on in scale to meet our customers demand so why are responsive web design you may have heard this stuff in the past but it has a few main advantages in my opinion the first is maintainability I think this is one of the big ones at Etsy we actually
have a mobile site we have separate mobile templates or moving over to a responsive set of templates when you have these separate mobile and desktop templates it's much much harder to maintain you have to update things in two places it becomes a huge pain
in the butt so the idea behind responsive web design is to avoid that problem have everything all your markup in the same file as a result it also has an SEO impact because Google penalized is duplicate content if you have a mobile site on m dot and a normal
site that's a duplicate version of your content and that's going to hurt you in search ranking so by having all of your content of the same domain with the same set of markup that's going to improve your SEO and then of course it's a big user
experience benefit by having responsive site it works across any device it's going to look good no matter what and that's better for the user and finally performance if you do responsive web design correctly it can perform better than a mobile site
and on talked about that with this slide here so how many of you know what a waterfall chart has ever seen one of these before okay this is essentially a look at how the execution of a page happens this is for dell com might be a little hard to read the labels
up there but those yellow lines of the topper redirects so if you don't go to a browser and type in delcom you get a 301 redirect to double calm and then it says oh crap your mobilization let's redirect you again 2 m.com this is what happens right
now if you pull up dell and your mobile phone and go to calm this takes a lot of time by the time that first redirect is done over here you've already spent I think it's about half a second there and then by the time the actual HTML you care about
is downloaded that's 1.6 seconds so you're already wasting over a second and a half just to get to the actual page you care about and redirects so by having a responsive site that's being served off the same domain as your desktop site you can
skip all those redirects and give the content user directly in today's presentation want to make two assertions the first is that response to web design is not that hard and the second is that it can be fast if you do it correctly let's cover the basics
of responsive web design the building blocks are media queries so you can see at the top there this is a very sort of typical vanilla media query you just say media screen and min-width and this is 56.25 ems the comment above this is basically saying apply
this to anything that's greater than 900 pixels wide and we use ems because their relative units and they scale better and people change font size and do that sort of thing by having relative units the second line down that's a Retina Display targeting
it's your base is saying apply this to a device where the min pics min device pixel ratio is to just apply to retina iPads iPhones etc and then you can chain them together so you can have a min width of EMS and a min device pixel ratio of two so you can
apply this to you can change the two media queries together now why min with there's two options here you can say min with or you can say max width I prefer going with min with because this means you're sort of starting small you start with a browser
or sorry I mobile style site so it's a smaller it's targeting a smaller screen and then it applies up to a certain minimum width and you add a breakpoint so this is like saying when it says min with 56.25 e.m this is saying apply to anything greater
than this size so you start with a small one you add a breakpoint and then that applies to anything larger than that given size yesterday we heard a lot of stats about mobile devices and how many there are and how they're going to exceed then there are
people in the world very soon but I think a more meaningful stat is when they're going to cross desktop traffic this is data from comscore and this projects that in some time in 2014 early 2014 they're getting more mobile users than desktop users and
this is certainly the case for etsy we expect to see mobile traffic surpass our desktop traffic next year now this is this is more meaningful for us because we build websites and we're all used to building desktop web sites but if you start thinking of
the desktop as the minority and you start to realize that you have to do mobile first or else you're under serving your users dramatically so mention breakpoints how do we figure out what break points to use well let's take a look at this thing here
anybody have any guesses what this is yeah device screens orientation yeah that's that's basically right I'll give you book for that so this is actually the that all of the resolutions that visit etsy com with more than 1 million page views per
month so when you look at this image and think to yourself what how could I possibly target a device how am I going to target devices with my break points let's make any sense they're just too many devices and new devices come out every month every
day almost so you just can't use you can't think about that when you're talking about break points so you think about it you can't talk about devices so what do you do the general idea is you want to make it look good now this sounds a little
strange but what this means that you start small you build something that's going to look good on a phone and you simply resize the browser window starts to look like crap add a breakpoint resize it again until it looks like crap add another break point
you're going to end up with something like 600 pixels 900 pixels and then a maximum width now again we want to / 16 to get the EMS do we were using relative units but this is the general theory behind it you want to have a set of break points that make
sure your site is going to look good at all a gradient of resolutions any resolution so just drag the browser window it should look at it every single point when you have that in place you know it's gonna look good on today's devices tomorrow's
devices and anything else that comes along the second getting up to handle is red net images so we have these really high resolution displays how do we deal with serving them these retina display images when we talk about background images and CSS it's
actually pretty easy you start with the normal version so this is a some simple CSS you set a background image no DP Center it and this is the kind of key point at the bottom here you give it a background sighs this background size is going to be the same
dimensions as the small version of the image so that logo small dot PNG is actually 230 pixels by 50 pixels then for a high resolution screen we add our media query we say our men device pitch ratio of two and then all you have to do is set the large image
URL so logo large dot PNG because we've set background size on the previous CSS rule this large image is going to get crammed into that smaller background sighs and that's when you get the twice as many pixels jammer to the same spot which is what
retina means looks like essentially what you're doing for retina screen you're taking a larger image and you're jamming it into a smaller spot so it's extremely simple and browsers are intelligent if you have this media query and the media
query does not apply that large image will not be downloaded so this is only going to work for devices that actually have a min device pixel ratio of two and they're also smart enough that if it's a retina display it's only gonna get the large
version and it won't get the small version because the CSS will cascade we'll figure out this background image overrides the previous background image and it will just give you the large version this is a very safe way to give you the only the image
you want to give to the browser you want to give it to all right let's see it in action now that we know it's pretty easy let's show you guys an example this is pocket this is a tool that you can use to save articles you like on the web and then
[ ... ]
Nota: se han omitido las otras 4.729 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.