Presentation at UX London 2014 The web is a fluid and inherently flexible medium - to design effectively for it you need to understand it better. In this hands-on workshop we will look to level up your HTML & CSS skills to learn how you can create responsive prototypes and re-usable pattern libraries for your web projects. We’ll explore how to create layouts that flow beautifully from tiny screens to large ones and how to design responsive grids from the content-out. Through practical examples we’ll discuss the benefits of developing responsive pattern libraries including when and how to use them.

1. Become a better UX
designer through code
Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono
Cyber-Duck Ltd - www.cyber-duck.co.uk

2. Sylvain Reiter
Development Director
@sylvainreiter
Who?
Ramon Lapenta
Senior Frontend Developer
@ramono

3. Communication between
developers and designers is
massively improved
Understanding the code that
makes a layout makes you think
of different ways.
Knowing the limitation of code
helps you think of the
implementation
Help developers understand the
idea behind a design concept
How coding can help you
become a better UX Designer
Why?

4. CodePen
Editor Window & Full page
CodePen is a playground for the
front end side of the web
Write some code, see the result!
CodePen

5. CodePen
Setting up CodePen for
responsive coding
Set up a base Pen
http://bit.ly/uxl2014
Resources
Add necessary resources, like frameworks or
libraries, and viewport metatag.
Fork it!
Add necessary resources, like frameworks or
libraries, and viewport metatag

6. Practical
Coding
Practical HTML / CSS skills that
you can apply to your projects
HTML
Tags and attributes
Relation between elements
Flow of elements
CSS/Sass
Rules
Properties and values
Media Queries

7. Practical
Coding
Practical HTML
HTML
<div class=“container”>!
<div class=“col4”>!
<p>Text here</p>!
</div>!
</div>

8. Practical
Coding
Practical HTML
CSS
.container {!
width: 100%;!
margin: 0;!
}
@media (min-width: 980px){!
.container {!
width: 940px;!
margin: 0 auto;!
}!
}
CSS Media Query

9. Become a better UX
designer through code
BREAK

10. Pattern
Libraries
Patterns: A design pattern is the solution
to a specific, common design problem.
Pattern Library: An organised collection
of patterns.
Content and interactions in responsive
design layouts often calls for new and
creative solutions, a pattern library will
benefit you by helping you discover
and create these solutions.
What is a pattern library
Why, when and how to use it

11. Pattern
Libraries
Navigation
http://codepen.io/bradfrost/full/hkuzA
Content boxes
http://codepen.io/bradfrost/full/vspLD
Sidebar
http://codepen.io/bradfrost/full/gtkHy
Forms
http://codepen.io/chriscoyier/full/DmnlJ
Different pattern examples

12. Pros &
Pros
Speeds up process
Knowledge is reusable, most
problems are not unique
Ensures consistency
Facilitate modifications and
documentation
Cons
Flexibility might get
compromised
Designers may feel limited by
the patterns
New design challenges
require new patterns
of patterns
& Cons

13. Pattern
Libraries
!
• http://
www.mobiledesignpatterngallery.co
m/mobile-patterns.php
• http://www.smashingmagazine.com/
2014/04/22/rethinking-mobile-
tutorials-which-patterns-really-work/
• http://bradfrost.github.io/this-is-
responsive/patterns.html
What is a pattern library
Why, when and how to use it

14. Fit the
Content
Responsive content layout
http://codepen.io/ramonlapenta/full/xCtIF/
Approaching RWD
from the Content out

15. Fit the
menu
Responsive navigation
http://codepen.io/ramonlapenta/full/GcknD/
Approaching RWD
from the Content out

16. We’ve learned how
Communication between developers
and designers is massively improved
Understanding the code that makes a
layout makes you think of different ways.
Knowing the limitation of code helps you
think of the implementation
Help developers understand the idea
behind a design concept
What we have learned
Takeaways

17. Become a better UX
designer through code
THE END
Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono
Cyber-Duck Ltd - www.cyber-duck.co.uk