SlideShare une entreprise Scribd logo
1  sur  61
Télécharger pour lire hors ligne
Beyond Responsive Web Design
   “...let a hundred devices bloom...”
Responsive web design?
Responsive Web Design

  One HTML file
+ multiple devices and displays
______________________________
  a range of custom experiences
Responsive Web Design

In keeping with the fundamental ideas of the Web:

     Access by anyone, on any device

     Separation of content and presentation

     Progressive enhancement /
     Graceful degradation
ETHAN MARCOTTE (@BEEP), “ON BEING RESPONSIVE”


“A responsive design is
composed of three
distinct parts:”
1. A flexible grid.
Flexible / fluid grids
Break up the site’s layout into modules
that can be moved and resized as
needed
Size modules proportionately using ems
or percentages (or both)
target ÷ context = result
1. A flexible grid.

2. Flexible images. Or more specifically,
images that work in a flexible context.
Flexible / fluid images

overflow: hidden
max-width: 100%
JS solutions to load an appropriately-
sized image
1. A flexible grid.

2. Flexible images. Or more specifically,
images that work in a flexible context.

3. Media queries.
Media queries
Ever make a print stylesheet before?
<link rel=”stylesheet”
href=”#” media=”screen” />

<link rel=”stylesheet”
href=”#” media=”print” />
Media queries
More in-depth rules for when styles apply
<link rel=”stylesheet” href=”#”

 media=”screen and (min-device-width: 640px)” />

Can be used within a stylesheet too
 @media screen and (orientation:landscape) {

     #content { ... }

 }
Media queries

height          aspect-ratio          resolution

width           device-aspect-ratio   scan

device-height   color                 grid

device-width    color-index

orientation     monochrome
“Responsive” redesigns
COLLY.COM
DESKTOP > NARROW > MOBILE
INFORMATIONARCHITECTS.JP
WIDE DESKTOP > DESKTOP > MOBILE
“Switchy” designs
“Switchy” designs
 Not responsive designs
FLUID GRID
FLUID IMAGES
MEDIA QUERIES
COLLY.COM
DESKTOP > NARROW > MOBILE
FLUID GRID
FLUID IMAGES?
MEDIA QUERIES
INFORMATIONARCHITECTS.JP
WIDE DESKTOP > DESKTOP > MOBILE
Media queries are not enough
Why not?
“Pinch-to-zoom
makes any site usable
on iPhone/Android”
“Viewport browsing
still works on
Blackberry”
“Only people with
smartphones use the
mobile web anyways”
Really?
A bit of perspective...
IPHONE SOLVES ALL PROBLEMS?
IPHONE IS JUST A DROP IN THE MOBILE OCEAN
WEBKIT SOLVES ALL PROBLEMS?
WEBKIT != FULL SUPPORT FOR MEDIA QUERIES
PHONE-NATIVE BROWSERS SOLVE ALL PROBLEMS?
PROXY BROWSERS CAN ACT LIKE DESKTOP BROWSERS
TABLETS SOLVE ALL PROBLEMS?
INSANELY TINY TEXT WHEN MEDIA QUERIES FAIL
Cold, hard facts
World population, 2010: 6.9 billion
      1.96 billion global Internet
      connections (28.7% of the world:
      42% Asia, 24% Europe, 13% NA)
      5.1 billion mobile subscriptions
      (over 4 billion use 2G GSM)

SOURCES: INTERNETWORLDSTATS.COM, BUDDE.COM.AU
1.3 billion mobile Internet users
Almost 1/3 of Internet users
access only via mobile (including
almost 25% of U.S. users)
Only 21% of mobile users have 3G
access
1.96 billion Internet connections...
minus 1.3 billion mobile users...
equals about 500 million
broadband Internet connections
worldwide
WORLDWIDE MOBILE DEVICE SALES
APPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.
The Jakarta effect
The Jakarta effect
Capital of Indonesia, ~9.6 million
people
$100/month ADSL vs.
~$17/month unlimited mobile data
Proximity to China = cheap Shanzhai
(“bandit”) phones
The Jakarta effect

~2 million BlackBerry users
Largest Twitter user base worldwide
#2 Opera Mini user base worldwide
#3 Facebook user base worldwide
So what do we do?
- BRYAN RIEGER, “RETHINKING THE MOBILE WEB”
Desktop before mobile is backward!
Mobile devices are less powerful than
desktops
Mobile bandwidth is more expensive
So why are we sending more (and
more complicated) code for mobile
than desktop?
Mobile First

Mobile site + media queries =
desktop site
Progressive enhancement
No support for media queries
is the first media query
Media queries don’t work on most
mobile devices
Most desktop browsers support media
queries (and are powerful enough to
use them without slowing down)
Old desktop browser = less
complicated site!
Avoid unnecessary data transfer


NYTimes.com mobile:
~970KB
Avoid unnecessary data transfer


Guardian.co.uk mobile:
~80KB
Avoid unnecessary data transfer

display: none still uses bandwidth
Load images as progressive
enhancement instead through media-
queried stylesheets
Use JS for progressive enhancement only

Mobile devices are less powerful
Animation takes a lot of processing
Frameworks are big downloads
Use JS for progressive enhancement only

So, avoid JavaScript for mobile
whenever possible
Use CSS3 animation instead
Amazon, FB, and Google all launched
with no JS in their original designs
Testing!
OPERA MINI



UC WEB
Device-specific emulators
Nokia Symbian
RIM Blackberry
Palm webOS
Windows Mobile
iPhone SDK
Android SDK
Who gets it right?
HICKSDESIGN.CO.UK
SUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)
STPAULSSCHOOL.ORG.UK
THREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)
YIIBU.COM
WIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)
HUFFDUFFER.COM
TWO LAYOUTS (THREE VARIATIONS)
Limitations
Conditional HTML

Image size overhead

Conditional JS behavior

Capabilities detection
“The choice is not between using
media queries and creating a
dedicated mobile site; the choice
is between using media queries
and doing nothing at all.”

       - Jeremy Keith, “A responsive mind”
Resources
Volkside Wirify
filamentgroup’s “responsive-images”
plugin
Sencha Animator
iAd Producer
Websites

Yiibu (and SlideShare page)
A List Apart
Unstoppable Robot Ninja
Mobiforge
Thanks!
    Kevin Zurawel
     @kzurawel
arborwebsolutions.com

Contenu connexe

Tendances

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignTung Dang
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixSara Cannon
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Kate Walser
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Tom Hermans
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media QueryNeev Technologies
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDave Olsen
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Aaron Gustafson
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Aaron Gustafson
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and VideoJason Grigsby
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 

Tendances (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media Query
 
Ui and ux principles
Ui and ux principlesUi and ux principles
Ui and ux principles
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 

En vedette

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
Responsive web design
Responsive web designResponsive web design
Responsive web designthu nguyen
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)arborwebsolutions
 
How Marketo Uses Marketo
How Marketo Uses MarketoHow Marketo Uses Marketo
How Marketo Uses MarketoMarketo
 
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize Results
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize ResultsWork Hacks - Productivity Hacks to Optimize Your Time & Maximize Results
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize ResultsJames Christopher
 
The Pavallion Dharamshala by HPCA
The Pavallion Dharamshala by HPCAThe Pavallion Dharamshala by HPCA
The Pavallion Dharamshala by HPCASanjay Kumar Thakur
 
Reformas Loema – ¿Cómo trabajamos?
Reformas Loema – ¿Cómo trabajamos?Reformas Loema – ¿Cómo trabajamos?
Reformas Loema – ¿Cómo trabajamos?Reformas Loema
 
BGB Construction (Pty) Ltd Profile
BGB Construction (Pty) Ltd   ProfileBGB Construction (Pty) Ltd   Profile
BGB Construction (Pty) Ltd ProfileQuintin R. Beukes
 
DESBRAVADORES INSTRUTOR DE ESPECIALIDADES
DESBRAVADORES INSTRUTOR DE ESPECIALIDADESDESBRAVADORES INSTRUTOR DE ESPECIALIDADES
DESBRAVADORES INSTRUTOR DE ESPECIALIDADESDAVID HENRIQUE
 

En vedette (14)

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 
Meet Charlene
Meet CharleneMeet Charlene
Meet Charlene
 
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
 
How Marketo Uses Marketo
How Marketo Uses MarketoHow Marketo Uses Marketo
How Marketo Uses Marketo
 
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize Results
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize ResultsWork Hacks - Productivity Hacks to Optimize Your Time & Maximize Results
Work Hacks - Productivity Hacks to Optimize Your Time & Maximize Results
 
The Pavallion Dharamshala by HPCA
The Pavallion Dharamshala by HPCAThe Pavallion Dharamshala by HPCA
The Pavallion Dharamshala by HPCA
 
Reformas Loema – ¿Cómo trabajamos?
Reformas Loema – ¿Cómo trabajamos?Reformas Loema – ¿Cómo trabajamos?
Reformas Loema – ¿Cómo trabajamos?
 
BGB Construction (Pty) Ltd Profile
BGB Construction (Pty) Ltd   ProfileBGB Construction (Pty) Ltd   Profile
BGB Construction (Pty) Ltd Profile
 
DESBRAVADORES INSTRUTOR DE ESPECIALIDADES
DESBRAVADORES INSTRUTOR DE ESPECIALIDADESDESBRAVADORES INSTRUTOR DE ESPECIALIDADES
DESBRAVADORES INSTRUTOR DE ESPECIALIDADES
 

Similaire à Beyond Responsive Web Design

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive DesignNexer Digital
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive DesignLiam Richardson
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, AmsterdamDave Martin
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Henny Swan
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Problems in Mobile Development
Problems in Mobile DevelopmentProblems in Mobile Development
Problems in Mobile DevelopmentAmber Makeyev
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingVisual Engineering
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for MobilityScotty Logan
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With DrupalJesper Wøldiche
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectCantarus
 
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusResponsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusInternet World
 
Basic Responsive Theming - Somedutta Ghosh
Basic Responsive Theming - Somedutta GhoshBasic Responsive Theming - Somedutta Ghosh
Basic Responsive Theming - Somedutta GhoshDrupal Camp Delhi
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Kevin Bruce
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 

Similaire à Beyond Responsive Web Design (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Responding Responsively
Responding ResponsivelyResponding Responsively
Responding Responsively
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Problems in Mobile Development
Problems in Mobile DevelopmentProblems in Mobile Development
Problems in Mobile Development
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With Drupal
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports Direct
 
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, CantarusResponsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus
 
Basic Responsive Theming - Somedutta Ghosh
Basic Responsive Theming - Somedutta GhoshBasic Responsive Theming - Somedutta Ghosh
Basic Responsive Theming - Somedutta Ghosh
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 

Dernier

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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
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
 
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
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
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
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Dernier (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
 
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...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
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...
 
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
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
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
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Beyond Responsive Web Design

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n