CMP 868 - Creating Your Personal and Small Business Web Sites Session I - The Basics www.profburnett.com Master a Skill / Learn for Life

Session Outline The Web Design Challenge Planning Your Website Creating Effective Content 2/26/2019 Copyright 2017 © Carl M. Burnett

The Web Design Challenge Outline The Goal of Web Design Diversity of Devices Devices Affect Design Key Technologies Mobile Accessibility DIY or Outsource How to Set Up Your Website 2/26/2019 Copyright 2017 © Carl M. Burnett

The Goal of Web Design Why Website? Are there Key Principles? Should you DIY or Get Someone Else? How do you start? 2/26/2019 Copyright 2017 © Carl M. Burnett

Users and Usability What Do Users Want? Quick & Easy Info Easy-to-Use 2/26/2019 Copyright 2017 © Carl M. Burnett

Users and Usability How do Users Use a Web Page? Click Buttons Scan Click Links Give Up 2/26/2019 Copyright 2017 © Carl M. Burnett

Improving Usability Above the Fold Group Components Communicate Order Group Components Adhere to Conventions 2/26/2019 Copyright 2017 © Carl M. Burnett

Usability Conventions Header Conventions Logo, Tag Line, Utilities Unique Tag Line Nav Bar Sectionalizes Utilities - Useful - Not Prime May include Search Navigation Conventions Underlined Text Image Text Clickable Image Clickable Buttons 3D Column Text Clickable Cart Symbol – Shopping Cart Logo Image – Home Page 2/26/2019 Copyright 2017 © Carl M. Burnett

Home Page Design Guidelines Emphasize Value and Difference Empathize Highest Priority Don’t Welcome – Waste of Space Group Navigation Use Icons for Navigation Use Dropdowns for Navigation Home Page Different from main pages No Active link on Home Page to Home Page Home Page Title = Organization Name Ecommerce – Include Shopping Cart Symbol and Link 2/26/2019 Copyright 2017 © Carl M. Burnett

Space Design Guidelines Breadcrumbs Keep Header Small Prioritize Components Give Important Item Priority Location 2/26/2019 Copyright 2017 © Carl M. Burnett

Web Writing Guidelines Use Fewer Words Inverted Pyramid Use Heading and Subheadings Use Bulleted and Number Lists Use Tables Don’t Use All Caps Make Text Links Explicit Chunk Long Pages into Shorter pages 2/26/2019 Copyright 2017 © Carl M. Burnett

Graphic Design Principles Alignment Proximity Repetition Contrast 2/26/2019 Copyright 2017 © Carl M. Burnett

Typographical Guidelines Limit Paragraphs to 65 Characters Use San Serif Fonts that are Easy to Read Show Heading and Text Relationship Dark Text / Light Background Don’t Center or Justify Text No Space for Indented First Lines Don’t Reverse Text 2/26/2019 Copyright 2017 © Carl M. Burnett

Diversity of Devices 2/26/2019 Copyright 2017 © Carl M. Burnett

Devices Affect Design Flash No Mouse Screen Size Device Type Web Browsers MS Internet Explorer Safari Firefox Opera Chrome 2/26/2019 Copyright 2017 © Carl M. Burnett

Key Technologies Hypertext Markup Language - HTML HTML5 Cascading Style Sheets - CSS JavaScript Asynchronous JavaScript - AJAX Metadata Server Side Scripting – MEAN Stack MongoDB Express JS Angular JS Node JS 2/26/2019 Copyright 2017 © Carl M. Burnett

Mobile Latency Layering Deep Site Navigation Maintainability 2/26/2019 Copyright 2017 © Carl M. Burnett

Accessibility Color Blindness Impaired Vision No Mouse Impaired Hearing Mental Impairments Accessibility Principals 2/26/2019 Copyright 2017 © Carl M. Burnett

Accessibility Principals Text Alternatives Works with JavaScript/Flash Controls to stop Content Actions Clear & Consistent Navigation Keyboard & Mouse Use Deep Linking Navigation Don't use Pop-ups! Simple Language User Controls Color Conveyance Contrast Layers Avoid Complication Layout Use HTML & CSS Correctly Use HTML Accessibility Features Use Graphics that are Essential 2/26/2019 Copyright 2017 © Carl M. Burnett

DIY or Outsource 2/26/2019 Copyright 2017 © Carl M. Burnett

How to Set Up Your Website 2/26/2019 Copyright 2017 © Carl M. Burnett

Student Exercise Website Planning Worksheet Business Products/Services Individual Qualities/Skills Target Audience/ Secondary Audience Usability Site Features Navigation Marketing Responsive Web Design/Framework 2/26/2019 Copyright 2017 © Carl M. Burnett

Break Next - Planning Your Website 2/26/2019 Copyright 2017 © Carl M. Burnett

Planning Your Website Outline Purpose of Your Website How Will You Compete? Understanding Your Visitors Sitemaps Planning Interaction How Web Applications Work Intro to HTML & CSS Viewing Web Pages Critical Web Development Issues Hosting Your Website Why Domain Names Matter 8 Domain Buying Tips Domain Main Pitfalls Working With Web Developers 2/26/2019 Copyright 2017 © Carl M. Burnett

Purpose of Your Website Build New Relationships Enhance Your Reputation Sell Improve Customer Service Educate Entertain Create Community Create New Services Make Money 2/26/2019 Copyright 2017 © Carl M. Burnett

How Will You Compete? Competition is "one click away" Unique Selling Proposition Market Research Alexa - http://www.alexa.com Renewals Research Web Designers 2/26/2019 Copyright 2017 © Carl M. Burnett

Understanding Your Visitors Gender Life Stage (Work, Student, Retired) Disposable Income Cultural Interest Internet Experience Access Device 2/26/2019 Copyright 2017 © Carl M. Burnett

Sitemaps Homepage Products FAQ Help Contact Us Services 2/26/2019 Copyright 2017 © Carl M. Burnett

Planning Interaction Text Animation Video 2/26/2019 Copyright 2017 © Carl M. Burnett

Components of the Web 2/26/2019 Copyright 2017 © Carl M. Burnett

Web Request-Response Cycle Static Web Page Request Transmitted Web Server Processes Request User Sends Request by URL Internet DNS Lookup Web Server Request Response Browser Decodes HTML from Web Server Results Send to User Results Displayed to User Results Formatted in HTML for Browser 2/26/2019 Copyright 2017 © Carl M. Burnett

The Web Medium Dynamic Web Site Server Side Client Side Internet Web Server Application Server Database Server HTML5 CSS JavaScript jQuery MEAN LAMP AMMP HTTP TCP/IP Java C# Python SQL XML Copyright 2017 © Carl M. Burnett 2/26/2019

Web Browsers Mobile Browsers (68) Desktop Browsers Chrome Firefox Safari Opera IE Mobile Browsers (68) 2/26/2019 Copyright 2017 © Carl M. Burnett

Web Building Blocks Hypertext Stylization Interactivity Metadata 2/26/2019 Copyright 2017 © Carl M. Burnett

Key Technologies Hypertext Markup Language - HTML HTML5 Cascading Style Sheets - CSS JavaScript Asynchronous JavaScript - AJAX XML 2/26/2019 Copyright 2017 © Carl M. Burnett

Server Side Scripting MEAN Ruby (Ruby on Rails) Python (Django, Flask, Pylons) Java C# PHP PERL SQL AJAX XML 2/26/2019 Copyright 2017 © Carl M. Burnett

HTML Standards Version Year Description HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 Incorporated XML HTML5 2012 2/26/2019 Copyright 2017 © Carl M. Burnett

CSS Standards Version Year 1.0 1996 2.0 1998 2.1 2004 3.0 2012 2/26/2019 Copyright 2017 © Carl M. Burnett

HTML Document JavaScript_Book.html 2/26/2019 Copyright 2017 © Carl M. Burnett

CSS Document book.css 2/26/2019 Copyright 2017 © Carl M. Burnett

Viewing Web Pages URI URI - Uniform Resource Identifier URL - Uniform Resource Locator URN - Uniform Resource Name URL URN http://www.profburnett.com/2014/spring/2014_Spring_Session_I.html File Name Directories Domain Name Protocol 2/26/2019 Copyright 2017 © Carl M. Burnett

Critical Web Development Issues Cross Browser Compatibility User Accessibility Search Engine Optimization (SEO) 2/26/2019 Copyright 2017 © Carl M. Burnett

Hosting Your Website Storage Space Bandwidth Support Pricing Reliability 2/26/2019 Copyright 2017 © Carl M. Burnett

Why Domain Names Matter Domain Naming System (DNS) Uniform Resource Locator (URL) Folders Files 2/26/2019 Copyright 2017 © Carl M. Burnett

8 Domain Buying Tips Check if Domain is Registered Buy from Hosting Company Keep it Short Make it Memorable Domain Extension Get the basic domain (.com .biz) Don't overdue naming Once you determine the name - BUY IT! 2/26/2019 Copyright 2017 © Carl M. Burnett

Domain Main Pitfalls Check http://www.whois.net Trademark Registration Private Domain Registration Registry Scams 2/26/2019 Copyright 2017 © Carl M. Burnett

Working With Web Developers Research Web Designers Pricing Web Design Pricing Designer Engagement Technical Competency Artistic Capabilities Feedback Review and Testing 2/26/2019 Copyright 2017 © Carl M. Burnett

Break Next – Creating Effective Content 2/26/2019 Copyright 2017 © Carl M. Burnett

Creating Effective Content Outline Ideas for Content Web Writing Differs Top Writing Tips Images that Work Finding Photos Creating Cartoons Compressing Images Adding a Map 2/26/2019 Copyright 2017 © Carl M. Burnett

Ideas for Content General Content Blog / Vlogs What’s New Tutorials Essential Content About Us Contact Page Business Content Find Us Meet the Team Product Services Testimonials Presentations Feedback & Surveys General Content Blog / Vlogs What’s New Tutorials Games Tools Interviews 2/26/2019 Copyright 2017 © Carl M. Burnett

Web Writing Differs People Skim read Search matches specific query pages Hyperlinking Content Pathways 2/26/2019 Copyright 2017 © Carl M. Burnett

Top Writing Tips Keep Pages Short Put Readers First Strong Headlines Keep Lively Pace Be Consistent Be Specific Don't Show Off Edit, Edit, Edit! 2/26/2019 Copyright 2017 © Carl M. Burnett

Images that Work 2/26/2019 Copyright 2017 © Carl M. Burnett

Finding Photos 2/26/2019 Copyright 2017 © Carl M. Burnett

Creating Cartoons http://www.pixton.com/ 2/26/2019 Copyright 2017 © Carl M. Burnett

Compressing Images Joint Pictures Engineering Group (JPEG) Image Photographs Can Be Compressed 30% Compression Graphics Interchange Format (GIF) Image Bitmaps 256 Colors Animation Portable Network Graphics (PNG) Compression Animation Color Depth No License Needed 2/26/2019 Copyright 2017 © Carl M. Burnett

Adding a Map Google Maps MapQuest Yahoo Maps Bing Maps 2/26/2019 Copyright 2017 © Carl M. Burnett

Session Review The Goal of Web Design Planning Your Website Outline Creating Effective Content Next – Layout & Design 2/26/2019 Copyright 2017 © Carl M. Burnett