SlideShare a Scribd company logo
1 of 261
Download to read offline
STYLE GUIDES@brad_frost
Style Guide Best Practices at Beyond Tellerrand
Great news, team.
We got the green light to
redesign the homepage.
Style Guide Best Practices at Beyond Tellerrand
That’s great
news, boss!
Yeah, the current
homepage is super ugly!
Yeah and don’t even ask
about the code quality lol.
Exciting! It will be great to do
things right this time.
Yeah we’re going to
use BEM…
And the visuals will be
clean and flat.
Yeah and we’re definitely
looking into React.js
And maybe this will give us
the chance to finally
migrate to a new CMS.
Grunt.
Make it so.
LATHER. RINSE. REPEAT.
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
global
north america
latin america
chile
europe
india
australia
china
hong kong
taiwan
Style Guide Best Practices at Beyond Tellerrand
huge jerk.
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
We don’t have time for
cohesion and continuity!
We’re too busy
DISRUPTING!
ONE BRAND
MOREDEVICESENVIRONMENTS
PEOPLELANGUAGES
CONTENT
BROWSERS
MEDIUMS
COUNTRIES
SCREENSIZES
FEATURES
PRODUCTSSERVICESFUNCTIONALITY
CUSTOMERS
FORMA
USER
FORMFACTORSCONTEXT
STYLE GUIDES
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
http://cargocollective.com/mcalkins/Walmart-brand-book-design
brand.wvu.edu
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
https://frontify.com/
BRAND STYLE GUIDES
๏ Purpose: establish guidelines for using core brand assets
๏ Audience: the entire organization, vendors and anyone
making use of brand assets
๏ Can include: Logos, typography, color palette, file templates,
assets, downloads, etc
Style Guide Best Practices at Beyond Tellerrand
https://www.google.com/design/spec/material-design/
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
http://www.lightningdesignsystem.com/
DESIGN LANGUAGE GUIDELINES
๏ Purpose: establish a design language for cohesive user
experience across a suite of products and services
๏ Audience: anyone creating user experiences for the
organization, mostly designers
๏ Can include: design principles, brand overlap, aesthetics, ux
principles, motion, etc
Style Guide Best Practices at Beyond Tellerrand
voiceandtone.com
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
styleguide.mailchimp.com
VOICE AND TONE GUIDELINES
๏ Purpose: establish and encourage a cohesive, appropriate
tone across the entire user experience
๏ Audience: content creators and editors, anyone writing copy
for the brand
๏ Can include: interface copy, marketing, documentation, blog
posts, legal, alerts, etc
Style Guide Best Practices at Beyond Tellerrand
http://www.economist.com/styleguide/
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
WRITING STYLE GUIDES
๏ Purpose: establish and encourage a cohesive writing style
across all properties
๏ Audience: content creators and editors, anyone writing copy
for the brand
๏ Can include: grammar, proper content structure, general
writing best practices
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
code block
.thisishowwedoit {
}
CSS SYNTAX GUIDELINES
code block
.this-is-how-we-do-it {
}
CSS SYNTAX GUIDELINES
code block
.thisIsHowWeDoIt {
}
CSS SYNTAX GUIDELINES
code block
.this__is__how__we__do—-it {
}
CSS SYNTAX GUIDELINES
code block
.- -...- - ..- - —— .. . ..—— — {
}
CSS SYNTAX GUIDELINES
https://github.com/styleguide
https://github.com/styleguide/javascript
https://github.com/styleguide/javascript
CODE STYLE GUIDES
๏ Purpose: establish code standards for teams to write more
cohesive, efficient, and maintainable code
๏ Audience: front-end developers, back-end developers, 3rd
party developers, summer interns, developers developers
developers
๏ Can include: development principles, HTML structure
guidelines, CSS architecture, syntax, best practices, JS style
and best practices, backend language syntax and best
practices
Style Guide Best Practices at Beyond Tellerrand
http://walmartlabs.github.io/web-style-guide
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
PATTERN LIBRARIES
๏ Purpose: establish and maintain an effective interface
design system to create consistent UIs, speed up
production, and create a watering hole for the team
๏ Audience: anyone touching the project: designers,
developers, project managers, product owners, etc
๏ Can include: global elements, typography, image types, lists,
navigation, blocks, media, animations, literally anything you
include in a UI
styleguides.io
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
MAKING PATTERN LIBRARIES HAPPEN
$ELL IT.
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
Consistency is one of the most powerful
usability principles: when things always
behave the same, users don't have to worry
about what will happen. Instead, they know
what will happen based on earlier experience.
-Jakob Nielson
http://www.nngroup.com/articles/top-10-mistakes-web-design/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
We just copied and pasted a pattern, changed a few
things, and in twenty minutes we had built a
system that was responsive; it looked great on
mobile and it was nice to look at. [The status page]
was one of those pages that not a lot of people will
see. We call them the dark corners.
-Federico Holgado
http://styleguides.io/podcast/federico-holgado/
By having a pattern you could actually use
that's already 95% of the way there, it brings up
the quality of everything so those dark corners
actually aren't so dark any more.
-Federico Holgado
http://styleguides.io/podcast/federico-holgado/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
Mostly designers will come up with rough
representations of where things might live without
going into too much detail because there's no
longer a need to do that work up front and we can
just tweak it in the browser afterwards.
-Ian Feather
http://styleguides.io/podcast/ian-feather/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
It is the common ground that designers and
developers are all seeking…and I find that a
style guide is really effective at providing
that common ground.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
Pattern libraries make what you change in
production a lot more easy to manage over the
long term; you're able to debug things more
effectively. You have a view into how your code
base is looking across a site versus having various
artifacts show up across hundreds of pages.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
๏ Useful reference
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
๏ Useful reference
๏ Future-friendly foundation
SHOW, DON’T TELL.
http://cssstats.com
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
http://bradfrostweb.com/blog/post/interface-inventory
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
ROUND UP THE TROOPS
1
Style Guide Best Practices at Beyond Tellerrand
PREPARE TO SCREENSHOT
2
http://bradfrost.com/blog/post/conducting-an-interface-inventory/
SCREENSHOT EXERCISE
3
INTERFACE INVENTORY CATEGORIES
๏ Global
๏ Image types
๏ Icons
๏ Navigation
๏ Forms
๏ Buttons
๏ Interactive Components
๏ Media
๏ Headings
๏ Blocks
๏ Lists
๏ 3rd party stuff
๏ Advertising
๏ Messaging
๏ Animation
๏ Colors
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
PRESENT FINDINGS
4
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
Style Guide Best Practices at Beyond Tellerrand
REGROUP & NEXT STEPS
5
๏ Documents your interface design patterns
๏ Points out inconsistencies
๏ Helps get buy-in from organization
๏ Establishes scope of work
๏ Is the genesis of a shared vocabulary
๏ Lays the groundwork for a future pattern library
INTERFACE INVENTORY
AND IF THE BOSS STILL SAYS NO,
DO IT ANYWAYS.
IN ORDER TO MAKE THE WHOLE,
YOU NEED TO MAKE THE PARTS.
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
special thanks to Wolfram Nagel, SETU GmbH
ATOMIC DESIGN
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
Style Guide Best Practices at Beyond Tellerrand
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ Your comprehensive interface design system
๏ A style guide starter kit
๏ A design toolkit (viewport resizer and other tools)
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
https://mustache.github.io/
Style Guide Best Practices at Beyond Tellerrand
MOLECULE GUTS
code block
<div class="block block-post">
<a href="{{ url }}">
<div class="b-img">
{{> atoms-thumb }}
</div>
<h3 class="b-title">{{ headline }}</h3>
<p class="b-excerpt">{{ excerpt }}</p>
</a>
</div>
BASIC INCLUDE
code block
{{> molecules-block-post }}
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
ORGANISM GUTS
code block
<header role="banner">
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
</header>
ORGANISM INCLUDE
code block
{{> organisms-header }}
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero-video }}
{{/ hero }}
<section>
{{# experience }}
{{> organisms-story-feature }}
{{/ experience }}
</section>
<section>
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}
Style Guide Best Practices at Beyond Tellerrand
CONTENT STRUCTURE ACTUAL CONTENT
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
PIPING IN REAL CONTENT
code block{
"title" : "Time Inc.",
"bodyClass": "home",
"hero" : {
"headline": "Moving People"
"img": {
"src": "/images/hero_beyonce.jpg",
"alt": "Beyonce"
}
}
patternlab.io
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
http://trentwalton.com/2011/07/14/content-choreography/
Style Guide Best Practices at Beyond Tellerrand
…OR DID THEY?
Style Guide Best Practices at Beyond Tellerrand
websitedesign &
development
style guidewebsitedesign &
development
style guide
websitedesign &
development
style guide
websitedesign &
development
design system
style guide
websitedesign &
development
style guide
design systemdesign &
development website
A style guide is an artifact of design process. A
design system is a living, funded product with
a roadmap & backlog, serving an ecosystem.
-Nathan Curtis
https://twitter.com/nathanacurtis/status/656829204235972608
MAKE IT MAINTAINABLE
YOU SEEK THE HOLY GRAIL.
http://rizzo.lonelyplanet.com/
style guide
design systemdesign &
development website
Pattern API
style guide
pattern labdesign &
development website
Grunt copy
CSS, JS, Patterns
MAKE IT CROSS-
DISCIPLINARY
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
MAKE IT APPROACHABLE
http://www.yelp.com/styleguide
http://purple.herokuapp.com
http://ux.mailchimp.com/patterns/
MAKE IT VISIBLE
When you place style guides behind constraints,
teams either take an outrageously long time to
get access, or they never get access.
-Nathan Curtis
http://styleguides.io/podcast/nathan-curtis
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
styleguides.io/examples.html
Style Guide Best Practices at Beyond Tellerrand
When I saw Salesforce’s style guide
I thought it was beautiful and it's
why I wanted to join this team.
-Jina Bolton
styleguides.io/podcast/jina-bolton
MAKE IT AGNOSTIC
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
WARNING:
NAMING THINGS IS
REALLY FREAKING HARD.
https://www.flickr.com/photos/131260238@N08/
Style Guide Best Practices at Beyond Tellerrand
Style Guide Best Practices at Beyond Tellerrand
MAKE IT CONTEXTUAL
Style Guide Best Practices at Beyond Tellerrand
MAKE IT LAST
http://www.google.com/design/spec/whats-new/whats-new.html
Style Guide Best Practices at Beyond Tellerrand
https://flic.kr/p/5YnE4z
Style Guide Best Practices at Beyond Tellerrand
atomicdesign.bradfrost.com
atomicdesign.bradfrost.com
ONLY
$10!!!
THANKS!@brad_frost

More Related Content

Viewers also liked

50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...
50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...
50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...Logo Design Guru
 
Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Ayman Sadiq
 
Beyond Measure, Erika Hall
Beyond Measure, Erika HallBeyond Measure, Erika Hall
Beyond Measure, Erika HallFuture Insights
 
Tell a Story! [Be the Batman]
Tell a Story! [Be the Batman]Tell a Story! [Be the Batman]
Tell a Story! [Be the Batman]Ayman Sadiq
 
24 Books You've Never Heard Of - But Will Change Your Life
24 Books You've Never Heard Of - But Will Change Your Life24 Books You've Never Heard Of - But Will Change Your Life
24 Books You've Never Heard Of - But Will Change Your LifeRyan Holiday
 
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping seasonDeloitte United States
 
Top 5 Deep Learning and AI Stories - October 6, 2017
Top 5 Deep Learning and AI Stories - October 6, 2017Top 5 Deep Learning and AI Stories - October 6, 2017
Top 5 Deep Learning and AI Stories - October 6, 2017NVIDIA
 
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017Carol Smith
 

Viewers also liked (12)

50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...
50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...
50 Color Palettes for Your Landscaping Company Logo: Inspiration from 50 Stat...
 
Marco Gold Standard
Marco Gold StandardMarco Gold Standard
Marco Gold Standard
 
Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!
 
Beyond Measure, Erika Hall
Beyond Measure, Erika HallBeyond Measure, Erika Hall
Beyond Measure, Erika Hall
 
Sketchnoting: 10 Tips to get Started
Sketchnoting: 10 Tips to get StartedSketchnoting: 10 Tips to get Started
Sketchnoting: 10 Tips to get Started
 
sungmin slide
sungmin slidesungmin slide
sungmin slide
 
Tell a Story! [Be the Batman]
Tell a Story! [Be the Batman]Tell a Story! [Be the Batman]
Tell a Story! [Be the Batman]
 
24 Books You've Never Heard Of - But Will Change Your Life
24 Books You've Never Heard Of - But Will Change Your Life24 Books You've Never Heard Of - But Will Change Your Life
24 Books You've Never Heard Of - But Will Change Your Life
 
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
 
Top 5 Deep Learning and AI Stories - October 6, 2017
Top 5 Deep Learning and AI Stories - October 6, 2017Top 5 Deep Learning and AI Stories - October 6, 2017
Top 5 Deep Learning and AI Stories - October 6, 2017
 
The AI Rush
The AI RushThe AI Rush
The AI Rush
 
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
 

More from Brad Frost

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!Brad Frost
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmetBrad Frost
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best PracticesBrad Frost
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To BullshitBrad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)Brad Frost
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionBrad Frost
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Brad Frost
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBrad Frost
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)Brad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile WebBrad Frost
 

More from Brad Frost (15)

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
 
Atomic design
Atomic designAtomic design
Atomic design
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 

Recently uploaded

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Style Guide Best Practices at Beyond Tellerrand