SlideShare a Scribd company logo
1 of 29
HTML and Responsive Design
Why is this so important
for users and content producers?
First, any questions?

http://bit.ly/html_css_checklist
All is explained herein.
Responsive design
• Why?
• There are many devices (phones, tablets,
laptops, desktops, giant TV screens)
• Many delivery applications
– Not only Firefox, Chrome, Safari, IE, Opera
– Also old browser versions that do not support
HTML and some CSS techniques

• Orientation: vertical or horizontal?
The viewport meta tag
<meta name="viewport"
content="width=device-width,
initial-scale=1">
• width can be specified in pixels; the value device-width
detects the width of whatever device the user is using
• initial-scale=1 means no zooming will be applied
• Not recommended: Adding maximum-scale=1 means the
users cannot zoom (this may be bad for some content)
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewportmeta-tag/
thelensnola.org
thelensnola.org
Boston Globe
Boston Globe
Boston Globe
The design is a little less successful
when we turn the iPhone sideways
(landscape mode).

Boston Globe
This information graphic (about
hockey brain injuries) is much more
successful on the iPhone.

Boston Globe
You can even zoom in on individual items
in the graphic.

Boston Globe
Using multiple CSS stylesheets
<link rel="stylesheet" media="screen and (maxdevice-width: 900px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (-webkitdevice-pixel-ratio: 1.5)" href="css/mobile.css">

• Making a separate stylesheet for mobile devices (anything
with a smaller screen) is another option.
• “The most important task for the mobile.css … is to reset the
website width and main content wrapping from the
hardcoded centered column to something spreading across
the whole mobile screen width.”
http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-mediaqueries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-andhtml5-part-5/
Coding flexible images
img { max-width: 100%; padding: 10px 20px; }

• However, if you enclose the image in a fixed-width wrapper
div, the image will not automatically flex this way.
• Web designers have to make choices.
• They have to know what their choices are.

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Note this article is from 2011. Always check for latest updates to design best practices.
Frameworks
• Choosing and learning a framework takes time
• It’s well worth it for people who design lots of websites, or if
you have to create a new, large website
• Frameworks that have responsive design “baked in” can save
the designer from reinventing the wheel
• http://webexpedition18.com/articles/responsive-cssframeworks/
• http://www.vermilion.com/news/articles/2012/10/22/compa
ring-responsive-css-frameworks-bootstrap-foundation-andskeleton
getskeleton.com
getskeleton.com
getskeleton.com
unsemantic.com
“Django is a framework that makes it easy to build big, robust web
applications in the programming language Python.”
Tips and best practices to develop
responsive websites
http://www.catswhocode.com/blog/tips-and-best-practices-todevelop-responsible-websites
(This might be the most helpful article for beginners.
And it’s short!)
HTML and Responsive Design
Presentation by Mindy McAdams
[February 2014]

More Related Content

What's hot

Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
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!
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 

What's hot (20)

Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
CSS
CSSCSS
CSS
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Css3
Css3Css3
Css3
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Web design basics
Web design basicsWeb design basics
Web design basics
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css
CssCss
Css
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 

Similar to HTML and Responsive Design

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawMeet Magento Spain
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignMelanie Burger
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap Creative
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksGautam Krishnan
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference
 
Bootstrap basics.pptx of web design responsive design
Bootstrap basics.pptx of web design responsive designBootstrap basics.pptx of web design responsive design
Bootstrap basics.pptx of web design responsive designjoby7
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
What are the Steps involved in Making WordPress.pptx
What are the Steps involved in Making WordPress.pptxWhat are the Steps involved in Making WordPress.pptx
What are the Steps involved in Making WordPress.pptxWordpress India
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101FITC
 

Similar to HTML and Responsive Design (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book Sample
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
Bootstrap basics.pptx of web design responsive design
Bootstrap basics.pptx of web design responsive designBootstrap basics.pptx of web design responsive design
Bootstrap basics.pptx of web design responsive design
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
What are the Steps involved in Making WordPress.pptx
What are the Steps involved in Making WordPress.pptxWhat are the Steps involved in Making WordPress.pptx
What are the Steps involved in Making WordPress.pptx
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 

More from Mindy McAdams

Multimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the ClassroomMultimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the ClassroomMindy McAdams
 
Summary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshopSummary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshopMindy McAdams
 
U.S. j-schools and digital skills
U.S. j-schools and digital skills U.S. j-schools and digital skills
U.S. j-schools and digital skills Mindy McAdams
 
New skill sets for journalism
New skill sets for journalismNew skill sets for journalism
New skill sets for journalismMindy McAdams
 
Journalism blogs: An introduction
Journalism blogs: An introduction Journalism blogs: An introduction
Journalism blogs: An introduction Mindy McAdams
 
Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13Mindy McAdams
 
Journalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not NewspapersJournalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not NewspapersMindy McAdams
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOMMindy McAdams
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web DesignMindy McAdams
 
Learning Python - Week 4
Learning Python - Week 4 Learning Python - Week 4
Learning Python - Week 4 Mindy McAdams
 
Learning Python - Week 2
Learning Python - Week 2Learning Python - Week 2
Learning Python - Week 2Mindy McAdams
 
Learning Python - Week 1
Learning Python - Week 1Learning Python - Week 1
Learning Python - Week 1Mindy McAdams
 
Freedom of Speech - Louis Brandeis
Freedom of Speech - Louis BrandeisFreedom of Speech - Louis Brandeis
Freedom of Speech - Louis BrandeisMindy McAdams
 
Networked Information Economy / Benkler
Networked Information Economy / BenklerNetworked Information Economy / Benkler
Networked Information Economy / BenklerMindy McAdams
 

More from Mindy McAdams (20)

Just Enough Code
Just Enough CodeJust Enough Code
Just Enough Code
 
Multimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the ClassroomMultimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the Classroom
 
Summary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshopSummary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshop
 
Crowdsourcing
CrowdsourcingCrowdsourcing
Crowdsourcing
 
U.S. j-schools and digital skills
U.S. j-schools and digital skills U.S. j-schools and digital skills
U.S. j-schools and digital skills
 
New skill sets for journalism
New skill sets for journalismNew skill sets for journalism
New skill sets for journalism
 
Journalism blogs: An introduction
Journalism blogs: An introduction Journalism blogs: An introduction
Journalism blogs: An introduction
 
Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13
 
Journalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not NewspapersJournalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not Newspapers
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Beginning jQuery
Beginning jQueryBeginning jQuery
Beginning jQuery
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
Learning Python - Week 4
Learning Python - Week 4 Learning Python - Week 4
Learning Python - Week 4
 
Learning Python - Week 2
Learning Python - Week 2Learning Python - Week 2
Learning Python - Week 2
 
Learning Python - Week 1
Learning Python - Week 1Learning Python - Week 1
Learning Python - Week 1
 
Learning Python
Learning PythonLearning Python
Learning Python
 
Freedom of Speech - Louis Brandeis
Freedom of Speech - Louis BrandeisFreedom of Speech - Louis Brandeis
Freedom of Speech - Louis Brandeis
 
Networked Information Economy / Benkler
Networked Information Economy / BenklerNetworked Information Economy / Benkler
Networked Information Economy / Benkler
 

Recently uploaded

Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Denish Jangid
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticspragatimahajan3
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryEugene Lysak
 
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxCapitolTechU
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfQucHHunhnh
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45MysoreMuleSoftMeetup
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
The Ultimate Guide to Social Media Marketing in 2024.pdf
The Ultimate Guide to Social Media Marketing in 2024.pdfThe Ultimate Guide to Social Media Marketing in 2024.pdf
The Ultimate Guide to Social Media Marketing in 2024.pdfdm4ashexcelr
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfbu07226
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxjmorse8
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptxmansk2
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptxmanishaJyala2
 
factors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxfactors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxSanjay Shekar
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...Nguyen Thanh Tu Collection
 
Mbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptxMbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptxnuriaiuzzolino1
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff17thcssbs2
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfaedhbteg
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdfVikramadityaRaj
 

Recently uploaded (20)

Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
“O BEIJO” EM ARTE .
“O BEIJO” EM ARTE                       .“O BEIJO” EM ARTE                       .
“O BEIJO” EM ARTE .
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
The Ultimate Guide to Social Media Marketing in 2024.pdf
The Ultimate Guide to Social Media Marketing in 2024.pdfThe Ultimate Guide to Social Media Marketing in 2024.pdf
The Ultimate Guide to Social Media Marketing in 2024.pdf
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
factors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxfactors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptx
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
Mbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptxMbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptx
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdf
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 

HTML and Responsive Design

  • 1. HTML and Responsive Design Why is this so important for users and content producers?
  • 3. Responsive design • Why? • There are many devices (phones, tablets, laptops, desktops, giant TV screens) • Many delivery applications – Not only Firefox, Chrome, Safari, IE, Opera – Also old browser versions that do not support HTML and some CSS techniques • Orientation: vertical or horizontal?
  • 4. The viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> • width can be specified in pixels; the value device-width detects the width of whatever device the user is using • initial-scale=1 means no zooming will be applied • Not recommended: Adding maximum-scale=1 means the users cannot zoom (this may be bad for some content) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewportmeta-tag/
  • 5.
  • 6.
  • 7.
  • 8.
  • 14. The design is a little less successful when we turn the iPhone sideways (landscape mode). Boston Globe
  • 15. This information graphic (about hockey brain injuries) is much more successful on the iPhone. Boston Globe
  • 16. You can even zoom in on individual items in the graphic. Boston Globe
  • 17. Using multiple CSS stylesheets <link rel="stylesheet" media="screen and (maxdevice-width: 900px)" href="css/mobile.css"> <link rel="stylesheet" media="screen and (-webkitdevice-pixel-ratio: 1.5)" href="css/mobile.css"> • Making a separate stylesheet for mobile devices (anything with a smaller screen) is another option. • “The most important task for the mobile.css … is to reset the website width and main content wrapping from the hardcoded centered column to something spreading across the whole mobile screen width.” http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-mediaqueries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-andhtml5-part-5/
  • 18.
  • 19.
  • 20. Coding flexible images img { max-width: 100%; padding: 10px 20px; } • However, if you enclose the image in a fixed-width wrapper div, the image will not automatically flex this way. • Web designers have to make choices. • They have to know what their choices are. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Note this article is from 2011. Always check for latest updates to design best practices.
  • 21. Frameworks • Choosing and learning a framework takes time • It’s well worth it for people who design lots of websites, or if you have to create a new, large website • Frameworks that have responsive design “baked in” can save the designer from reinventing the wheel • http://webexpedition18.com/articles/responsive-cssframeworks/ • http://www.vermilion.com/news/articles/2012/10/22/compa ring-responsive-css-frameworks-bootstrap-foundation-andskeleton
  • 26.
  • 27. “Django is a framework that makes it easy to build big, robust web applications in the programming language Python.”
  • 28. Tips and best practices to develop responsive websites http://www.catswhocode.com/blog/tips-and-best-practices-todevelop-responsible-websites (This might be the most helpful article for beginners. And it’s short!)
  • 29. HTML and Responsive Design Presentation by Mindy McAdams [February 2014]

Editor's Notes

  1. Lecture by Mindy McAdams, University of Florida, February 2013.Updated: February 2014
  2. Correctly formatted HEAD for an HTML5 document.
  3. Reasons why it is important to understand what responsive design is and what it does.
  4. See http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/And http://www.quirksmode.org/mobile/viewports.html
  5. From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  6. They look the same in a normal Web browser on a laptop computer … From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  7. The same two pages, viewed in Safari on an iPhone 5. From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  8. This is the result of the viewport meta tag, used intelligently. From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  9. “The Lens” is anonline-only nonprofit news site coming from New Orleans. It uses responsive design. http://thelensnola.org/
  10. The same document, viewed on Chrome on a MacBook. http://thelensnola.org/
  11. The Boston Globe recently launched with a new responsive design. Page One.http://bostonglobe.com/
  12. The Boston Globe recently launched with a new responsive design. Article page.http://bostonglobe.com/
  13. The same two pages, viewed in Safari on an iPhone 3GS. Page One, left. Article page, right. http://bostonglobe.com/
  14. The design is a little less successful when we turn the iPhone sideways (landscape mode).http://bostonglobe.com/
  15. The design is more successful here (portrait vs. landscape mode). http://bostonglobe.com/
  16. You can even zoom in on the individual items in the graphic, on the phone screen. http://bostonglobe.com/
  17. This seems to require a lot more work – viewport is probably the superior option. See http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-media-queries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-and-html5-part-5/
  18. Flexible images
  19. Flexible images
  20. Being a professional means researching what the best practices are – now. See http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  21. http://webexpedition18.com/articles/responsive-css-frameworks/http://www.vermilion.com/news/articles/2012/10/22/comparing-responsive-css-frameworks-bootstrap-foundation-and-skeleton
  22. Skeleton: One example of a framework
  23. Skeleton: One example of a framework
  24. Skeleton: One example of a framework
  25. Unsemantic - a fluid grid system - successor to the 960 Grid System. The 960 Grid was a very popular framework for several years. http://unsemantic.com/
  26. The 960 Grid System. Not responsive? http://960.gs/demo_24_col.html
  27. Django is a Web framework used by some news operations. https://www.djangoproject.com/ QUOTE FROM:http://skillcrush.com/2012/09/14/django/
  28. This might be the most helpful article for beginners.
  29. CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida, February 2014.