CMP 868 - Creating Your Personal and Small Business Web Sites Lesson 2 Chapter 4 - Layout & Design www.profburnett.com
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
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
Copyright © Carl M. Burnett Flexible Design 11/24/2018 Copyright © Carl M. Burnett
Copyright © Carl M. Burnett Using the Grid 11/24/2018 Copyright © Carl M. Burnett
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
Copyright © Carl M. Burnett Above the Fold 11/24/2018 Copyright © Carl M. Burnett
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
Copyright © Carl M. Burnett Color Schemes 11/24/2018 Copyright © Carl M. Burnett
Copyright © Carl M. Burnett Using Gradients 11/24/2018 Copyright © Carl M. Burnett
Copyright © Carl M. Burnett Choosing Fonts San Serif - Arial Serif – Times New Roman 11/24/2018 Copyright © Carl M. Burnett
Copyright © Carl M. Burnett Your Look & Feel Image Use Attitude of Text Font Use Element Arrangement 11/24/2018 Copyright © Carl M. Burnett
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
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
Copyright © Carl M. Burnett HTML5 Frameworks HTML KickStart HTML5 Boilerplate http://www.getskeleton.com/Skeleton Montagejs Zebra 11/24/2018 Copyright © Carl M. Burnett
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
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
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