Basics of Web Design Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2014 Terry Ann Morris, Ed.D.

Slides:



Advertisements
Similar presentations
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Advertisements

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Unit 20 - Client Side Customisation of Web Pages
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/
CIS 1310 – HTML & CSS 7 More on Links, Layout & Mobile.
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Web Development & Design Foundations with XHTML
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Mobile Web Design Best Practices Three Approaches to Mobile Web: ◦ Develop a new mobile site with a.mobi TLD ◦ Create a separate website hosted within.
Web Development & Design Foundations with HTML5
School of Business Administration
Web Development & Design Foundations with HTML5 7th Edition
Web Development & Design Foundations with XHTML
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Implementing Responsive Design
Chapter 7 Absolute/relative hyperlinks Frag id 3-column site
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 8th Edition
Concepts for fluid layout
Web Development & Design Foundations with HTML5
Creating Page Layouts with CSS
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 8th Edition
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Web Development & Design Foundations with HTML5
7 More on Links, Layout & Mobile.
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 7th Edition
Web Development & Design Foundations with HTML5 7th Edition
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5
Cascading Style Sheets
Chapter 8 More on Links, Layout, and Mobile Key Concepts
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
6 Layout.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5
Chapter 7 Absolute/relative hyperlinks Frag id 3-column site
Web Development & Design Foundations with XHTML
Web Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5
Concepts for fluid layout
Session IV Chapter 15 - How Work with Fonts and Printing
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

Basics of Web Design Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2014 Terry Ann Morris, Ed.D

Learning Outcomes Code relative hyperlinks to web pages in folders within a website Configure a hyperlink to a named fragment internal to a web page Configure images with captions using the HTML5 figure and figcaption elements Configure a collection of images to float across a web page Configure web pages with new HTML5 section, hgroup, article, aside, and time elements Apply techniques to ensure backward compatibility with older browsers. Configure web pages for printing with CSS Describe mobile web design best practices Configure web pages for mobile display using the viewport meta tag Apply responsive web design techniques with CSS3 media queries and flexible images

More on Relative Linking Relative links from the canyon.html page in the rooms folder <a href="javelina.html">Javelina</a> <a href="../index.html">Home</a> <a href="../events/weekend.html">Weekend Events</a>

Linking to Fragment Identifiers A link to a part of a web page Also called named fragments, fragment ids Two components: The element that identifies the named fragment of a Web page. This requires the id attribute. <div id="top"> ….. </div> 2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. <a href="#top">Back to Top</a> Note the use of the # in the anchor tag!

Skip to Content

HTML5 Figure and Figcaption Elements <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure>  

Floating Images HTML: <figure> <img src="photo1.jpg" alt="Golden Gate Bridge" width="225" height="168"> <figcaption>Golden Gate Bridge</figcaption> </figure> CSS figure { float: left; width: 230px; padding-bottom: 10px; background-color: #EAEAEA; } figcaption { text-align: center; font-style: italic; font-family: Georgia, serif; }

More HTML5 Elements Section Element Article Element Aside Element indicates a portion or “section” of a document, like a chapter or topic Article Element indicates an independent entry, like a blog posting, that can stand on its own Aside Element indicates a sidebar or other tangential content Time Element represents a date or time

HTML5 Compatibility with Older Browsers CSS header, main, nav, footer, section, article, figure, figcaption, aside { display: block; } HTML5 Shim (aka HTML5 Shiv) <!--[if lt IE 9]> <script src=" http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

CSS Styling for Print Create an external style sheet with the configurations for browser display. Create a second external style sheet with the configurations for printing. Connect both of the external style sheets to the web page using two <link > elements. <link rel="stylesheet" href="lighthouse.css" media="screen"> <link rel="stylesheet" href="lighthouseprint.css" media="print">

Print Styling Best Practices Hide non-essential content Example: nav { display: none; } Configure font size and color for printing Use pt font sizes, use dark text color Control page breaks Example: .newpage { page-break-before: always; }

Mobile Web Design Best Practices Three Approaches to Mobile Web: Develop a new mobile site with a .mobi TLD Create a separate website hosted within your current domain targeted for mobile users Use CSS to configure your current website for display on both mobile and desktop devices

Mobile Web Limitations Small Screen Size Low bandwidth Limited fonts Limited color Awkward controls Limited processor and memory Cost per kilobyte

Design Techniques for Mobile Web One column design Avoid floats, tables, frames Descriptive page title Descriptive heading tags Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between these techniques and designing to provide for accessibility?

Design Techniques for Mobile Web Single column design Avoid floats, tables, frames Descriptive page title Descriptive headings Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Em or percentage font size units Common font typefaces Good contrast between text and background colors Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between these techniques and designing to provide for accessibility?

Viewport Meta Tag Default action for most mobile devices is to zoom out and scale the web page Viewport Meta Tag Created as an Apple extension to configure display on mobile devices Configures width and initial scale of browser viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">

Telephone & Text Message Hyperlinks Telephone Scheme <a href="tel:888-555-5555">Call 888-555-5555</a> Many mobile browsers will initiate a phone call when the hyperlink is clicked. SMS Scheme <a href="sms:888-555-5555">Text 888-555-5555</a> Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked.

Responsive Web Design Term coined by Ethan Marcotte Progressively enhancing a web page for different viewing contexts Techniques: Fluid Layout CSS3 Media Queries Flexible Images

CSS3 Media Queries Media Query Determines the capability of the mobile device, such as screen resolution Directs the browser to styles configured specifically for those capabilities Link Element Example: <link href="lighthousemobile.css" media="only screen and (max-device-width: 480px)"> CSS Example: @media only screen and (max-width: 480px) { header { background-image: url(mobile.gif); }

Flexible Images Edit HTML: remove height and width attributes CSS: img { max-width: 100%; height: auto; }

Testing Mobile Display Options Test with a mobile device Emulators Opera Mobile Emulator Mobilizer Opera Mini Simulator iPhone Emulator Test with a Desktop Browser Install an iOS or Android SDK

CSS Debugging Tips Manually check syntax errors Use W3C CSS Validator to check syntax errors http://jigsaw.w3.org/css-validator/ Configure temporary background colors Configure temporary borders Use CSS comments to find the unexpected /* the browser ignores this code */ Don’t expect your pages to look exactly the same in all browsers! Be patient!

Summary This chapter expanded your CSS and HTML skillset. You coded relative hyperlinks to web pages in folders within a website. You coded a hyperlink to a named fragment internal to a web page. You configured images with captions using the HTML5 figure and figcaption elements. You configured a collection of images to float across a web page. You configured web pages with new HTML5 section, article, aside, and time elements. You applied techniques to ensure backward compatibility with older browsers. You configured web pages for printing with CSS. You explored mobile web design best practices. You configured web pages for mobile display using the viewport meta tag. You applied responsive web design techniques with CSS3 media queries, fluid layouts, and flexible images. You explored techniques for testing the mobile display of a web page.