1. CMP 868 - Creating Your Personal and Small Business Web Sites
Lesson 2
Chapter 4 - Layout & Design

2. Copyright © Carl M. Burnett
Class Outline
Role of Design
Flexible Design
Using the Grid
Good Alignment
Above the Fold
Organizing Information
Color Schemes
Using Gradients
Choosing Fonts
Your Look & Feel
Responsive Web Design
HTML5 Frameworks
CSS3 Frameworks
Mobile Frameworks
11/24/2018
Copyright © Carl M. Burnett

3. Copyright © Carl M. Burnett
Role of Design
Communicate Order
Encourage Engagement
Define Boundaries
Easy-to-Use
Inspire Confidence
11/24/2018
Copyright © Carl M. Burnett

4. Copyright © Carl M. Burnett
Flexible Design
11/24/2018
Copyright © Carl M. Burnett

5. Copyright © Carl M. Burnett
Using the Grid
11/24/2018
Copyright © Carl M. Burnett

6. Copyright © Carl M. Burnett
Good Alignment
Markup Correctly with right HTML
Space CSS Correctly
Use visual editing
Strong Alignment is better than Center Alignment
11/24/2018
Copyright © Carl M. Burnett

7. Copyright © Carl M. Burnett
Above the Fold
11/24/2018
Copyright © Carl M. Burnett

8. Organizing Information
Hierarchy of Information
Tips:
Larger text more important
Higher on page more important
Be consistent
Use Bulleted Lists
Contrast Color Space
11/24/2018
Copyright © Carl M. Burnett

9. Copyright © Carl M. Burnett
Color Schemes
11/24/2018
Copyright © Carl M. Burnett

10. Copyright © Carl M. Burnett
Using Gradients
11/24/2018
Copyright © Carl M. Burnett

11. Copyright © Carl M. Burnett
Choosing Fonts
San Serif - Arial
Serif – Times New Roman
11/24/2018
Copyright © Carl M. Burnett

12. Copyright © Carl M. Burnett
Your Look & Feel
Image Use
Attitude of Text
Font Use
Element Arrangement
11/24/2018
Copyright © Carl M. Burnett

13. Copyright © Carl M. Burnett
Responsive Web Design
Responsive web design (RWD)
 Web design approach.
 Develop sites that provide optimal viewing experience.
 easy reading and navigation.
 minimum of resizing, panning, and scrolling—across a wide range of devices.
Fluid Grid Layout - Page element sizing to be in relative - percentages, not absolute units.
11/24/2018
Copyright © Carl M. Burnett

14. Copyright © Carl M. Burnett
Responsive Web Design
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.
11/24/2018
Copyright © Carl M. Burnett

15. Copyright © Carl M. Burnett
HTML5 Frameworks
HTML KickStart
HTML5 Boilerplate
Montagejs
Zebra
11/24/2018
Copyright © Carl M. Burnett

16. Copyright © Carl M. Burnett
CSS3 Frameworks:
Stylesheet Languages
Sass (Syntactically Awesome Stylesheets)
LESS (Leaner CSS)
Stylus
Responsive
Foundation
Bootstrap
Columnal
Toast
Yaml
Gumby
Less Framework
Susy
Kube
CSS Framework Comparison
11/24/2018
Copyright © Carl M. Burnett

17. Copyright © Carl M. Burnett
Mobile Frameworks
jQuery Mobile
Sencha Touch
Kendo UI Mobile
Chocolate Chip UI
mobile-frameworks-comparison-chart.com
11/24/2018
Copyright © Carl M. Burnett

18. Copyright © Carl M. Burnett
Class Review
Role of Design
Flexible Design
Using the Grid
Good Alignment
Above the Fold
Organizing Information
Color Schemes
Using Gradients
Choosing Fonts
Your Look & Feel
Responsive Web Design
HTML5 Frameworks
CSS3 Frameworks
Mobile Frameworks
Next – Web Design Tools
11/24/2018
Copyright © Carl M. Burnett