How to Get a Great Website

Matt Kuliani

ITRE

October 22, 2015

What You Will Learn

• Website design terminology

• Elements of a great website

• How to make a great website

(without becoming a computer nerd)

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>

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

Website vs Webpage

• A website is made of many webpages.

Webpage Website

Graphics vs Photos

• A graphic is any non-text, visual thing

• A photo is literally a photograph taken by a camera

Graphic Photo

Copy

• The text written to be shown in marketing materials

• A website is a marketing material

Flash

• Refers to Adobe Flash

• Plugin to browsers

• Allows interesting/complicated animations and programming

• Resource-intensive (a lot makes the page slow)

Javascript

• A programming language only for webpages

• Not resource-intensive like Flash

• Requires much more coding ability

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

URL vs Web Address

• URL = Uniform Resource Location

• Web Address = URL

• Slang, everyone’s familiar with the term “address”

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

SEO

• SEO = Search Engine Optimization

• Better SEO on a site = Better visibility on a search engine

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

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

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/)

Elements of a Great Website

• Appearance

• Content

• Functionality

• Usability

Appearance

• Color

• Text

• Graphics

• Photography

• Simplicity

Appearance - Color

• Bad colors are offensive and will quickly give the audience wrong assumptions

• Good colors can give satisfactory/positive emotions toward the brand

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

Appearance - Graphics

• Too many graphics will overload the user

• Not enough graphics will bore the user

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

Appearance - Simplicity

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

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

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

How to Make a Great Website

• Hire someone with technical expertise

• Hire someone with design expertise

• Feedback

• Feedback

•Feedback

How to Give Good Feedback

• Get educated (done!)

• Be descriptive

• Be precise

• Go with your gut

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

Practice

• This presentation design

• Good?

• Bad?