Design best practice for a re-usable CSS - your front devs will say thanks
Who and why ?
1
About me
Based on personnal experiences
- learning from own mistakes
- learning from other's mistakes
- sharing what I learned
Re-usable code and design?
Consider the design elements as small repeating visual patterns
Consistent interface for an easy and reusable CSS
2
Work in plain values
Color uniformity
- Avoid uncertain color picker
- Create color palettes
- LESS and Sass variables
@color: #10709c;
.title{
color: @color;
}
Different color formats for more flexibility
CSS color formats
rgb() => rgba()
.title{
color:#fff;
background: rgb(249, 118, 30);
}Mybloc
hsl()
.title{
color:#fff;
background: hsl(24, 95%, 55%);
}Mybloc
And preprocessor color functions :
lighten(background: rgb(81, 130, 222);, 10%);
Work with a grid
- helps visually organize blocs while designing
- brings clarity and visual balance into the design
- Gestalt proximity law
Work with a grid
1
1
1
1
1
1
1
1
1
1
1
1
4
8
6
6
12
<div class="row-fluid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>Consistency of interface buttons
- Visual affordance for the user to remember
- Start with the global re-usable styling ( shape, type, dimension, etc.)
- Color / size declination of the same button
Consistent typography
- Same font for most heading of the site
- Create consistent vertical rythm
Create a style guide
- Developers will ❤ you (and your design)
- Specify size, style, font, etc
Using Style Tile
Consistency in interface = User experience benefits
- Helps navigation
- Visual Affordance
- Visual Hierarchy
Developer are no telepaths
- and neither are designers -
3
Provide the different states of elements
- :hover, :active, :focus and :visited states in the design phase
- Be consistent
- Communication : highlight interactions in the design
- CSS3 animation to the rescue
Hidden elements : what happens when user clicks ?
- Drop-down, sub-menus design
- Modals: what does it look like ?
Interface feedbacks message
- Anticipate form error message: what, where, when ?
- Message a human can understand
- Explicit buttons message
Communication is the key
- When in doubt, ask questions
- As a designer : show the design in its early stage
- As a developer: challenge yourself
Typography and fonts on the web
- the good, the bad and the messy -
4
Using safe webfont families for main text content
- Once upon a time, there was a Myriad Pro font ...
- Test different fonts for the same family
- Test the fonts on different browsers / OS
- Test the font on different devices
Adding "exotic" webfonts for some text elements
- @font-face (Google Fonts, etc.)
- Beware page load
- Test the font-subsetting (é, ö, etc.)
- Beware the Photoshop antialiasing
Making sure your developer/Client can legally use the font
- Font licenses vary, so beware of licensing restrictions for each font-face
- Embed might be available from online services like https://typekit.com/
Units and colors
- Using many colors on the same piece of text is technically possible, but ...
- On the web, half pixels don't exist (i.e. 12.5px)
On design software's specific text effects
5
Semi-bold, thin, light, condensed font styles
- You can't reproduce those in CSS
- Safest way : normal (400), bold (700) and real italic style
- @font-face "faking" = download one font per style
Software's vertical and horizontal font scaling
- This does not exist in CSS
- You are destroying the font balance
Hyphenation
- CSS hyphenation does exist but… not well supported
- Heritage from the print
- So switch it off in Photoshop
Re-usable Layer effects
6
Box and text-shadow effects
- Have consistency into the shading
- Many possibilities using
box-shadowandtext-shadow
Linear gradient - the button trick
.btn {
padding: 1em 2em;
font-size: 0.7em;
font-weight: bold;
color: #fff;
border-radius: 4px;
border: 1px solid rgb(250, 117, 27);
background-color: rgb(250, 117, 27);
box-shadow: inset 0 2px 0 rgba(255,255,255,.23);
border: 1px solid #f9751d;
background-image: linear-gradient(to top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
}
.btn.alternate {
}
Form elements design
7
Form elements (almost) easy to style
- Inputs fields and text areas
- Submit elements:
<input type="submit">and<button> - Checkboxes (and radio buttons) with a little bit of CSS tricks
Form elements messy to style
-
<select>elements - Beware accessibility
- Beware mobile behavior
Modular and future-proof content strategy
- Design with the unexpected in mind! -
8
The web is a vertical medium
- If possible, work with "real" content
- Design with vertical expansion in mind
Design with different screensize in mind from the start
- Think about mobile layout when you start in the design phase
- Helps the developer make suitable code decisions
Test other languages in the design phase
- Flexible content is also language flexibility
- Settings - Einstellungen - Configurações ?
- Re-usable CSS that does not need tweak for every language
On Handing over the files
8
Don't merge/rasterize layer, use "Smart object"
- Rasterized layers are unusable for the developer
- Use smart objects instead = object oriented thinking in the design phase
- Inception : don't abuse them
This is also true for images
- Non destructive mode for images
- Image asset into the best quality possible
- Make sure you (and the client) can legally use the image
Towards pixel independence
- High resolution screen => need for more flexible format
- Working with Illustrator for easy SVG conversion
- Shape layer in Photoshop
Making sure all texts are easily re-usable
- Goal : copy/paste and quickly see styling
- Avoiding using multiple styles on one text element
Organizing your mess - you don't want to tidy some else's room, right?
- Organizing from the start is easier
- Quick tip: Autoselect layer = on !
- Unlocking those layers
And that's about it ...
Merci beaucoup :)
Credits
- RBNo2Light font by www.fontfabric.com
- LiveCoding in Reveal.js by Vincent De Oliveira (@iamvdo)
- Custom checkboxes with CSS only by Geoffrey Crofte
- Proofreading Marie & Todd