Keeping up with the Joneses: Front End Techniques to Future-Proof your Sites

@benmacgowan kEEPING UP WITH THE JONESES: Front End techniques to
future-proof your sites

@benmacgowan CREATIVE-JAR.COM - BENMACGOWAN.CO.UK - BREAKINGBORDE.RS

@benmacgowan ICONS from The Noun Project The web has Evolved

@benmacgowan HTML

@benmacgowan html5

@benmacgowan <MAIN>

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project
<HGROUP>

@benmacgowan css

@benmacgowan css3

@benmacgowan -VENDOR-css3

@benmacgowan CSS4, WHAT? Question designed by Martin Delin from The
Noun Project

@benmacgowan browsers hold the cards

@benmacgowan keeping up can be hard

@benmacgowan clean house =clean mind

@benmacgowan Skeleton designed by Sebastian Langer from The Noun Project

@benmacgowan

@benmacgowan http://html5doctor.com/resources/

@benmacgowan Repeat designed by Jardson AraUjo from The Noun Project
Be consistent

@benmacgowan Hole designed by William J. Salvador from The Noun
Project cater for lack of browser support

@benmacgowan Layers designed by Cody Lawson from The Noun Project
Layer the experience

@benmacgowan Keeping in the know @rogerjohansson @adactio @stevefaulkner @molly @brucel
http://html5doctor.com/ http://coding.smashingmagazine.com/tag/html/ http://www.webdesignerdepot.com/ http://lists.w3.org/Archives/Public/public-html/

@benmacgowan OOCSS @stubbornella ; http://oocss.org/ How do you scale CSS
for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

@benmacgowan OOCSS @stubbornella ; http://oocss.org/ Separation of structure from skin
separation of containers and content

@benmacgowan

@benmacgowan SMACSS SMACSS is more style guide than rigid framework.
There is no library within here for you to download or install. It is an attempt to document a consistent approach to site development when using CSS. @snookca ; http://smacss.com/

@benmacgowan SMACSS Categorising CSS rules and creating patterns Increases the
semantic value of a section Decreases the expectation of specific HTML @snookca ; http://smacss.com/

@benmacgowan

@benmacgowan Naming conventions Layout: .l-inline state: .is-featured Module: .panel

@benmacgowan

@benmacgowan Heart designed by Thomas Le Bas from The Noun
Project #id

@benmacgowan Trophy designed by Ken Messenger from The Noun Project
Don’t let specificity rule

@benmacgowan Be smart with your selectors

@benmacgowan DEVELOPERS EITHER OR DOCUMENTATION Heart designed by Thomas Le
Bas from The Noun Project

@benmacgowan

@benmacgowan VS.

@benmacgowan STRUCTURE Default _Dependencies _Foundations _Components _Regions _Theme PrinT

@benmacgowan Keeping in the know @LeaVerou @meyerweb @CSSWIZARDRY @CHRISCOYIER @stopsatgreen
http://css-tricks.com/ http://coding.smashingmagazine.com/tag/css/ http://lists.w3.org/Archives/Public/www-style/

@benmacgowan no-one likes talking about JavaScript

@benmacgowan JavaScript !=jQuery

@benmacgowan No designed by P.J. Onori from The Noun Project
what if there is no javascript?

@benmacgowan

@benmacgowan Detective designed by Simon Child from The Noun Project
Don’t rely on user-agent detection

@benmacgowan Trumpet designed by Proletkult Graphik from The Noun Project
JavaScript can still do animation

@benmacgowan Puzzle designed by Marcio Duarte from The Noun Project
PIECING IT ALL TOGETHER

SEPARATING UI FROM CONTENT

pERFORMANCE IS KEY

@benmacgowan Images designed by John Caserta from The Noun Project
image compression

@benmacgowan

@benmacgowan Landing Page designed by Javier Cabezas from The Noun
Project

@benmacgowan Code can be beautiful too

@benmacgowan dON’T LEAVE REFACTORING UNTIL THE LAST MINUTE

@benmacgowan Form your own opinions

@benmacgowan sET STANDARDS

@benmacgowan Thank you

Keeping up with the Joneses: Front End Techniqu...

Keeping up with the Joneses: Front End Techniques to Future-Proof your Sites

More Decks by Ben MacGowan

Other Decks in Programming

Featured

Transcript