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

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

3. 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

4. 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

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

6. 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

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

8. 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

9. 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

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

11. 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

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

13. 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

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

15. 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

16. 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

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

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

19. 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

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

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

22. 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

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

24. 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

25. 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

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

27. 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

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

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

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

31. 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

32. 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

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

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

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

36. 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

37. 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

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

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

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

41. Viewing Web Pages URI URI - Uniform Resource Identifier
URL - Uniform Resource Locator URN - Uniform Resource Name
URL
URN
File Name
Directories
Domain Name
Protocol
2/26/2019
Copyright 2017 © Carl M. Burnett

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

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

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

45. 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

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

47. 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

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

49. 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

50. 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

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

52. 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

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

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

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

56. 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

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

58. 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