CSSConf US 2014

Trucos para optimizar los estilos CSS para móviles

Angelina Fabbro  · 


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

yeah pretty good everybody had good lunch alright so as Jen mentioned my name is Angelina Favreau I hail from Vancouver Canada as opposed to Vancouver Washington which I'm sure many of you are from I'm Angelina Magnum on Twitter feel free to say hi

for example if there's something that I covered in the talk that you have a question about or if you happen to have some mobile inch cases that you think I might find interesting I'm more than happy to talk to you about those things so Mobile's

a thing it's pretty important thing it just kind of like throw some media queries into a page and then you're basically done right basically need to focus on maybe one browser two browsers that's it okay so there is a big problem I think with mobile

development and that's that actually there are a lot of really good tools but later in the talk you'll actually see why this is a problem and my personal problem is that no one tool actually solves all of my problems for me when I'm doing mobile

application development or mobile website development depending on how you decide to frame your paradigm of development so in my mind whenever I'm dealing with CSS there are two types of debugging that I'm dealing with layout debugging or I'm dealing

with performance debugging those are the things I care about Louis and when I'm thinking about debugging tasks i compartmentalize them into one of those two things it's not always black and white but for now let's pretend it is so today I'm

going to talk to you about a little bit to do what I do for my workflow when I'm developing a mobile responsive website in the past I worked at a spoke shop in Vancouver where I did mobile applications for the web and also for native and then when I originally

joined Mozilla I was working on Firefox OS and so I actually helped developers one on one take their their applications which were a largely responsive web applications and then make them work on these really low powered low memory devices which are being

shipped across the world to other nations to ideally give people a smartphone experience you know where they would have otherwise purchased a feature phone for kind of about the same price point and so this talk is sort of a collection of my tips and tools

that along the way I learn from other people and other companies that do a lot of mobile application development things that I've had to like bash my head against the wall at 2:00 in the morning trying to figure out because I really wanted to help someone

or ship my own thing and I'm hoping that this talk gives people who are less familiar with mobile websites you know kind of a quick place to go for some easy tips and for those of you who are a little bit more seasoned with mobile development I hope you

learn about some cool tools as well so for a manageable workflow I think the really key thing is to get your layout right early and in order to do that you need to first think about who your target demographic is now of course we're at this lovely place

called Florida which is the United States of America and I'm from Vancouver Canada and so a lot of us here are probably from North America and so we probably have a very North American North American centric view of things of course North America is not

the entire world if you're in South Africa it's likely that you could be using a blackberry Symbian or a Nokia device or and probably under it as well and you're actually most likely to be using Opera Mini as a browser or maybe Mobile Safari if

you're here in North America you're probably most likely to be using you know mobile safari stock Android 2.3 Browser yes 2.3 we'll get to that in a moment um and of course Chrome for Android Firefox for Android if you're in China you might

be using blackberry Symbian Android Nokia series 40 or you might be using the official Chinese government operating system yes that's right they designed their own operating system spork Mandarin have not previewed it myself this was this was news to me

if you're in Venezuela you're probably running Android or Firefox OS and it's likely that you could be using the stock Android 2.3 browser as well and so this really just goes to show that you're probably you know how to put it you can't

always predict who your market is going to be it's really nice to think that I am making a page for people that are like me in North America and that's probably true and maybe that's where you get most of your traffic but why would you necessarily

exclude customers from other regions by just not catering to the devices that they use or the browsers that they use for example I mean as far as products go the social network Orkut was a bomb in North America Brazil totally loved it my friend Jenn Fong did

a website called neat spaces where it takes like a little clip of you as an animated gif and like puts it it's like IRC meets snapchat basically and one day suddenly a whole bunch of press French 20-somethings loved it and the thing is like people didn't

necessarily think that that was going to be their target market but if you're especially if you're selling something why would you turn down any market whatsoever so I encourage you that when you're considering your target demographic to not totally

be North American centric that being said I know the people there will probably care the most about iOS and Android and so those are largely what we're going to talk about today but please consider going to other markets and other browsers so the first

thing of course was you know try to figure out your target demographic because that will help you decide what your target devices and browsers are maybe you know you're targeting iOS 6 up and particular subset of iOS devices maybe you're targeting

a particular subset of Android devices maybe you have a lot of enterprise clients that happen to be using blackberry and you need to use blackberry hopefully not using web fonts which we learned in the last talk so that's a very important consideration

and deciding the target devices and browsers are really important because they will frame how your website is created based on the constraints that they have so the next thing and people are usually into like their intuition is that I want to start designing

stuff right okay so I know who I'm designing for I know what viewports I'm designing for I'm gonna hop right into Photoshop perhaps and I'm gonna make some assets no bad don't do it I really recommend prototyping in your browser use a little

bit of structural HTML and some minimal CSS to kind of get the layout right and actually don't open Photoshop yet try and avoid using Photoshop until you really are at the last stages of needing that visual look and feel you can put in place holder content

using a lorem ipsum generator and of course using some dummy cat images which I insist are the best content placeholders for images but don't worry about all the visual look and feel because what I've noticed that vellum developers will do when they're

finding stuff is they'll get really hung up on making like the rounded edges and drop shadows look really good but they'll ignore till the last possible minute layout issues which would have been a lot easier to debug if they had a lot less CSS to

deal with so actually I recommend prototyping in your browser don't open Photoshop yet back in come later and you want to be designing inside the browser with these contextual constraints of the devices and the viewports that you're interested in kind

[ ... ]

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