SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Designing Across
    Devices
  We’ve got it covered
Overview
• CSS3 Gallery Walk
Lecture
• Internet Accessible Devices
• Designing for Mobile
• Designing for Laptops
• Big Screens
• Designing Web Sites for Print
Lab
Next week ... Progressive design



04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Internet Accessible Devices
• Screen readers
• Old school phones
• Smart phones
• Tablets
• Netbooks
• Laptops
• Desktops
• Gaming devices, tvs, cars
• Others?

04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Internet Accessible Devices




04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Designing for Mobile


 • Context is King
 • Speed Matters
 • Size Restrictions
 • Device abilities
 • Examples




04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Designing for Laptops




         • Netbook v. Laptop                • Variety of Browsers
         • Varied Screen Size               • Wi-Fi
         • Varied Window Size               • Don’t worry too much


04 - Designing Across Devices   Advanced Web Design         http://dabrook.org/
Designing for Big Screens



 • Context Assumptions
 • More Real Estate
 • Varied Browsers
 • Design Trends




04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Designing for Print



 • Context of Print
 • What to (not) Include
 • Media Type
 • Tips & Tricks




04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/
Homework

Design versions of your personal web site for the following
devices:
• Smart phones
• Laptop
• Big Screen
• Print




04 - Designing Across Devices   Advanced Web Design   http://dabrook.org/

Weitere ähnliche Inhalte

Andere mochten auch

Introduction to Javascript - College Lecture
Introduction to Javascript - College LectureIntroduction to Javascript - College Lecture
Introduction to Javascript - College LectureZac Gordon
 
Learning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & CustomizationLearning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & CustomizationZac Gordon
 
Introduction to jQuery - College Lecture
Introduction to jQuery - College LectureIntroduction to jQuery - College Lecture
Introduction to jQuery - College LectureZac Gordon
 
Server Side Programming
Server Side Programming Server Side Programming
Server Side Programming Zac Gordon
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptZac Gordon
 
Introduction to CMS
Introduction to CMSIntroduction to CMS
Introduction to CMSZac Gordon
 

Andere mochten auch (7)

Introduction to Javascript - College Lecture
Introduction to Javascript - College LectureIntroduction to Javascript - College Lecture
Introduction to Javascript - College Lecture
 
Learning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & CustomizationLearning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & Customization
 
Introduction to jQuery - College Lecture
Introduction to jQuery - College LectureIntroduction to jQuery - College Lecture
Introduction to jQuery - College Lecture
 
Server Side Programming
Server Side Programming Server Side Programming
Server Side Programming
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
 
Introduction to CMS
Introduction to CMSIntroduction to CMS
Introduction to CMS
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 

Ähnlich wie Designing Across Web Devices - College Course

Beyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsBeyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsWebvanta
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile DevicesOxonDigital
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and HowJudi Wunderlich
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
Designing and Theming Drupal for Mobile Devices
Designing and Theming Drupal for Mobile DevicesDesigning and Theming Drupal for Mobile Devices
Designing and Theming Drupal for Mobile DevicesDavid Lanier
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your websiteMahmoud Farrag
 
Browsers, search engines, and apps
Browsers, search engines, and appsBrowsers, search engines, and apps
Browsers, search engines, and appswanda_wagner
 
Web Design Basics.pptx
Web Design Basics.pptxWeb Design Basics.pptx
Web Design Basics.pptxBalasundaramSr
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of WebSabir Haque
 
Reshaping SharePoint for Evolving Internet Devices
Reshaping SharePoint for Evolving Internet DevicesReshaping SharePoint for Evolving Internet Devices
Reshaping SharePoint for Evolving Internet DevicesEric Overfield
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski
 
Cathryn allen assignment4
Cathryn allen assignment4Cathryn allen assignment4
Cathryn allen assignment4dance314
 
Branding SharePoint for Evolving Internet Devices
Branding SharePoint for Evolving Internet DevicesBranding SharePoint for Evolving Internet Devices
Branding SharePoint for Evolving Internet DevicesEric Overfield
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignMaria D'Amato
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyFour Kitchens
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites designMarwa Abdelgawad
 

Ähnlich wie Designing Across Web Devices - College Course (20)

Beyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsBeyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and Tablets
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
Drupal & Mobile
Drupal & MobileDrupal & Mobile
Drupal & Mobile
 
Designing and Theming Drupal for Mobile Devices
Designing and Theming Drupal for Mobile DevicesDesigning and Theming Drupal for Mobile Devices
Designing and Theming Drupal for Mobile Devices
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
Browsers, search engines, and apps
Browsers, search engines, and appsBrowsers, search engines, and apps
Browsers, search engines, and apps
 
Web Design Basics.pptx
Web Design Basics.pptxWeb Design Basics.pptx
Web Design Basics.pptx
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
 
Reshaping SharePoint for Evolving Internet Devices
Reshaping SharePoint for Evolving Internet DevicesReshaping SharePoint for Evolving Internet Devices
Reshaping SharePoint for Evolving Internet Devices
 
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)
 
Cathryn allen assignment4
Cathryn allen assignment4Cathryn allen assignment4
Cathryn allen assignment4
 
Branding SharePoint for Evolving Internet Devices
Branding SharePoint for Evolving Internet DevicesBranding SharePoint for Evolving Internet Devices
Branding SharePoint for Evolving Internet Devices
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
 
Responsive web - CC FE & UX
Responsive web -  CC FE & UXResponsive web -  CC FE & UX
Responsive web - CC FE & UX
 
CCS PPT 10.pptx
CCS PPT 10.pptxCCS PPT 10.pptx
CCS PPT 10.pptx
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 

Kürzlich hochgeladen

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
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
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
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
 
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
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 

Kürzlich hochgeladen (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
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
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
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
 
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...
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 

Designing Across Web Devices - College Course

  • 1. Designing Across Devices We’ve got it covered
  • 2. Overview • CSS3 Gallery Walk Lecture • Internet Accessible Devices • Designing for Mobile • Designing for Laptops • Big Screens • Designing Web Sites for Print Lab Next week ... Progressive design 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 3. Internet Accessible Devices • Screen readers • Old school phones • Smart phones • Tablets • Netbooks • Laptops • Desktops • Gaming devices, tvs, cars • Others? 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 4. Internet Accessible Devices 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 5. Designing for Mobile • Context is King • Speed Matters • Size Restrictions • Device abilities • Examples 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 6. Designing for Laptops • Netbook v. Laptop • Variety of Browsers • Varied Screen Size • Wi-Fi • Varied Window Size • Don’t worry too much 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 7. Designing for Big Screens • Context Assumptions • More Real Estate • Varied Browsers • Design Trends 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 8. Designing for Print • Context of Print • What to (not) Include • Media Type • Tips & Tricks 04 - Designing Across Devices Advanced Web Design http://dabrook.org/
  • 9. Homework Design versions of your personal web site for the following devices: • Smart phones • Laptop • Big Screen • Print 04 - Designing Across Devices Advanced Web Design http://dabrook.org/

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. How to next week ....\n
  6. How to next week ....\n
  7. How to next week ....\n
  8. How to next week ....\n
  9. \n