SlideShare a Scribd company logo
1 of 104
Download to read offline
RESPONSIVE DESIGN
SARA CANNON
                          Artist, Designer, & WordPress
                          Developer In Birmingham, AL

                          Co-founder / Creative Director
                          Range




sara-cannon.com   @saracannon
THE FUTURE OF MOBILE
THE FUTURE OF MOBILE
      THE WEB
IN THE YEAR

 2015
   2015
The total number of
people using the web on
mobile devices is set to
surpass desktops by 2015.


                     INTERNATIONAL DATA CORPORATION (IDC)
            http://www.idc.com/getdoc.jsp?containerId=prUS23028711
2007   2009      2011   2013     2015


       DESKTOP          MOBILE
2007   2009      2011   2013     2015


       DESKTOP          MOBILE
THE MOBILE WEB
THE WEB
WHAT IS THE MOBILE WEB?
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
MOBILE SHOULD
 NEVER BE AN
AFTERTHOUGHT
CONTENT
WHAT ABOUT SEPARATE MOBILE SITES?
m.facebook.com
WHAT ABOUT MOBILE APPS?
WHAT ABOUT MOBILE THEMES?
“   Rather than tailoring
    disconnected designs to each of
    an ever-increasing number of
    web devices, we can treat them
    as facets of the same experience.



                         - ETHAN MARCOTTE

                      alistapart.com/articles/responsive-web-design
RESPONSIVE WEB DESIGN
HicksDesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
bostonglobe.com
bostonglobe.com
bostonglobe.com
bostonglobe.com
pelicanfly.co.uk
pelicanfly.co.uk
pelicanfly.co.uk
pelicanfly.co.uk
morehazards.com
morehazards.com
morehazards.com
morehazards.com
foodsense.is
foodsense.is
foodsense.is
foodsense.is
HOW DO WE BECOME RESPONSIVE?
1. ADAPTIVE GRIDS, IMAGES, & MEDIA
         2. MEDIA QUERIES
   3. TESTING / CRYING TWEAKING
             4. ?????
             5. PROFIT!
1. ADAPTIVE GRIDS,
 IMAGES, & MEDIA
FLEXIBLE GRIDS

alistapart.com/articlesfluidgrids

      by Ethan Marcotte
GRID FRAMEWORKS




lessframework.com        columnal.com
GRID FRAMEWORKS




cssgrid.net          getskeleton.com
%
TARGET ÷ CONTEXT = RESULT
            940




      720            220
TARGET ÷ CONTEXT = RESULT
            940

            100%

      720            220

 76.5957447%        23.40425535%
FLEXIBLE MEDIA
“   The toughest challenge in
    implementing the responsive
    bits was fluid media.




                - LANCE WILLETT, WORDPRESS.COM
MEDIA SOLUTIONS




netmagazine.com/tutorials/        fitvidjs.com
 create-fluid-width-videos

                    by Chris Coyier
MEDIA SOLUTIONS




flex.madebymufffin.com          fittext.js
FLEXIBLE IMAGES
MAX WIDTH: 100%
ADAPTIVE IMAGES
filamentgroup.com/lab/responsive_images_experimenting
           _with_context_aware_image_sizing
adaptive-images.com
viewportindustries.com/blog/automatic-responsive-images-in-wordpress
2G IS THE NEW DIAL-UP
2007   2009      2011   2013     2015


       DESKTOP          MOBILE
THE MOBILE WEB
CONNECTION SPEED




IMAGE SIZE
CONNECTION SPEED




IMAGE SIZE
image by Geoff Teehan
EVERYTHING IS A
   TRADEOFF
retina.js
NETWORK LINK CONDITIONER
2. MEDIA QUERIES
CSS3-MEDIAQUERIES.JS
code.google.com/p/css3-mediaqueries-js



 css3-mediaqueries.js is a JavaScript library to make
 IE 5+, Firefox 1+ and Safari 2 transparently parse, test
 and apply CSS3 Media Queries
MOBILE FIRST
3. TESTING / CRYING /
      TWEAKING
LIMIT YOUR RESOURCES
EVERYTHING IS A
   TRADEOFF
RESOURCES
alistapart.com/articles/fluidgrids
alistapart.com/articles/responsive-web-design
alistapart.com/articles/responsive-web-design
unstoppablerobotninja.com/entry/fluid-images/
mediaqueri.es
smashingmagazine.com/2011/07/22/responsive-web-design-
        techniques-tools-and-design-strategies
zomigi.com/blog/essential-considerations-for-crafting-
               quality-media-queries/
palantir.net/blog/scalable-navigation-patterns-
            responsive-web-design
designshack.net/articles/css/sass-and-media-queries-
             what-you-can-and-cant-do
responsive.is
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
“ Our work is never over.
                  - DAFT PUNK

More Related Content

What's hot

JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptLaurence Svekis ✔
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student Abhishekchauhan863165
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designingAanand Bohara
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Mean full stack development
Mean full stack developmentMean full stack development
Mean full stack developmentScott Lee
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSSSquareboat
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop Ahmed rebai
 

What's hot (20)

HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScript
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Mean full stack development
Mean full stack developmentMean full stack development
Mean full stack development
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
 
Rwd ppt
Rwd pptRwd ppt
Rwd ppt
 
Javascript
JavascriptJavascript
Javascript
 

Viewers also liked

Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignThe Media Consortium
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)Maximizing Sales from eCommerce Sites (Forte Consultancy Group)
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)Berkin Ozmen
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrapZunair Sagitarioux
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
Artesanias de guaranda
Artesanias de guarandaArtesanias de guaranda
Artesanias de guarandajta100
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3John Bertucci
 
Introduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design ApplicationIntroduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design ApplicationeXo Platform
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive AgePon Kattera
 
An investigation into the use of twitter by lecturers and students to support...
An investigation into the use of twitter by lecturers and students to support...An investigation into the use of twitter by lecturers and students to support...
An investigation into the use of twitter by lecturers and students to support...Ed de Quincey
 
Responsive Web Design Workshop
Responsive Web Design WorkshopResponsive Web Design Workshop
Responsive Web Design WorkshopStewart Curry
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffesascha assbach
 

Viewers also liked (20)

Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web Design
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)Maximizing Sales from eCommerce Sites (Forte Consultancy Group)
Maximizing Sales from eCommerce Sites (Forte Consultancy Group)
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Artesanias de guaranda
Artesanias de guarandaArtesanias de guaranda
Artesanias de guaranda
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3
 
Introduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design ApplicationIntroduce Bootstrap 3 to Develop Responsive Design Application
Introduce Bootstrap 3 to Develop Responsive Design Application
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
 
An investigation into the use of twitter by lecturers and students to support...
An investigation into the use of twitter by lecturers and students to support...An investigation into the use of twitter by lecturers and students to support...
An investigation into the use of twitter by lecturers and students to support...
 
materi webdesign - CSS
materi webdesign - CSSmateri webdesign - CSS
materi webdesign - CSS
 
Galeria de fotos
Galeria de fotosGaleria de fotos
Galeria de fotos
 
Galeria de fotos2
Galeria de fotos2Galeria de fotos2
Galeria de fotos2
 
Teaser Proposal
Teaser ProposalTeaser Proposal
Teaser Proposal
 
Responsive Web Design Workshop
Responsive Web Design WorkshopResponsive Web Design Workshop
Responsive Web Design Workshop
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 

Similar to Responsive Design

Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Aaron Gustafson
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJen Simmons
 
[Mobile Future] Sofia Svanteson, Ocean Observations
[Mobile Future] Sofia Svanteson, Ocean Observations[Mobile Future] Sofia Svanteson, Ocean Observations
[Mobile Future] Sofia Svanteson, Ocean ObservationsMobilbusiness
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingVisual Engineering
 
"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and ControversyBlend Interactive
 
The mobile landscape - Do you really need an app?
The mobile landscape - Do you really need an app?The mobile landscape - Do you really need an app?
The mobile landscape - Do you really need an app?Valtech UK
 
The mobile landscape london 2012
The mobile landscape london 2012The mobile landscape london 2012
The mobile landscape london 2012Mathias Strandberg
 
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and ControversyAdaptive: Content, Context, and Controversy
Adaptive: Content, Context, and ControversyKaren McGrane
 
The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013Mathias Strandberg
 
The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?Valtech UK
 
Julie Mckenzie-project4-fwd
Julie Mckenzie-project4-fwdJulie Mckenzie-project4-fwd
Julie Mckenzie-project4-fwdmckenzjules
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Lee Roberson
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Atwix
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web FrameworksMatt Raible
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the WebYiannis Konstantakopoulos
 
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
 

Similar to Responsive Design (20)

A Future Friendly Web
A Future Friendly WebA Future Friendly Web
A Future Friendly Web
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesignJensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
 
[Mobile Future] Sofia Svanteson, Ocean Observations
[Mobile Future] Sofia Svanteson, Ocean Observations[Mobile Future] Sofia Svanteson, Ocean Observations
[Mobile Future] Sofia Svanteson, Ocean Observations
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 
"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy"Adaptive Content, Context, and Controversy
"Adaptive Content, Context, and Controversy
 
The mobile landscape - Do you really need an app?
The mobile landscape - Do you really need an app?The mobile landscape - Do you really need an app?
The mobile landscape - Do you really need an app?
 
The mobile landscape london 2012
The mobile landscape london 2012The mobile landscape london 2012
The mobile landscape london 2012
 
Adaptive: Content, Context, and Controversy
Adaptive: Content, Context, and ControversyAdaptive: Content, Context, and Controversy
Adaptive: Content, Context, and Controversy
 
The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013
 
The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?
 
Julie Mckenzie-project4-fwd
Julie Mckenzie-project4-fwdJulie Mckenzie-project4-fwd
Julie Mckenzie-project4-fwd
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
 
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
 

More from Sara Cannon

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source CreativitySara Cannon
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessSara Cannon
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limitSara Cannon
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftSara Cannon
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisSara Cannon
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web DesignSara Cannon
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Sara Cannon
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNSara Cannon
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressSara Cannon
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern WebSara Cannon
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographySara Cannon
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPressSara Cannon
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonSara Cannon
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the WebSara Cannon
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixSara Cannon
 

More from Sara Cannon (20)

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To Success
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limit
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your Craft
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. Louis
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
 
Smart Design
Smart Design Smart Design
Smart Design
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 
IconFonts
IconFontsIconFonts
IconFonts
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web Typography
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPress
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
 

Recently uploaded

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 

Responsive Design