Web & PHP Conference 2013

Diseño web responsive

Frédéric Harper  · 

Presentación

Vídeo

Transcripción

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

good evening I hope everything is good for you long day just before there are you hungry yeah thanks now I've got some pressure to finish my talks earlier so you can get all for dinner I won't ask that question again so I mr. Harper I'm francophone

I'm three from Montreal from Canada to talk about responsive web design so I'm a senior technical evangelist at Mozilla I usually focus on everything there is around Firefox OS so well I'll 11 lazy the location using HTML CSS JavaScript laying

html5 css3 javascript all you can't be doing during my conference I by using my handle half-half Harper and the only that you need to keep in mind for today's presentation also is how to comfort zone def jam because i'm going to publish my slides

up there and i'll also publish a recording of that talk so we'll see if the Holy it was good but I hope it is only lost you don't get how to take notes from kings of the slide all right little notes from what I said what I'm going to say today

in that presentation so I think that it's not quite popular but understand the link for conference Ohio he wants you leaving feedback after the presentation it's always useful please leave constructive feedback not just the guy didn't have any

hairs that won't help me to do my next presentation and you know I was it yeah you understand me and I think you can also zoom in in question on the link so we'll see after I have some time soon question is that I'm going to hear during the break

but you can also contact me on Twitter emails or whatever other ways that you want me to that you want to contact me so how many of you where at lying alive first announced yesterday so you will want to see a representation from me okay it's okay you have

a choice so i started my presentation a little bit in the same way how we view the web yup in the past but also today most of the time is that we're taking most of the time about the desktop browser the desktop desktop hardware and what we're building

website web location most of the time we're only thinking about the backstop and this is wrong this is wrong today because we have so many other ways to access web application and websites we can do this from by browsers from the smartphone from feature

phones from tablet for touch tablet I can do this also for any form factors tablets think about the ipad think about the surface from microsoft think about any android devices so there is many ways for us to access the web you can even do this on television

right now the council just a teeny as internet browser in there so this is quite look at crazy i think i can do just one game consoles and i can continue to talk about those things there's also many Internet of Things where I can go on the web on my refrigerator

so this is kind of crazy I have access to the Internet all versions of place so that mean that has a user I have access to your website and your web application of all these devices so what's the problem let me show you soon some of the problem so we apologize

first are always hate to do those kind of empty pattern because I want to learn and when it comes to this example if I pcs I never p by the people sorry behind this organization yank those really good conferences really great conferences we have in Canada

and I think are doing this all over the world I don't know if it's if they are doing those in the u.s. also red red conference we had a great organizer with a great website when it comes to the desktop so if I'm looking at that website I still

had a lot of information with the website I rely the color or like the design as I said great folks great website but what happened if i change the size of my browser so there is one way to do this if i want to test if my application may support many devices

so i'm not talking here about the vice detection browser detection user agenda tection it's really about his my website is displayed on another platform on the nerd devices on a new viewport will that a website gave me a great experience and in that

case this is not quite there yet because i'm going to have to screw down scroll up roll down through a lot scroll to the left to the right i'm going to have to zoom in zoom out and you know what that mean in that case i may be on my mobile phone and

i was with a friend that talk to me about that conference as that oh my god this is so awesome i want to be there I want you buy tickets Nene doesn't do it easy for me to buy any tickets for that conference and I'll forget about it okay I will bite

those tickets when I'm going to be at the office or where I'm going to be back at home in front of my 27 inch screen and I need forget about this so you may lose a client you may use a customer or attendees for that conference so in that case great

website but not a great experience in many devices and this is not a kind of experience we would like to have when it comes to web sites and this a little bit one was talking yesterday first is that we need to think about many devices and in that case the

only taught about the deck stop maybe this is good for them maybe this is good for the business because most of their attendees most of the user will only use the desktop browser to access their site but most of the time you knew it I knew it this is not a

case so there is something that would call responsive web designs and there is not guy in san marcos little nice guy I pleasure to go out for dinner with him really brilliant guy and up two years ago itn 2012 2010 you wrote an article on the list of art if

you were there yesterday you heard that I praise those apart stuff a list apart book apart and wrote an article about why we should create those website that would response to different view port is that only those pics with size website so right dude article

like I stabbed 23 years ago about the responsive web design so what is it this will lead to think about the users needs before earnings any money as as your customers who have to have a website that will work well on a desktop and lady in the black room because

those are the two devices that i'm using but maybe you're using an iphone maybe you're using an android maybe you are using a samsung i think this is the one note that is kind of bigger not quite a tablet not quite a smartphone you're using

your device I didn't hear to know about it but I love to thing about you so what I'm doing responsive design when I'm taking that fills of you I'm going to think about users need before i'm going to create a website i will adapt to very

various device capabilities instead of configuration and this is really important instead of saying oh I'm going to detect it is using Zachary or is this an iphone and I'm going to adapt your website to the high phone I'm going to have that my

website to the resolution of the iphone to the viewport to the places that i have in the screen to display my website or my weld occasion and by doing this that's going to help me to future-proof my sights what happened is tomorrow those iphones in war

sue really bunch of idols in walmart i'm pretty sure that the hip around iphones will build them a little bit because everybody will be able to get one so what happened is tomorrow iPhones or androids are not the most use platform what happen if the reason

you found that you out and I'm not supporting this in my side so by thinking a responsive website I'm going to be able to create those xperience that's going to be future proof so let me show you a couple of example a bit like that one maybe because

there's just like a cap a let up like animals fighting for dem cell so this is a real nice website now they are friends no relation with the presentation I just like to do these so what's happening there is i'm going to use an order to if you're

using firefox there is a responsive design to here so i don't have to move myself the browser I have to preset resolution so in my case if I go with a kind of larger resolution you see the website it's there it's working well what did you is that

usually slowly it will remove some element of the screen and you will still have a good experience you will still have the experience that you had indexed up but in that case I may be on the tab lab so they had a flexib a flexible grid so they move everything

around but if I go smaller and smaller you're going to see that some stuff just been removed you don't see any more to title of the magazine you still have you still have those animals fighting themselves but I still have a great experience I still

have CSS the fact that they are doing with the images and with the text and it's working quite well that dream I always need to talk about that website is our internet it's a sample website that give great information about a product most of the time

we are not creating website with cats and dogs fighting on the front page so you may have more chance to create something for a beverage like this so still my good website highly used is emo with this lovely ladies that are drinking the coffee drinks and I

[ ... ]

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