Download - How to get a great website
![Page 1: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/1.jpg)
How to Get a Great Website
Matt Kuliani
ITRE
October 22, 2015
![Page 2: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/2.jpg)
What You Will Learn
• Website design terminology
• Elements of a great website
• How to make a great website
(without becoming a computer nerd)
![Page 3: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/3.jpg)
Website Experience?
• Can use Google?
• Uses online banking or is active in social media?
• Has a personal website?
• Has built a webpage?
• Knows what WWW stands for?
• HTML?
• HTTP?
• Can spot the error in this HTML code?
<a href=“..\photos.php”>Photos</a>
![Page 4: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/4.jpg)
Website Design Terminology
• Website vs webpage
• Graphics vs photos
• Copy
• Flash
• Javascript
• HTML5
• URL vs web address
• Host
• SEO
• Site map vs breadcrumbs
• Cross-platform compatibility
• Resolution vs Responsiveness
![Page 5: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/5.jpg)
Website vs Webpage
• A website is made of many webpages.
Webpage Website
![Page 6: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/6.jpg)
Graphics vs Photos
• A graphic is any non-text, visual thing
• A photo is literally a photograph taken by a camera
Graphic Photo
![Page 7: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/7.jpg)
Copy
• The text written to be shown in marketing materials
• A website is a marketing material
![Page 8: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/8.jpg)
Flash
• Refers to Adobe Flash
• Plugin to browsers
• Allows interesting/complicated animations and programming
• Resource-intensive (a lot makes the page slow)
![Page 9: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/9.jpg)
Javascript
• A programming language only for webpages
• Not resource-intensive like Flash
• Requires much more coding ability
![Page 10: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/10.jpg)
HTML5
• The 5 is the version of HTML
• Refers to the addition of
• Video-playing
• Sounds
• Animations
• … without the need for coding expertise or a browser plugin
![Page 11: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/11.jpg)
URL vs Web Address
• URL = Uniform Resource Location
• Web Address = URL
• Slang, everyone’s familiar with the term “address”
![Page 12: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/12.jpg)
Host
• The company/location where the website data is stored
• Like the host of a house party
• Provides nice services to their guests/clients
• Keeps things secure
• Cleans up after them
• Makes sure the guest/client has a good time
![Page 13: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/13.jpg)
SEO
• SEO = Search Engine Optimization
• Better SEO on a site = Better visibility on a search engine
![Page 14: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/14.jpg)
Site Map vs Breadcrumbs
• Site map is the outline of the site
• Directory structure
• Good for static sites
• Similar to looking for a file
• Breadcrumbs are links that allow quick navigation to a higher level
![Page 15: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/15.jpg)
Cross-Platform Compatibility
• Web browsers do NOT act the same
• Keeps the site usable on any browser
• Very important
• Not as difficult as it used to be
![Page 16: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/16.jpg)
Resolution vs Responsiveness
• Resolution = minimum monitor resolution required to view the page
• Example: Google Images (https://www.google.com/imghp)
• Responsiveness = uses HTML5 to make the page viewable at any resolution
• Example: NCSU (https://www.ncsu.edu/)
![Page 17: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/17.jpg)
Elements of a Great Website
• Appearance
• Content
• Functionality
• Usability
![Page 18: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/18.jpg)
Appearance
• Color
• Text
• Graphics
• Photography
• Simplicity
![Page 19: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/19.jpg)
Appearance - Color
• Bad colors are offensive and will quickly give the audience wrong assumptions
• Good colors can give satisfactory/positive emotions toward the brand
![Page 20: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/20.jpg)
Appearance - Text
• Colors – again, don’t be offensive to the eyes
• Fonts
• Stay reasonably uniform
• No exotic fonts
• Be either deliberately artsy and not readable or deliberately plain and very readable
![Page 21: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/21.jpg)
Appearance - Graphics
• Too many graphics will overload the user
• Not enough graphics will bore the user
![Page 22: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/22.jpg)
![Page 23: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/23.jpg)
![Page 24: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/24.jpg)
Appearance - Photography
• Always opt for high quality
• Today’s monitors and screens can easily show high definition
• It is “expected” that high quality photos will be available to view if low quality ones are in small sizes
• Real cameras are still better than phone cameras
• Honestly, not a big problem for Vision Zero
![Page 25: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/25.jpg)
Appearance - Simplicity
![Page 26: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/26.jpg)
Content
• Copy
• Clearly label
• Break into small paragraphs
• Don’t overwhelm with text
• Updated content
• No one will repeat if it’s always the same
• “You”
• Use “you” as much as possible
• Minimize “I”, “we”, and “us”
• Flashy stuff
• Use the cool stuff appropriately
• Be like James Bond – simple fashion with really cool toys
• Don’t be like a 1970’s pimp
![Page 27: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/27.jpg)
Functionality
• It ALL works
• Poor website construction leaves a user frustrated
• No typos
• Double check facts and figures
• Spelling mistakes and bad grammar are unforgivable for something so professional
![Page 28: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/28.jpg)
Usability
• Simplicity
• Valuable content
• Good organization
• Attractive Design
• Fast-loading
• Most users anger after 2 seconds, abandon after 4
• Scrolling
• Don’t require scrolling when unnecessary
• Don’t make a page so long that the user stops
using the scroll wheel
• Layout
• Consistent and organized
• Extremely important
• Navigation
• Menu on top or the sides
• Menus should be simple and quick to navigate
• Don’t make the users hunt
• Cross-platform compatibility
• Responsiveness
![Page 29: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/29.jpg)
How to Make a Great Website
• Hire someone with technical expertise
• Hire someone with design expertise
• Feedback
• Feedback
•Feedback
![Page 30: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/30.jpg)
How to Give Good Feedback
• Get educated (done!)
• Be descriptive
• Be precise
• Go with your gut
![Page 31: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/31.jpg)
Examples
• I don’t like the colors, too girly
• The menu is too big, make it smaller
• We shouldn’t use Flash on the site
• Make it simpler to use
• I don’t like the pink, it makes me feel
like our brand is too girly
• The menu is too long going down the page, let’s make it shorter
• We shouldn’t use Flash, instead use an HTML5 players for the video
• Remove A, B, and C and let’s see if that helps simplify things because they aren’t needed on that page
Bad Good
![Page 32: How to get a great website](https://reader036.vdocument.in/reader036/viewer/2022062321/56812914550346895d8bab6f/html5/thumbnails/32.jpg)
Practice
• This presentation design
• Good?
• Bad?