CMP 868 - Creating Your Personal and Small Business Web Sites Session II – Layout & Design www.profburnett.com Master a Skill / Learn for Life

Session Outline Layout & Design Web Design Tools Role of Design Types of Websites Responsive Web Design Frameworks Web Design Tools Designing Effective Navigation 7/15/2019 Copyright 2017 © Carl M. Burnett

Layout & Design 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 7/15/2019 Copyright © Carl M. Burnett

Role of Design Communicate Order Encourage Engagement Define Boundaries Easy-to-Use Inspire Confidence 7/15/2019 Copyright © Carl M. Burnett

Flexible Design 7/15/2019 Copyright © Carl M. Burnett

Using the Grid 7/15/2019 Copyright © Carl M. Burnett

Good Alignment Markup Correctly with right HTML Space CSS Correctly Use visual editing Strong Alignment is better than Center Alignment 7/15/2019 Copyright © Carl M. Burnett

Above the Fold 7/15/2019 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 7/15/2019 Copyright © Carl M. Burnett

Color Schemes 7/15/2019 Copyright © Carl M. Burnett

Using Gradients 7/15/2019 Copyright © Carl M. Burnett

Choosing Fonts San Serif - Arial Serif – Times New Roman 7/15/2019 Copyright © Carl M. Burnett

Your Look & Feel Image Use Attitude of Text Font Use Element Arrangement 7/15/2019 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. 7/15/2019 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. 7/15/2019 Copyright © Carl M. Burnett

HTML5 Frameworks HTML KickStart HTML5 Boilerplate http://www.getskeleton.com/Skeleton Montagejs Zebra 7/15/2019 Copyright © Carl M. Burnett

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

Mobile Frameworks jQuery Mobile Sencha Touch Kendo UI Mobile Chocolate Chip UI mobile-frameworks-comparison-chart.com 7/15/2019 Copyright © Carl M. Burnett

Break Next - Web Design Tools 7/15/2019 Copyright 2017 © Carl M. Burnett

Web Design Tools Outline Wireframe Design Apps Free Web Design IDEs Free Web Development IDEs Downloadable Desktop Web Development Apps Cloud Based Web Development Online Website Builder Sites Adobe Dreamweaver Other Tools for Web Site Construction 7/15/2019 Copyright © Carl M. Burnett

Wireframe Design Apps frame box Gliffy Mockflow Mockingbird Proto iPhone Mockup (iPhone) Mokk.me (iPhone) Sketch Design Resources UI8 Design Resources 7/15/2019 Copyright 2017 © Carl M. Burnett

Free Web Design IDEs Sublime Text Brackets CoffeeCup Free HTML Editor Webuilder ICEcoder BBEdit Code Writer Google Web Designer 7/15/2019 Copyright 2017 © Carl M. Burnett

Free Web Development IDEs Visual Studio Code Atom by Github Komodo Edit Netbeans Light Table RJ TextEd CodeLobster Bluefish Coda Aptana (JAVA Required) Eclipse (JAVA Required) 7/15/2019 Copyright 2017 © Carl M. Burnett

Downloadable Desktop Web Development Apps Justinmind Craft by InVision LABS Bolt 2.0 ($) Flair Builder ($) Indigo Studio ($$$) Omnigraffle (iOS)($) TETHR (iOS) iPlotz (iPhone & Android) Mockups.me - (Web & Desktop) Balsamiq ($ - Web & Desktop) 7/15/2019 Copyright 2017 © Carl M. Burnett

Cloud-Based Web Development Sites Adobe Dreamweaver Axure ($) Fluid ($) HotGloo ($) Moqups ($) Invision ($$$) Pidoco ($) Protoshare ($) Solidify ($) UXPin ($) Codepen Cloud9 Codeanywhere CodeEnvy Kodingen 7/15/2019 Copyright 2017 © Carl M. Burnett

Online Web Editors WIX - http://www.wix.com Godaddy Website Builder - https://www.godaddy.com/ Weebly - http://www.weebly.com/ About.me – http://about.me WebsiteBuilder - https://www.websitebuilder.com/ IM Creator - http://www.imcreator.com/ Jimdo - https://www.jimdo.com/ Ucraft - https://www.ucraft.com/ WebNode - https://us.webnode.com/ WordPress - http://www.wordpress.com 7/15/2019 Copyright © Carl M. Burnett

Adobe Dreamweaver 7/15/2019 Copyright © Carl M. Burnett

Other Tools for Web Site Construction PayPal - http://www.paypal.com Square - https://squareup.com/ Authorize.Net - http://www.authorize.net/ 7/15/2019 Copyright © Carl M. Burnett

Student Exercise Online Website Editor Selection Select a online web editor. Select a template. 7/15/2019 Copyright 2017 © Carl M. Burnett

Break Next - Designing Effective Navigation 7/15/2019 Copyright 2017 © Carl M. Burnett

Class Outline What is Navigation? Laying out Your Navigation Grouping Options Tabbed Navigation Dropdown Menus Using Icons The Role of the Homepage You are Here........ Encouraging Exploration Adding Search Effective Error Messages Tips for Effective Links 7/15/2019 Copyright © Carl M. Burnett

What is Navigation? 7/15/2019 Copyright © Carl M. Burnett

Laying out Your Navigation Header Site Logo Utility Links Sitewide Navigation Options Sidebar Local Navigation Page Content Sidebar Bonus Navigation Footer – Background Links And Copyright Info 7/15/2019 Copyright © Carl M. Burnett

Grouping Options Before After Books CD’s Posters Wallpapers MP3’s Who We Are Visiting Us Contact Us After Shop Books CD’s Posters Free Downloads Wallpapers MP3’s About Us Who We Are Visiting Us Contact US 7/15/2019 Copyright © Carl M. Burnett

Tabbed Navigation 7/15/2019 Copyright © Carl M. Burnett

Dropdown Menus 7/15/2019 Copyright © Carl M. Burnett

Using Icons 7/15/2019 Copyright © Carl M. Burnett

The Role of the Homepage Clear Statement about Site Clear Navigation Prominent Search Box Standard Navigation Bar 7/15/2019 Copyright © Carl M. Burnett

You are Here........ Give Each Page a Title Change Color of Visited Links Change Navigation Bar Use Breadcrumbs Create a Process Map 7/15/2019 Copyright © Carl M. Burnett

Encouraging Exploration 7/15/2019 Copyright © Carl M. Burnett

Adding Search 7/15/2019 Copyright © Carl M. Burnett

Effective Error Messages 7/15/2019 Copyright © Carl M. Burnett

Tips for Effective Links Be Consistent Avoid Quirky Names Keep Link Text Short Links Make Sense Do Not Share Links Link Text Descriptive Don't tell where to click Don't Draw Attention Link At a Glance Use Plain HTML Warn if Link is to Doc Email Address Link Never Open a New Page Only Hover Links 7/15/2019 Copyright © Carl M. Burnett

Student Exercise Design Site Navigation for your Site 7/15/2019 Copyright 2017 © Carl M. Burnett

Session Review Layout & Design Web Design Tools Role of Design Types of Websites Responsive Web Design Frameworks Web Design Tools Designing Effective Navigation 7/15/2019 Copyright 2017 © Carl M. Burnett