is everything we used to do wrong?

108
is everything wrong we used to do

Upload: russ-weakley

Post on 28-Jan-2015

118 views

Category:

Education


4 download

DESCRIPTION

Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. However, these practices are now being questioned. Where do we stand? What is best practice web development today? Russ Weakley will explore these topics and more... or possibly less...

TRANSCRIPT

Page 1: Is everything we used to do wrong?

is everything

wrongwe used to do

Page 2: Is everything we used to do wrong?

This presentation is going tolook at some of our bestpractices from the past,

and what are consideredbest practices today.

Page 3: Is everything we used to do wrong?

First of all, an admission…

Page 4: Is everything we used to do wrong?

I’m not a fan of the term“best practice” any more.

Page 5: Is everything we used to do wrong?

right vs wrongBest practices:

Page 6: Is everything we used to do wrong?

If we define one methodas the “right way” it often

implies that other methodsare wrong.

Page 7: Is everything we used to do wrong?

While there are definitely“bad practices”, there are

many situations wherethere are no clear right

or wrong solutions.

Page 8: Is everything we used to do wrong?

“Today, anything that’s fixed andunresponsive isn’t web design, it’s

something else. If you don’t embracethe inherent fluidity of the web, you’renot a web designer, you’re something

else.”

http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/

Page 9: Is everything we used to do wrong?

things changeBest practices:

Page 10: Is everything we used to do wrong?

If history has taught usanything it’s that everything

changes over time.

Page 11: Is everything we used to do wrong?

Tables vs CSS

Page 12: Is everything we used to do wrong?

“My rule of thumb is Consistency,Consistency, Consistency... If CSS

works for a project, then I use it. If itdoesn’t look like it will, I use tables.”

http://www.raizlabs.com/blog/148/ten-reasons-why-css-sucks

Page 13: Is everything we used to do wrong?

Microformats

Page 14: Is everything we used to do wrong?

“The blog is neglected, there've been nonew formats promoted … none of us

work actively on it, … the mailing listsare deserted. It is an entirely

legitimate impression that the efforthas folded into irrelevance.”

http://microformats.org/wiki/events/2011-03-sxsw

Page 15: Is everything we used to do wrong?

The <i> element

Page 16: Is everything we used to do wrong?

The i element now represents a span oftext in an alternate voice or mood, or

otherwise offset from the normal prose ina manner indicating a different quality oftext, such as a taxonomic designation, a

technical term, an idiomatic phrase fromanother language, a thought, or a ship

name in Western texts.

http://www.w3.org/TR/html5-diff/

Page 17: Is everything we used to do wrong?

Um.. then there is myRemix07 presentation…

Page 18: Is everything we used to do wrong?

“Why separate your CSS? It’s easier tofind rules. More than one developer ata time. Files can be turned on or off as

needed.”

http://www.slideshare.net/maxdesign/modular-css

Page 19: Is everything we used to do wrong?

depend on skillsBest practices:

Page 20: Is everything we used to do wrong?

Best practices may be quitedifferent depending on the

skill area.

Page 21: Is everything we used to do wrong?

For example, best practicesin front end developmentmay be different from bestpractices in UX, SEO and

Social media…

Page 22: Is everything we used to do wrong?

depend on teamsBest practices:

Page 23: Is everything we used to do wrong?

Best practices may be quitedifferent depending on the

team you work with.

Page 24: Is everything we used to do wrong?

As an individual, you mayhave specific best practices.However, these may have tochange when working in a

team environment.

Page 25: Is everything we used to do wrong?

not techniquesoutcomes

Page 26: Is everything we used to do wrong?

Instead of talking about bestpractices as techniques, weshould probably focus on

outcomes.

Page 27: Is everything we used to do wrong?

Let’s take front enddevelopment (HTML, CSS,JavaScript) as an example:

Page 28: Is everything we used to do wrong?

What are some of ourdesired outcomes?

Page 29: Is everything we used to do wrong?

users come firstOutcome 1:

Page 30: Is everything we used to do wrong?

We should not do anythingthat makes the userexperience harder.

Page 31: Is everything we used to do wrong?

We should make sure oursites are accessible to

all users.

Page 32: Is everything we used to do wrong?

We should make sure oursites are accessible to

all devices.

Page 33: Is everything we used to do wrong?

We should make sure oursites are accessible

regardless of bandwidth.

Page 34: Is everything we used to do wrong?

develop efficientlyOutcome 2:

Page 35: Is everything we used to do wrong?

We should aim to developusing efficient methods,

to reduce overalldevelopment time.

Page 36: Is everything we used to do wrong?

We should aim to developusing methods that avoid

repetition.

Page 37: Is everything we used to do wrong?

maintainable,

scalable

Outcome 3:

Page 38: Is everything we used to do wrong?

We should aim to developusing practices that allow

easy maintenance.

Page 39: Is everything we used to do wrong?

We should aim to developusing practices that allowour sites to scale well

over time.

Page 40: Is everything we used to do wrong?

fast page loadOutcome 4:

Page 41: Is everything we used to do wrong?

We should aim to developsites so that pages load asquickly and efficiently as

possible.

Page 42: Is everything we used to do wrong?

backaward and

forward compatible

Outcome 5:

Page 43: Is everything we used to do wrong?

Does anyone else hate theterm “future proof”?

Page 44: Is everything we used to do wrong?

XHTML 1.0 was supposedto be a future-proof

language

Page 45: Is everything we used to do wrong?

We have to be careful notto leave our users behind

in the rush towardsthe future.

Page 46: Is everything we used to do wrong?

For example, JavaScriptbased solutions should be

built so that they failgracefully.

Page 47: Is everything we used to do wrong?

We should be careful aboutabandoning users with

older devices because wedon’t want to support them.

Page 48: Is everything we used to do wrong?

Some techniques that aid our

outcomes

Page 49: Is everything we used to do wrong?

So, here are somestrategies and techniquesthat are currently considered

“best practices”.

Page 50: Is everything we used to do wrong?

Be warned, thesemay not be considered

“best practices” in the future!

Page 51: Is everything we used to do wrong?

More importantly, these bestpractice techniques are

designed to help us achievesome key outcomes.

Page 52: Is everything we used to do wrong?

Reducingrepetition

Page 53: Is everything we used to do wrong?

1:CSS resets

Page 54: Is everything we used to do wrong?

CSS resets aim to removebrowser-specific styles, andthen build up from scratch -

so that each element willappear the same in all

browsers

Page 55: Is everything we used to do wrong?

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{

margin:0;padding:0;border:0;font-size:100%;font: inherit;vertical-align: baseline;

}

Page 56: Is everything we used to do wrong?

Strengths:Efficient developmentConsistency for teams

Weaknesses:lots of additional rewriting

Page 57: Is everything we used to do wrong?

2:CSS frameworks

Page 58: Is everything we used to do wrong?

CSS frameworks arepre-prepared libraries that

allow for easier, standards-compliant styling of web

page components.

Page 59: Is everything we used to do wrong?

Many frameworks focus onlayout grids, allowing

developers to pull in libraryclasses to build complex

layouts.

Page 60: Is everything we used to do wrong?

.column, .span-1, .span-2,

.span-3, .span-4, .span-5,

.span-6, .span-7, .span-8,

.span-9, .span-10, .span-11,

.span-12, .span-13, .span-14,

.span-15, .span-16, .span-17,

.span-18, .span-19, .span-20,

.span-21, .span-22, .span-23,

.span-24 {float:left;margin-right:10px;}

Page 61: Is everything we used to do wrong?

Keep in mind you canalways roll your own

framework.

Page 62: Is everything we used to do wrong?

StrengthEfficient developmentLean, abstracted CSS

WeaknessesDesigns that don’t fitBloated frameworksPresentational class names

Page 63: Is everything we used to do wrong?

Maintainableand scalable

Page 64: Is everything we used to do wrong?

3:Object-oriented CSS

Page 65: Is everything we used to do wrong?

How many timesdoes your CSS file

mention H2 or“float: left”?

Page 66: Is everything we used to do wrong?

Do you ever findyourself stylingusing Firebug?

Page 67: Is everything we used to do wrong?

Object-oriented CSS stylesHTML “objects” or

“modules” with cleaner,more efficient CSS.

Page 68: Is everything we used to do wrong?

For all the hardcoredevelopers… yes, it’s not

really object-oriented.It’s just a name!

Page 69: Is everything we used to do wrong?

There is a strong chancethat you may be “doing it

wrong”, or could at least be“doing it better”.

Page 70: Is everything we used to do wrong?

How do we useObject Oriented CSS

Page 71: Is everything we used to do wrong?

Before starting your CSS,look at your layouts and

try to find patterns.

Page 72: Is everything we used to do wrong?

Are there aspects of thelayout that could be

abstracted into libraryitems?

Page 73: Is everything we used to do wrong?

Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity wars

Weaknessesadditional HTML classesnew mindset

Page 74: Is everything we used to do wrong?

Efficiency

Page 75: Is everything we used to do wrong?

4:Pre-processors

Page 76: Is everything we used to do wrong?

Pre-processors allow us touse variables in CSS filesand then parse them to

regular stylesheets.

Page 77: Is everything we used to do wrong?

There are many differentframeworks available:

• LESS • SASS

• Turbine • Switch CSS

• DtCSS • CSS Crush

Page 78: Is everything we used to do wrong?

Variables

Page 79: Is everything we used to do wrong?

@color1: red;@color2: green;@color3: blue;@color4: orange;@color5: brown;

#a { background: @color1; }

Page 80: Is everything we used to do wrong?

Minification

Page 81: Is everything we used to do wrong?

div{width:200px;height:200px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#one{background:red;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}#onea{color:green;}#two{background:green;-webkit-border-radius:30px;-moz-border-radius:30px;border-

Page 82: Is everything we used to do wrong?

Mixins

Page 83: Is everything we used to do wrong?

.border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}

div { .border-radius(); }

Page 84: Is everything we used to do wrong?

PackingGzipping

Compiling

Page 85: Is everything we used to do wrong?

Strengthfaster developmentvariables!

Weaknessesdeep nestinginefficient CSSentirely new syntax

Page 86: Is everything we used to do wrong?

Deviceindependence

Page 87: Is everything we used to do wrong?

5:Responsive design

Page 88: Is everything we used to do wrong?

Until recently, people builtsites for desktop and/or

mobile only.

Page 89: Is everything we used to do wrong?

Responsive design isabout creating sites thatadapt to any device.

Page 90: Is everything we used to do wrong?

Problem 1:solving screen size

Page 91: Is everything we used to do wrong?

Ideally, we want to start witha single linear layout thatcan be viewed by any

device.

Page 92: Is everything we used to do wrong?

Then we gradually build aseries of advanced fluid

layouts on top, controlled bymedia queries or

JavaScript.

Page 93: Is everything we used to do wrong?

@media only screen and(min-width: 800px) and(max-width: 999px){}

@media only screen and(min-width: 1000px){}

Page 94: Is everything we used to do wrong?

This means we can deliverentirely different layoutsbased on the viewport.

Page 95: Is everything we used to do wrong?

Problem 2:Solving bandwidth

issues

Page 96: Is everything we used to do wrong?

But what aboutimages and other rich

media?

Page 97: Is everything we used to do wrong?

Ideally, we should deliverlow end images and media

as the default.

Page 98: Is everything we used to do wrong?

Then we deliver larger,richer media for thosedevices with suitable

bandwidth.

Page 99: Is everything we used to do wrong?

Problem 3:content and context

Page 100: Is everything we used to do wrong?

Another problem we face isdetermining what types of

content should be deliveredto devices, and in whatcontext are people are

using the site.

Page 101: Is everything we used to do wrong?

It is not as simple asdelivering stripped back

content formobile devices and

rich content for desktops.

Page 102: Is everything we used to do wrong?

The reality is that these lasttwo problems are not solved

yet. But a change iscoming.

Page 103: Is everything we used to do wrong?

I think we are at a tippingpoint. Very soon, a major

site is going to crack thesethree problems and change

the way we build sites.

Page 104: Is everything we used to do wrong?

Final words?

Page 105: Is everything we used to do wrong?

A solution that seemsideal today may be

outdated tomorrow.

Page 106: Is everything we used to do wrong?

Focus on outcomes ratherthan using the latest

technique.

Page 107: Is everything we used to do wrong?

But most of allwe should have fun!

Page 108: Is everything we used to do wrong?

So, what are your best practices?