Meet Me in the Browser

If your web development starts with a Photoshop comp, you are doing it wrong.
It's time to ditch your old process and embrace a content-first approach; Start deciding in the browser by building from mockups, where form follows function and real content leads the way.

To help you along, we'll be looking into a workflow for a flexible, maintainable frontend code base, using CSS preprocessing to make your life a hell of a lot easier, and other great tools for building, maintaining and evolving the frontend with living mock ups and style libraries. Benefits will include testable, refactoring friendly styling and markup, responsive webdesign with minimal effort AND improved team collaboration.

And to top it all off, your mockups will be a breeze to transform to a live Umbraco website; Try doing that with a PSD.

I gave this talk at the awesome CodeGarden conference in June. They recorded it - video is available here: http://stream.umbraco.org/video/8317157/liv-madsen-meet-me-in-the-browser

Transcript

1. @livmadsen a content first approach to frontend development QUIT BULLSH*TTING AND
2. @livmadsen Frontend developer Creuna #FRONTENDERSDK group and meet-ups
3. @livmadsen Meet me in the browser WHAT WE’LL COVER WHAT’S THE PROBLEM, REALLY? MEET ME IN THE BROWSER STYLE GUIDES & ELEMENT LIBRARIES NO-HAZZLE MOCK-UPS SUM-UP & QUESTIONS
4. @livmadsen Meet me in the browser (..., Cotton Eye Joe) WHERE DID WE COME FROM?
5. @livmadsen Meet me in the browser TYPICAL PROCESS The figure you are about to see is based on actual events. My name has been removed to protect my identity.
6. @livmadsen Meet me in the browser TYPICAL PROCESS
7. @livmadsen Meet me in the browser TYPICAL PROCESS
8. @livmadsen Meet me in the browser TYPICAL PROCESS
9. @livmadsen Meet me in the browser OMG, THE LIES! WHAT HAPPENED?
10. @livmadsen Meet me in the browser LESS “TADAA” PRESENTATIONS MORE DIALOGUE
11. @livmadsen Meet me in the browser DESIGN AND DEVELOPMENT ARE NOT SEPARATE THINGS
12. @livmadsen Meet me in the browser CLEAR STRATEGY & SET GUIDE LINES @livmadsen Meet me in the browser
13. @livmadsen Meet me in the browser DECIDE IN THE BROWSER @livmadsen Meet me in the browser
14. @livmadsen Meet me in the browser EXPOSE ISSUES, GET WISER AND RESPOND FASTER
15. @livmadsen Meet me in the browser WITH THE CONTENT GET COZY
16. @livmadsen Meet me in the browser Kick-start dialogue, lo-fi style Align expectations on style and behaviour DESIGN DELIVERABLES LAYOUT AGNOSTIC
17. @livmadsen Meet me in the browser ELEMENT COLLAGES HTTP://DANIELMALL.COM/ARTICLES/RIF-ELEMENT-COLLAGES/ STYLE TILES HTTP://STYLETIL.ES DESIGN DELIVERABLES LAYOUT AGNOSTIC
18. @livmadsen Meet me in the browser & ELEMENT LIBRARIES STYLE GUIDES IN THE BROWSER
19. @livmadsen Meet me in the browser @jakobloekke by A STYLE GUIDE YOU CAN WORK IN TDCSS.JS
20. http://bit.ly/tdcss Work in your style guide Light-weight, instant response No server-side dependencies
21. @livmadsen Meet me in the browser Small teaser in list Large teaser in list Large teaser alone ELEMENT LIBRARIES
22. @livmadsen Meet me in the browser GREAT BASE, BUT REPETITION BUILDS
23. @livmadsen Meet me in the browser @teammixture by MIXTURE.IO HAZZLE-FREE MOCK-UPS
24. @livmadsen Meet me in the browser http://mixture.io Rapid prototyping Easy sharing Built in preprocessing, multi-device testing etc. App for
25. @livmadsen Meet me in the browser .liquid files for layouts templates includes HTML TEMPLATING WITH LIQUID
26. @livmadsen Meet me in the browser ... {% include "resources/navigation" %} <div role="main"> {% block content %}{% endblock %} </div> <aside role="complementary"> {% block secondarycontent %} {% endblock %} </aside> ... in include file “navigation” navigation in layout file ... <a href="/" {% if mixture.url == "index" %}class="current"{% endif %}> Home </a> <a href="/model" {% if mixture.url == "model" %}class="current"{% endif %}> Model example </a> ...
27. @livmadsen Meet me in the browser ... {% include "resources/navigation" %} <div role="main"> {% block content %}{% endblock %} </div> <aside role="complementary"> {% block secondarycontent %} {% endblock %} </aside> ... {% block content %} <h1>Hello, world!</h1> <p>This is main content</p> {% endblock %} {% block secondarycontent %} Oh, Hello again! {% endblock %} in layout file in template file “content” “secondary content”
28. @livmadsen Meet me in the browser JSON MODEL CONTENT - helping developers work Content First since 1873 in
29. @livmadsen Meet me in the browser { ... "kittens": [ { "name": "John", "type": "Mancoon", "teasertextshort": "A real wonder bundle, that will have you brimming with joy.", "teaserimage": "http://placekitten.com/400/150" }, { "name": "Cuddles", "type": "Cornish Rex", "teasertextshort": "This clever kitty has been specially trained to never sit on keyboards.", "teaserimage": "http://placekitten.com/400/150" } ] } in model file _global.json
30. @livmadsen Meet me in the browser elements.liquid (tdcss) <a href=”...” class="teaser-small"> <image class="teaser__image" src="{{ kitten.teaserimage }}" /> <span class="teaser__brand"> {{ kitten.name }}</span> <span class="teaser__type"> {{ kitten.type }}</span> </a> teaser--small.liquid (block) <!-- : Small teasers --> <section class="teaser-list"> <h1>All our kittens</h1> {% for kitten in global.kittens %} {% include "blocks/teaser--small" %} {% endfor %} </section>
31. @livmadsen Meet me in the browser example at http://codegarden.livmadsen.mixture.io/ ELEMENT LIBRARIES WITHOUT THE REPETITION bonus: reuse fixtures for jasmine, your fav style doc generator, etc.
32. @livmadsen Meet me in the browser GAINS & LEARNINGS
33. @livmadsen Meet me in the browser CLEAR STRUCTURE LOW BARRIER IMPROVED TEAM WORK
34. @livmadsen Meet me in the browser .. at least not over this bit ... PANICKED CLIENTS HAVEN’T
35. @livmadsen Meet me in the browser Don't go chasing waterfalls. But, please DON’T stick to the rivers and the lakes that you're used to. THIS IS ACTUALLY HARDER TO EXPLAIN
36. @livmadsen Meet me in the browser THE AGILE APPROACH *IS* HANDLING RISK
37. @livmadsen Meet me in the browser OTHER MENTIONABLES
38. @livmadsen Meet me in the browser ANY QUESTIONS?