Condensed Skillsology Web Design Notes [40 out of 40, 2015]

‘Internet’ – 1970s – academic institutions
World Wide Web – Tim Berners-Lee, 1990s
1993 – National Center for Supercomputing Applications – ‘Mosaic’ graphical interface
Mosaic – laid foundations for modern web browsers (IE, Firefox, Google Chrome) [^]

“http://www.whatever.com”:
– “http” = ‘scheme’/ ‘protocol’ (hypertext transfer protocol)
– “whatever.com” = ‘domain’ – 67 characters max – characters preceding first ‘.’ are not included in the domain name (maps/docs/mail.google.com) – should be easy to remember, relevant to business
– extensions = ‘.com’ (commercial), ‘.net’ (internet- related businesses), ‘.mobi’ (mobile), and ‘.org’, typically used for non-profit organisations [^]

“…/ipad/features” = ‘path’
Servers: computers connected to internet, receiving and responding to file requests
– accessing a particular website = viewing designated files on the server
– most web servers set up to look for a page titled ‘index’ by default
– click link -> HTML code for page provides appropriate file name – server displays file from corresponding folder
– selecting a hosting company = specifying which computer will store site’s pages (site5; yahoo!; HostMonster; Dream Host; BlueHost; FatCow; Weebly) (hosting options – onsite; dedicated; shared) [^]

Internet Corporation for Assigned Names & Numbers (ICANN) registry – numeric address of server associated with domain – indicates where files can be found [^]

World Wide Web Consortium (W3C) – 1994 – universal web publishing standards (Web Content Accessibility Guidelines [WCAG]) – HTML [^]

HTML (5) provides site structure [diveintohtml5.info/video.html] [http://dev.w3.org/html5/webvtt] [new APIs – improved links between JavaScript and HTML5; var worker=new Worker('my_task.js'); [http://www.html5rocks.com/en/tutorials/workers/basics]; data storage – formerly only ‘cookies’ – now: local storage – session storage (tied to a specific browser instance) – offline storage [http://www.html5rocks.com/en/features/offline]; canvas examples [True 8-bit Colour Cycling with HTML5; The Wilderness Downtown; The Cloth Simulation] [^]

CSS provides aesthetics [http://www.w3schools.com/cssref/css_selectors.asp.] [http://www.w3schools.com/cssref/.] [Sergey’s HTML5 & CSS3 Quick Reference] [Jon Duckett: HTML & CSS: Design and Build Websites] [Eric A. Meyer: CSS Pocket Reference] [online tutorials and references: W3C (CSS); W3 Schools; CSS Zen Garden; Eric Meyer’s CSS Resources; CSS Wonders; Smashing Magazine:CSS; CSS Selectors and Properties: http://www.w3schools.com/sccref/css3_browsersupport.asp] [17 new CSS3 Pseudo Selectors (17): http://www.w3schools.comcssref/css_selectors.asp] [^]

Why CSS is better than Bitmap: leaner; scalable; easy to maintain; single CSS code value change is reflected by all affected website elements; accessibility – actual tagged text is used for interface elements [www.w3schools.com/css…/css_border.asp/…/css_text-effects.asp…css_font.asp/…/css3_transitions.asp/…/css3_animations.asp] percentage and em values for text [^]

Hosting Management Tool: cPanel [^]

Website Troubleshooting Tool: Mac – Safari, Firefox, Chrome (test IE on Windows machine); Windows – Firefox, Chrome, IE (test Safari – iPad/iPhone) [^]

Firefox – Firebug; Chrome – Inspector – changes made are temporary until uploaded – see page’s source HTML, CSS & JavaScript; click code to see elements [^]

Web design: user experience, navigation, GI [^]

Web development: programming code for pages, site–database connection, purchases [^]

Information Architecture – ‘Sitemap’ (all site pages and interconnections) [InDesign, Visio] – Sitemaps: blueprint used by information architect; allows users to see all pages [navigation aid]; ‘Wireframes’ (diagrammatic drawings, detailing content and navigation plan during specific task; annotated) (Mockingbird, Mockflow, Axure) [^]

Visual design: mood boards (imagery, fonts, colours) -> more specific = ‘style tiles’ (textures, colours, button treatments, fonts, brand logos, photography)
‘web compilations’ – art source files – create 3 design mockups for client – sent to developer to extract and use
– iStockphoto.com (photo, video, icons, illustrations, audio)
– Veer.com (fonts)
– lipsum.com (Latin [‘Greek’] placeholder text) [^]

Photoshop: resize an entire image: Image -> Image Size -> follow prompts; resize portion of image: navigate to appropriate layer and press ctrl-t (/cmd-t on Mac)/click Edit -> Transform -> Resize {hold down ‘Shift’ key while dragging to retain original image’s proportions} -> press Return/Enter to complete transformation [http://www.resize.it]…
images are pieces of the puzzle ~ firstly, identify individual image ‘pieces’ [eg. bottom footer, search box] to be exported [^]

Photoshop’s ‘Save for Web’ feature: File -> Save for Web & Devices for each slice -> once relevant slices have been shift-selected, choose ‘Selected Slices’ and click Save. ‘2-Up’ and ‘4-Up’ affords a side-by-side comparison of differing optimization levels [GIF – best setting = 128-dithered] [^]

Images: ‘slices’ [individual elements] or ‘sprites’ [related slices inside single image]?
Slices – Photoshop: Layer -> New Layer Based Slice/ ‘Slices From Guides’ -> select Slice Tool, click and drag around outside of each image [no overlapping slices – background image has to be saved out separately]…
Sprite example: #likeButton{width: 18px; height: 17px; background: url('icons-sprites.png') 238[‘x’ axis coordinate] 102 [‘y’ axis coordinate];} [http://www.spritebox.net] [^]

Image File Format – ‘GIF’: established in 1987 for web graphics… suitable for text-based images, line drawings, cartoons, solid-color graphics
– ‘JPEG’: established in 1992 for photos with significant color variation
– ‘PNG’: originally designed to replace GIF; now .png is fully supported

[^]

Dreamweaver: editing HTML & CSS – ‘split view’ (code/design) – images, form, text – add common page elements, corresponding HTML code automatically updates
DREAMWEAVER Elements: file tabs; linked files (property inspector/target icon); page view; live code; live view; inspect; file management; preview in browser; multiscreen; preview preferences; page title; global icon (choose browser with which to open)
– create a folder for new site that mirrors server’s file structure ~ when site’s uploaded, the files and folders retain names and relative positions
– page naming conventions: descriptive; no spaces; start with a letter; lower case; only use letters, numbers, hyphens, underscores, periods; include .html/.jpg/.png/.css
CSS: apply a CSS style to it -> save external style sheet that all web pages can reference
CSS panel – edit existing styles/create new styles [^]

CoffeeCup: free alternative to Dreamweaver [^]

Preparing to Publish, i.: normally ‘index.html’ is recognised as the home page [check with host company]
CHECKS: page titles [accurately reflecting page content?]; links [all working?]; media [multimedia displaying as intended?]; alternate text [all media elements have appropriate alternate text explanations?]; layout [consistent across multiple platforms?]; text [text content readable & accessible across multiple platforms?]
ii.: first line of HTML tells browser which spec we’re using – BEWARE: deprecated code; incorrectly nested tags; junk characters [always paste from plain text documents]; alternate text for images [must include ‘alt’ attribute with all image elements]…
Firefox: 1.) Tools -> Add-ons -> ‘Web Developer’ 2.) View -> Toolbars -> Web Developer Toolbar -> Tools -> Select Validation [^]

Testing: Adobe Browser Lab [available from inside Dreamweaver; ‘onion skin’ option ~ how web page looks in two browsers simultaneously]; Adobe Shadow ~ http://www.adobe.com/shadow ~ test on own phones and tablets; http://www.browsershots.com; Opera Mobile Emulator [covers Amazon Fire/Samsung Galaxy/Motorola Xoom – doesn’t cover Apple devices] [http://www.opera.com/_developer/tools/mobile/]; Mobilizer [http://www.springbox.com/mobilizer/] ~ downloadable tool, facilitates preview in several different mobile browsers ~ shows portion of website visible by default in small viewport [doesn’t allow ‘auto-zoom’ feature]; test site in Safari for the iPad [http://www.ipadpeek.com] [^]

Adding ‘meta’ tags to page’s header:
[meta charset="UTF-8"] [specifies which character set is used in page content; W3C specifications declares this tag to be ‘essential’] [meta name="description" content="[brief description of page’s contents, used by search engines: two or three sentences that accurately describe page’s contents]"] [^]

iii. Validation: http://validator.w3.org – validate by URL/validate by upload/validate by direct input [^]

FTP: design page locally, use Dreamweaver/other FTP Tool to connect to online server & upload site files
– establish connection to remote server, using FTP address/username/password details
– uploading via Dreamweaver: Files panel -> click plug icon -> green light, ‘plugged in’ icon -> select files & click ‘up’, allowing Dreamweaver to upload any dependent files
– downloading: switch from ‘local’ to ‘remote’ view -> select remote server file -> click ‘down’ arrow
[ * files down-/up-loaded overwrite original local/server files ]
– popular desktop-based FTP options: FileZilla [Mac/Windows/Linux]; FTP Voyager [Windows]; CoffeeCup [Windows]; YummyFTP [Mac]/Fetch
– browser-based FTP: host company may offer a browser-based FTP Tool; free Firefox add-on = FireFTP [http://fireftp.mozdev.org/] [^]

Publishing with FTP: file transference ~ connect to host computer, using login credentials received post-sign up [web server address, username, password]…
FileZilla: enter web server address [eg. ftp.sitename.com], username and password in spaces provided along the top -> following authentication ~ bottom right displays host computer’s files and folders [bottom left = local files and folders]

Saved connection: File -> Site Manager -> New Site -> enter relevant info in General tab, then click Advanced tab & enter in the default local directory -> default remote directory will vary according to hosting server’s setup
Transferring Files: double-click file/folder -> right-click [Mac: ctrl-click] file & choose appropriate action -> drag file/folder from one window to the other
General information: once a file is on a server it’s accessible on the web; changes made on local pages are only accessible to surfers once they’ve been uploaded
Preventing access: prevent constantly-trawling search engines from adding your file to their index with the following meta tag: [meta name="robots" [availability to search engine robot] content="noindex"] [this page should not be added to the index] [^]

Development Platforms:
* PHP (“Personal Home Pages”/ “PHP Hypertext Preprocessor”): free, open-source – Facebook/Amazon/eBay.com
*.NET: Microsoft-owned; must be compiled into server-residing web application – nobody can see the source code embedded in the HTML
*JSP (“Java Server Pages”): like .NET re:compilation
*Ruby on Rails: like PHP re:open-source, interpreted code; Twitter/Groupon.com [^]

Content Management Systems: Drupal/WordPress [^]

HTML5:

• checking cross-browser support for CSS3 and HTML5 features – http://www.caniuse.com
• lowercase
• quotes for values
• single space between elements and attributes
• ensure correct nesting: [p][a href="link.html"]Link text[/a] and then the rest of the paragraph.[/p]

Essential page tags (/common elements):
[base href="http://www.mysite.com"]
[link rel="stylesheet" href="styles.css"] – referenced styling info
[script]
document.write("Hello world.");
[/script][src attribute for external scripts]
[meta charset="UTF-8" /] : character encoding

Required element in an html document: [title]

Paragraphs: [p]Example paragraph[/p]

Natural content divisions: ‘div‘ element, unique ‘id‘ attribute –
[div id="navigation"]Page navigation elements[/div]
[div id="primaryText"]Primary textbox[/div]
[div id="secondaryText"]Secondary textbox[div]
[div id="footer"]Footer[/div]
[h1]–>[h6] : headings of descending importance
[p]Paragraph[/p] : browsers automatically insert a line between paragraphs, just as a default line break is inserted before and after each heading element (can be adjusted with CSS)

Lists: ordered/unordered; descriptive term [dt], description data [dd]

 
[h2] : Tag suitable to display a headline for a bulleted list[/h2] [ - closing headline tag]
[ul] : Tag that specifies the beginning of an unordered list [bulleted]
[li] : Tag that specifies a bulleted list item - the first item, in this case[/li][ - closing tag for first list item]
[li] : Second bullet item[/li]
[li] : Third bullet item[/li]
[li] : Last bullet item[/li]
[/ul] : Tag that specifies the end of an unordered list

Forms: like tables, but also used to capture user information
- INPUT element - most versatile - use 'name' attribute to specify user input
[form action="form.php" name="application"] ('action' - specifies where to send form after clicking 'submit')
Gender: [input type="radio" name="gender" value="male"]Male
[input type="radio" name="gender" value="female"]Female
Name: [input type="text" name="name"]
Age range: [input type="checkbox" name="age" value="18-30"]18-30
[input type="checkbox" name="age" value="31-40"]31-40
Password: [input type="password" name="password"]
Resume Upload: [input type="file" name="resume"]
Comments: [textarea name="comments" rows="10" cols="40"]Comments go here[/textarea]
Favourite colour: [select name="color" size="3"]
[option value="red"]Red[/option]
[option value="blue"]Blue[/option]
[option value="green"]Green[/option]
( - 'size' - specifies number of options visible at once) [input type="submit" value="Submit"] ('Submit' button)
[input type="image" src="submit-button.gif" width="50" height="25" alt="Submit form"]
[when submitted : 'action' attribute invoked - data emailed/stored on web server database/written to another web page via scripting method - ASP, PHP, CGI - provided by hosting company/via FreeContactForm / EmailMeForm / SiteWizard / HotScripts / Wufoo Form Builder]
[/form]

Adding links: [a href="http://www.w3c.org"]Visit the W3C site[/a] [hyperlink
definition]
- CSS-customizable defaults: unvisited links - underlined and blue; visited links - underlined and purple; processing links - underlined and red
- linked pages - by default will open in the same browser window - change by adding 'target' attribute to opening [a], specifying a value of '_blank'/created window name [target="_blank"] (use absolute paths for separate sites)
- internal page navigation: [a name="section1"]Section 1[/a] ... [a href="#section1"]Jump to Section 1[/a]

- Email link: [a href="mailto: yourname@wherever.com"]Email me[/a]

a{color:#bcld33; text-decoration: none;}
a[href$=".pdf"]{display: block; overflow: visible; height:35px; padding-left:40px; padding-top:10px; background-image: url(pdf-icon.png); background-repeat: no-repeat;}
[p][a href="Catalog.pdf"]Download our catalog.[/a][/p]
[p][a href="demo.html"]Or see an online demo.[/a][/p]

Adding images: 'img' element used for images in web pages

- 'img' attributes:

• src="imagename.jpg" [required attribute; specifies image location]
• alt="Give a brief description of the image." [required attribute; text displayed in image's absence]
• height="100" [image height in pixels; helps speed image display]
• width="100" [image width in pixels; helps speed image display]

... attributes help browser create a space for the linked image ... image can be further customized with CSS

More container elements (no longer just [div][/div]):

• [article] : Content available for syndication[/article]
• [aside] : Quotes, links, background details[/aside]
• [div] : Any type of generic page content[/div]
• [footer] :Ownership, contact info[/footer]
• [header] : Titles, logos, navigation[/header]
• [nav] : Navigation section[/nav]
• [section] : Thematically-related to other sections, such as chapters in a book[/section]

Example usage of above-stated elements:

1. [header id="PageHeader"]Page's header content[/header]
2. [header id="TableHeader"]Table's header content[/header]
3. [nav id="primaryNav"][a href="home.html"]Home[/a]
[a href="about.html"]About Us[/a]
[a href="contact.html"]Contact Us[/a][/nav]
4. [aside id="PullQuote"]The [aside] element can be used for typographical effects like pull quotes or sidebars [<–/advertising/groups of nav elements/content considered separate from main page content][/aside]
5. [aside id="PullQuote" style="font-style: italic"; color:#666; margin-left: 50px; background: url(quote.png) no-repeat;]
6. …[blockquote] element – content from external source

Article	Section
* hold sections of page content	* hold sections of page content
* specifically for sections marked for syndication	* holds content not intended for syndication
* always use a natural heading to title the section	* always use a natural heading to title the section

– Example [section] usage:
[section]
[h1]Section title[/h1]
Section content
[/section]

– Example [article] usage:
[article id="blogPost01"]
[h1]Post title[/h1]
Post content
[/article]

– [figure] and [figcaption]: semantically connect images (/tables/blocks of text content) and descriptive text – eg:
[figure]
[img src="photo.jpg" alt="Students walk to class after a snow storm."] [figcaption]Students walk to class after a snow storm.[/figcaption]
[/figure]
…use styles to customize elements’ display

Fresh multimedia options: {audio} and {video} –

{audio} example –
{audio controls preload src="audio-speech.mp3"}{/audio}
{video} example –
{video controls preload src="video-speech.mp4"}{/video}

– {audio} and {video} attributes –

• autoplay
• autobuffer
• controls
• height="300" [pixels]
• width="250" [pixels]
• loop
• preload
• poster [still image displays while video loads]
• src

{source} tag usage: choice affords browser a certain amount of free will –
– {audio controls preload}
{source src="audio-speech.aac" type="audio/mp4"/}
{source src="audio-speech.wav" type="audio/wav"/}
{/audio}

[track] attributes:

• [default]: this track will be used unless the user’s preferences indicate otherwise
• [kind]: specifies content of text track – [captions], [chapters], [descriptions], [metadata], [subtitles]
• [label]: defines the title of the text track
• [src]: a required attribute that defines the URL of the text track
• [srclang]: a required attribute if [kind] attribute is set to “subtitles”; defines the language of the track text data

Web Video Text Tracks (WebVTT) – timing format = hours:mins:secs.milliseconds – example:

1
00:00:00.000 --> 00:00:05.000
Welcome to the fifth annual trade convention.

2
00:00:06.000 --> 00:00:15.000
Please join me in welcoming Dr William Barker to give our keynote presentation.
[...]

[ – check browser support for track element]

Geolocation: allows web developers to customize web pages; browser identifies location based on longitude and latitude coordinates from device’s GPS + triangulating location based on WiFi signals + interpreting graphical data from IP addresses

Geolocation example:

{!doctype html}
{html}
{head}
{title}Where Are You?{/title}
{style}#map{width: 100%; height: 800px;}{/style}
{script src="http://maps.google.com/maps/api/js?sensor=true”}
{/script}
{/head}
{body}
{p}There you are!{/p}
{div id="map"}{/div}
{script}
if(navigator.geolocation)
{var timeoutVal=10*1000*1000; navigator.geolocation. getCurrentPosition(displayPosition, displayError, {enableHighAccuracy: true, timeout: timeoutVal, MaximumAge: 0});}
else{alert("Geolocation is not supported by this browser"); }
var map=new google.maps.Map(document.getElementById("map"), options);
var marker=new google.maps.Marker({position: pos, map: map, title: "You are here"});}
function displayError (error){var errors={1: 'Permission denied', 2: 'Position unavailable', 3: 'Request timeout'};
alert("Error: "+errors[error.code]);}
{/script}
{/body}
{/html}


[Canvas]: natively handle animation and interactivity… Opens an appropriately-sized canvas [^]

‘Selector’ – CSS reference for web page content:
eg. [div#cabinets {wood: pine; color: white;}]
[div#upper {doors: glass;}]
[div#lower {doors: solid;}]: ‘div’ tells browser to start by looking for all content contained in div elements; text following hashtag is the value of an id attribute…

Tag selectors:
[div#upper{wood:pine; color:white; doors:glass;}]
[div#lower{wood:pine; color:white; doors:solid;}]
[div id="cabinets"]
[div id="upper"] – Upper cabinets go here – [/div]
[div id="lower"] – Lower cabinets go here – [/div]
[/div]
– any tag can be used as a selector in a style sheet, eg. [li {color:blue;}]

– Id selectors – id attributes must be unique – [#navigation {border: 1px solid black;}]

– Descendent selectors – [footer p {font-size: 12pt;}]
[footer = initial selector, p = descendent]

– Multiple selectors – [p, li{font-family: arial;}]
[div, #navigation, .CompanyBlue{color: #3a65c8;}]

– Class selectors – [a href="/index.html" class="homeLink"]Home[/a]
[.homeLink{color:red;}]…
[div class="CompanyBlue"]
[p class="CompanyBlue"]
[.CompanyBlue{color: #3a65c8;}]

– State selectors [/ ‘Pseudo Class Selectors’] – linked to ‘states’
– ‘[a]’ links: unvisited [known as ‘link’ when manipulating this state property], visited, active [in midst of being clicked]
– [a:link{color:blue;}]
– [a:visited{color:gray;}]
– [a:hover]
– [a:active]
[link states must be styled in this order]

– forms [dormant/active – :focus]; radio buttons [:indeterminate]…
[a{color:#f16e6e; text-decoration: none; -webkit-transition: color .5s; -transition: color .5s;}]
[a:hover{color:#446abf;}]

– Selector{property: value;} = Syntactical template: h1{font-family: verdana; color:green;}

CSS Styling Methods:
1.) Inline (/embedded): [p style="color:blue;"]Paragraph text goes here[/p]
2.) External [content placed in a separate text file – saved on web server with a .css file extension]
3.) Internal [included in ‘head’ section of a single page’s HTML]:
[html]
[head]
[title]Internal Style Sheet[/title]
[style]
body{font-family: arial; color:black;}
h1{font-family:georgia; color:purple;}
h2{font-family:georgia; color:green;}
[/style]
[/head]

Style Font Characteristics:

• stick with lowercase names in style sheets
• if font is known by two different names, include both in list
• font names comprising of two or more words – put in ‘scare quotes’
• include multiple preferred font families (‘cascading’)

[Example: p{font-family:'comic sans', 'comic sans ms', arial, sans-serif;}]
[font-forcing: http://webdesign.tutsplus.com/articles/typographyarticles/a-web-designers-guide-to-fontreplacement-methods/]

UNIT	DESCRIPTION	SCALABLE	EXAMPLE
Ems	1 em = current size of user’s browser	Yes*	font-size:2em;
Pixels	Screen measurement (72-96 dots/inch)	No	font-size:10px;
Points	Printed page measurement (72 points/inch)	No	font-size:12pt;
Percentage	100% = current font size of user’s browser	Yes*	font-size:120%;

*preferred by usability and accessibility experts; test variety of font sizes…most popular combination = ems (scalable text for body copy) and pixels (navigation)

 
COLORS:
Color names – 147 – http://www.w3schools.com/cssref/css_colornames.asp – h1{color: darkblue;}…
Hexadecimal color values – 216 – http://html-color-codes.com – h2{color: #346782;}…
RGB values/HSL – h3{color: rgb(0, 0, 255);} h4{color: hsl(240, 50%, 20%);}
Other properties: http://www.w3schools.com/cssref/#font#text

PROPERTY	EXAMPLE 1	EXAMPLE 2
font-style	font-style: italic;	font-style: oblique;
font-variant	font-variant: small-caps;	font-variant: none;
font-weight	font-weight: bold;	font-weight: bolder;
font-stretch	font-stretch: condensed;	font-stretch: expanded;
direction	direction: rtl;	direction: ltr;
word-spacing	word-spacing: 50px;	word-spacing: normal;
letter-spacing	letter-spacing: -2px;	letter-spacing: 1px;
line-height	line-height: 200%;	line-height:24pt;
text-decoration	text-decoration: underline;	text-decoration:line-through;
text-indent	text-indent:100px;	text-indent:5%;
text-transform	text-transform:uppercase;	text-transform: capitalize;
text-outline* [the ‘text-outline’ property is not supported by any of the major browsers]	text-outline: 1px black;	text-outline: 2px 2px yellow;
text-shadow*	text-shadow: 3px 3px gray;	text-shadow: 2px 2px 3px blue

* can also add a blur *

Shorthand: font-size, font-family, font-style – p{font: 12px arial italic;}

Style Text Inside Boxes:
box-sizing: border-box; [height & width values include borders & padding]
box-sizing: content-box; [height & width values don’t include borders or padding]…
[div#section1 {box-sizing: content-box; width: 150px; height: 200px;}] [/% figure]
…alignment: text aligned horizontally, within its container ‘box’

text-align: left;/right;/center;/justify; This text is left-aligned. This text is left-aligned. This text is left-aligned. This text is right-aligned. This text is right-aligned. This text is right-aligned. This text is center-aligned. This text is center-aligned. This text is center-aligned. This text is justified. This text is justified. This text is justified. This text is justified.
text-align:justify; [‘text-justify’ property only works in Internet Explorer version 5.5 and newer – not in Google Chrome/Firefox/Safari/Opera] text-justify:auto;	justification method is determined by the browser
text-align:justify; text-justify:distribute;	same as ‘newspaper’ option, but optimized for East Asian content
text-align:justify; text-justify:distribute-all-lines;	as above, plus last line justified
text-align:justify; text-justify:inter-word;	spacing between words is increased; last line is not justified
text-align:justify; text-justify:inter-ideograph;	spacing between ideographic characters and words is increased or decreased
text-align:justify; text-justify:inter-cluster;	justifies content without any inter-word spacing; optimized for East Asian content
text-align:justify; text-justify:kashida;	stretches cursive scripts; used primarily for Arabic fonts
text-align:justify; text-justify:newspaper;	spacing between words and letters is increased or decreased

 
Vertical alignment – vertical-align:top; vertical-align:bottom; vertical-align:middle; vertical-align:sub [subscript]; vertical-align:super [superscript]

Space In And Around The Box: padding = space around content inside box borders; margin = space outside box borders [p style="margin: 5px[top & bottom] 8px [left & right];"] … [p style="padding: 2px[top] 4px[right] 6px[bottom] 8px[left];"]

Borders: div#footer {border: 2px 0px;}…p.quote{border-width: 1px; border-color: blue; border-style: dashed[/dotted/solid/double/groove/ridge/inset/outset]; padding:5px;}…border-radius:25px; [easily round the corners of box borders]

New CSS3 Features: border effects; gradient fills; opacity control; text effects; font control; 2D & 3D transformations; animations; advanced selectors

CSS3 Property	Description	Code
border-radius	rounded corners	div{border-radius: 10px;}
border-image	assign an image to run around edge of an object	div{border-image: url(border.png)repeat;}
box-shadow	apply one or more drop-down shadows to an object	div{box-shadow: 10px 10px 5px #888888;}

 
1.) define solid border property & assign width -> 2.) add border-radius property –
div{border-style: solid; border-width: 14px; border-radius: 18px; color: #e2972c;} …

[head]
[style type="text/css"]
div{border-style: solid; border-width: 14px; border-bottom-right-radius: 2em; color: #e2972c;}
[/style]
[/head]
[body]
[div]
[p]
[span class="headline"]Daily Special[/span][br /]
Split Pea Soup
[/p]
[/div]
[/body]

Border Image: Webkit[Safari], Moz[Mozilla Firefox], O[Opera] –
div {border-width: 14px; -webkit-border-image: url(border1.png) repeat; -o-border-image: url(border1.png) repeat; -moz-border-image: url(border1.png) repeat; border-image: url(border1.png) fill repeat; box-shadow: 6px[right-side offset] 6px[bottom offset] 10px[blurring] #888888[drop shadow colour – negative number makes shadow appear on left side instead, eg. -15px];}

Gradient Fills: browser-specific background-image property –
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from (#5f72e8), to (#172576)); [Safari 4+, Chrome 1-9]
webkit-linear-gradient(#5f72e8, #172576); [Safari 5.1+, Mobile Safari, Chrome 10+]
Firefox 3.6+: moz-linear-gradient(#5f72e8, #172576);
IE 10+: ms-linear-gradient(#5f72e8, #172576);
Opera 11.10+: -o-linear-gradient(#5f72e8, #172576);

Starting position: top, bottom, left – eg, background-image: -moz-linear-gradient(-45deg, #le5999 1%[specifies…], #2989d8 50%[…whereabouts of…], #7db9e8 100%[…colours.]);

Opacity Control: 1.0 – fully visible – 0.0 – completely invisible; 0.6 = 60% opacity

transparentbox{
width: 400px;
height: 120px;
margin-left: auto;
margin-right: auto;
background-colour: #ffffff;
border: 8px solid #3e3e3e;
opacity: 0.6;
color:rgba(255, 255, 255, 0.5);
filter: alpha(opacity=60)[IE8+earlier];}

Advanced Text Control: specify custom fonts using the @font-face rule –
h1{font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 80px;
text-align: center;
letter-spacing: -2px;
color: #2b4c7a;
-webkit-text-stroke: 1px #e83d3d;
text-shadow: 2px[‘x’ offset] 2px[‘y’ offset] 3px[blur] #3e3e3e[color];}

h1{font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 120px;
color: #0D4384;
text-shadow: rgba(0, 0, 0, 0.9) -1px[‘x’ offset] 0[‘y’ offset] 3px[optional blur amount], rgba(0, 0, 0, 0.9) 0 -1px, rgba(255, 255, 255, 0.9) 0 1px, rgba(0, 0, 0, 0.5) -1px -2px;}

…Using custom fonts: ‘@font-face’ rule & a hosted font – CSS style sheet/
[head]
[style]
@font-face{font-family: AwesomeFont[doesn’t have to match filename of hosted font];
src: url('Gotham_Reg.ttf');
[/*IE8 and earlier:]url('Gotham-Reg.eot');}
[/style]
… – once defined:
h1{font-family: AwesomeFont, Arial, Helvetica, sans-serif;}

– TypeKit: 100s of hosted web fonts – sign up –> [script], embed in [head] section that references TypeKit account – code is limited to work only on specified URLs

TRANSFORMING GRAPHICS:

Value	Code Example
Rotate X or Y only	div{transform: rotateX(120deg);}
Rotate	div{transform: rotate(10deg);}
Scale X or Y only	div{transform: scaleX(1.5);}
Scale	div{transform: scale(1.5);}
Skew X or Y only	div{transform: skewX(10deg);}
Skew	div{transform: skew(20deg, 20deg);}
Translate X or Y only	div{transform: translateX(50px);}
Translate	div{transform: translate(50px, 50px);}

div{transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
-o-transform: rotateX(120deg);
-ms-transform: rotateX(120deg);} [^]

Animating with CSS3: transition from one set of CSS styles to another using the ‘@keyframes rule’ – 0%/from [style 1] —> 100%/to [style 2]…

[@keyframes [/@-moz-keyframes/@-webkit-keyframes/@-o-keyframes] CoolColors{
from {background: blue;}
to {background: black;}
}]


[default animation duration = 0s] [examples specifying different durations:]
div {width: 200px; height: 200px; background: yellow; animation: CoolColors 5s; -moz-animation: CoolColors 5s; -webkit-animation: CoolColors 5s; -o-animation: CoolColors 5s;}

@keyframes [@-moz-keyframes/@-webkit-keyframes/@-o-keyframes] CoolColors2{
0% {background: #47619d[color change]; left[positional]: 0px; top[change]:0px;}
25% {background: #d0e545; left:100px; top:0px;}
50% {background:#45a3e5; left:100px; top:100px;}
75% {background:#f0cd29; left:0px; top:0px;}
100% {background:#f87386; left: 0px; top: 0px;}

Animation properties: duration (secs); timing-function:ease-in/ease-out/ease-in-out/linear; delay (secs); iteration-count [default=1]/[‘infinite’]/[specify number]; direction [‘normal’/’alternate’ (forwards, then backwards)]…

div{width:200px; height:200px; background:yellow; [-webkit-animation-.name.duration.timing-function.delay.iteration-count.direction/-o-animation-name/-moz-animation-name] animation-name: CoolColors2; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate;} [^]

Platform Differences: traditional computers [browser window size is independent of monitor (ie can shrink/expand)]; tablets; mobile phones…

Multiple-platform testing: http://quirktools.com/screenfly…

Targeting specific platforms & browsers: http://css-tricks.com/resolution-specific-stylesheets & http://docs.rhomobile.com/rhodes/css-framework

Example html for different platforms [angle brackets should be used in the actual coding, rather than square brackets]:
[link rel="stylesheet" media="screen" href="default.css"]
[link rel="stylesheet" media="print" href="print.css"]
[link rel="stylesheet" media="screen and (max-device-width:480px)" href="mobile.css"]...

Site designs should be ‘responsive’, ‘elastic’, ‘fluid’, ‘liquid’ – percentages used for this purpose – eg: [#header{width:100%; height:10%;}]
[#columnA{width:30%; height:70%;}]
[#columnB{width: 70%; height:70%;}]
[#footer{width:100%; height:20%;}]...


Responsive web design articles: http://www.alistapart.com/articles/responsiveweb_design/fluidgrids/ & http://css-tricks.com/the-perfectfluid-width-layout/…

Navigation method: web designers must consider human fingers working on small screens – http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial & http://bradfrostweb.com/blog/web/responsive-navpatterns

Coding for Browser Differences: design for HTML specifications; research and plan re: browsers and HTML5 & CSS3 support [http://www.findmebyip.com/litmus] [http://html5test.com] [http://caniuse.com] [http://html5readiness.com]

Responsive Design: developing web layouts and corresponding code that updates ‘on-the-fly’ to optimally display in the ‘viewport’ size [different browsers, different devices]… CSS3 ‘media queries’ detect browser size and tells page to load appropriate stylesheet [containing appropriate layout systems, font sizes, image optimization – again, angle brackets rather than square brackets should be used when actually writing code based on the following examples]:

[link href="480.css" media="only screen and (min-width: 480px)" rel="stylesheet"]
[link href="600.css" media="only screen and (min-width: 600px)" rel="stylesheet"]
[link href="768.css" media="only screen and (min-width: 768px)" rel="stylesheet"]
[link href="992.css" media="only screen and (min-width: 992px)" rel="stylesheet"]
[link href="1200.css" media="only screen and (min-width: 1200px)" rel="stylesheet"]
[link href="1382.css" media="only screen and (min-width: 1382px)" rel="stylesheet"]


[‘link’ – establishes a link between a document and an external resource; used to link to external style sheets]
[‘rel’ – specifies relationship between current and linked documents] [^]

Creating Accessible Sites: platforms, browsers, visual, auditory, physical, speech, cognitive, neurological – WCAG – PROU [Perceivable, Robust, Operable, Understandable]:

• provide text alternative for non-text content – large print, Braille, speech, symbols, simpler language
• provide alternatives for time-based media
• content can be presented in different ways without losing information or structure
• easy for others to see & hear content – separate foreground from background; keyboard-accessible; enough time given to read and use content; avoid seizure-inducing designs
• easily navigable; readable; predictable
• input assistance; compatible with current & future user agents, including assistive technologies
• [http://www.w3.org/TR/WCAG20]
• [http://www.section508.gov – US Federal Government re people with disabilities]
• [W3C Web Accessibility Initiative – http://www.w3.org/WAI]
• [http://html5accessibility.com]
• [http://wave.webaim.org – Firefox add-on/Dreamweaver extension, determines possible barriers to site accessibility]
• [Total Validator – can be installed/Firefox add-on – http://www.total validator.com]

[^]

Following Best Practices:

1. use standard, W3C-approved code
2. avoid ‘deprecated’ code
3. use code appropriately – ‘heading’ tag [h1] - [h6] for headlines etc…
4. text-alternatives for images and multimedia conveying meaning
5. text transcripts for anyone unable to access audio content
6. styles that enhance content, not distract from it
7. images require alternative text to describe image to non-visual users AND links to non-visual methods of delivering the same information
8. avoid relying on font characteristics to deliver important content
9. choose a content-appropriate color palette, with sufficient contrast to ensure readability [contrast should achieve a (4.5:1) ratio] – http://juicystudio.com/services/luminositycontrastratio.php
10. if target audience is children, use bright, bold colors
11. consistent navigation and branding – site’s logo/header & navigation in the same place on all pages
12. provide as many navigational aids as possible [search functions, site maps]
13. links: descriptive, well-placed, easily readable – avoid ‘click here’/‘read more’ – link color should be adequately separated from the surrounding text, even for colorblind users – if an image is used as a link, a text alternative is required
14. enable content to be printed quickly and efficiently
15. provide PDF version of site content [http://www.printfriendly.com]
16. create printer-friendly style sheets [http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/]
17. mobile-friendly site: branding; navigation; message; call to action; flash animations not supported in iPad/iPhone platforms
18. create an app for additional content.

[^]

Site Architecture: geared towards consumer; define the audience – 1. business and marketing goals for the project 2. customer segments targeted

Interviewing the client – 1. number of customer groups 2. customer segment prioritization 3. any segments site should ignore? 4. profile each priority customer type 5. barriers to brand engagement/purchasing – cost? 6. value of website to each customer type? How will site be used?

Developing user personas: – interview actual customers – create fake profiles [‘personas’] to represent different customer groups – name, picture, gender, age, income, education, list of brands they like, barriers to brand engagement (expense, time, brand perception), online habits (including social media), motivators

Customer segmentation: customer matrix – ‘verticals’ – customer group relation; helps narrow website focus

UserFlow/Diagrams: think through several real-life scenarios for users: how will they find the site? –> specially-designed landing page: ‘lifestyle’ landing page –> product category landing page; what is the user looking for on the site? customized landing pages [/product landing/lifestyle landing] for users arriving from a direct search/social media/offline marketing [^]

Sitemap Development: all pages – how they relate to one another; when drawing up a sitemap for a large site, focus on one section/page at a time – free, basic tool @ Slickplan.com

Categorizing and Prioritizing Information: anticipate and give prominent treatment to most important elements – Primary – > ‘primary navigation’ – ‘tabs’ [set of important categories, takes you to specific, section-introducing landing page; no more than 5-7 options]

Drawing and numbering pages on a sitemap: to ensure good site usability, limit a site’s depth to three levels, thus avoiding an excessively flat/deep structure

		HOME 0.0
‘LEVEL 1’	1.0	2.0	3.0	4.0
	1.1	2.1	3.1	4.1
	1.1.1	2.1.1	3.1.1	4.1.1
‘LEVEL 2’	1.2	2.2	3.2	4.2
	1.2.1	2.2.1	3.2.1	4.2.1
‘LEVEL 3’	1.3	2.3	3.3	4.3
	1.3.1	2.3.1	3.3.1	4.3.1

[^]

Successful website design = interaction design + interface design… interaction [getting from point A to point B – provision of appropriate buttons, menus, scrolls etc], interface [presentation, layout, organization, visual design; do elements look clickable & are they suitably placed? navigation & content clearly segmented?]…

Page-level planning –> good visual designs… 1. sitemap 2. wireframes [detailing content, interaction, navigation plan (all components numbered and annotated); writers know how much to write, developers know which form elements to use]

– ** essential for ‘scalability’: only create a wireframe for each unique page layout – these become site ‘templates’; identify unique page templates in your sitemap & focus wireframing efforts on them

– ** eCommerce: all unique data and images are contained in a Content Management System [database] and fed into the template to create a unique page for each particular product

Example Template Names: 1. Home 2-4. Customized Landing Pages 5&6. Listings 7&8. Details 9. Store Locations 10. Order History 11. Login/Password Recovery 12. Registration 13. Customer Service 14. Shopping Cart 15. Billing/Shipping 16. Payment 17. Confirmation 18. Terms/Privacy… * once templates are finished, sitemap can be added to – specifying which template is used for each page *

Visual Design’s Role in Usability: elemental layout influences degree to which site is user-friendly… “affordances” = making things suggestive of their functions: visually differentiate clickable and non-clickable items; providing visual feedback [where user is, how long till completion]… CONSISTENCY of elemental layout from homepage to the deepest subpage

‘Progress Trackers’: simple visual feedback device [not interactive]; display whole linear process, highlighting current step

‘Breadcrumb Navigation’: shows where current page lives in site’s hierarchy; interactive [^]

Graphic Design Principles: grid structure; clear visual priority – ‘big, medium, small’ strategy [employed by Apple.com]… ‘grouping’ and ‘nesting’ gives strong functionality clues & ‘relationship’ clues

Colors: avoid too washed out/too dark; dark backgrounds & light text –> dramatic effect, hard on the eyes; * lots of content = light-colored background and dark text * [‘off white’ background, ‘dark grey’ text]; avoid saturated backgrounds

Fonts: some variety adds vibrancy, too much makes it inconsistent; * one font for headlines, one for captions, one for body text * [^]

Presentation Layer: underlying code behind the pretty side [graphics, button, photography] of the web page – includes HTML, HTML5, CSS, JavaScript, jQuery, Ajax

Creating Multimedia Interfaces: Adobe Flash [users need Flash Player installed in their browser] [Apple mobile platform doesn’t support Flash .surf files (bandwidth, battery-draining issues)]; mix of HTML5 (‘canvas’ element), CSS & other scripting languages (jQuery) [http://agent8ball.com]; portion of/entire interface developed in Adobe Flash & exported as self-contained .surf file; DHTML, JavaScript, jQuery, Ajax

– HTML as the scaffold, scripting languages control interface elemental behaviour and page-displayed content; ‘carousel’ [photo gallery display]; ‘proxy icons’ [rollover preview]

JavaScript: robust scripting language; complex animation; interaction effects – dropdown menu/expanding window layer

jQuery: lightweight form of JavaScript – http://docs.jquery.com

AJAX: JavaScript & XML [eXtensible Markup Language]; allows data processing to occur ‘in the background’ on certain parts of the page; shopping carts, price totals, news headlines, date/time [^]

Advanced CSS Graphic Effects: [previously – bitmap graphics hand-crafted by designer familiar with Photoshop – hand-changed – increase website loading time]…

(code example that shows the manipulation of various graphic properties for all ‘link’ [‘a’] elements:)
a{background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top, #FFFFFF, #F3F3f3);
border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset, 0 0 3px rgba(0, 0, 0, 0.25);
color: #A6A6A6; display: block;
font-family: Georgia, Times, Times New Roman;
font-size: 1.9em;
letter-spacing: 0.1em;
padding: 0.5em 0.2em;
text-shadow: 0 1px 1px #FFFFFF;
text-transform: uppercase;}

(code example that shows the manipulation of various graphic properties for all ‘link’ [‘a’] elements when the cursor is hovered over the ‘link’ text…)
a:hover{background-color: #F3F3F3;
background-image: -moz-linear-gradient(center top, #F3F3F3, #FFFFFF);
box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 6px rgba(0, 0, 0, 0.5);
color: #808080;} [^]

Getting Creative User Interface Ideas: RESOURCES – AWWWARDS; Smashing Magazine; Design Shack; Web Creme; jquerylists.com [free carousels]; jquerybyexample.blogspot.com [lightbox contained therein]; wowslider.com [professional carousels for sale] [^]

WORDPRESS: one of the most widely-used web publishing platforms; great platform for testing web design skills; developed in 2003 as a blogging tool — evolved into a highly customizable, present-day CMS, used by 15% of all websites today; well-established, backed by active support forum; free, open-source, constantly- developed; takes care of security, RSS feeds, SEO, image optimization; built using PHP web programming language, relying upon a MySQL database to provide content [^]

… Two options re: WordPress usage
– 1. Visit WordPress.com, sign up for an account and use their servers OR 2. install WordPress on own web hosting package

– WordPress Auto-Install: feature offered by MediaTemple, HostGator, DreamHost, and BlueHost -> 1. click install, log into account, arriving at cPanel home page -> ‘Site Builders’ WordPress auto-installer -> ‘Install a brand new version of WordPress’ -> configure site name, administration area password -> ‘Complete’ – site will be set up at domain root [www.example-domain.com] and be immediately accessible -> access administration area at [www.example-domain.com/wp-admin]; confirmation email should be sent by host

Manually Installing WordPress: 2i.) download latest version of WordPress [www.WordPress.org] [small zip file]; 2ii.) create a MySQL database via web host cPanel interface [https://my.bluehost.com/cgi/help/000006] and create a user account, ensuring they have ALL PRIVILEGES for accessing & editing database; 2iii.) unzip downloaded file -> ‘WordPress’ folder -> open file named ‘wp-config-sample.php’ in text editor [Notepad/TextEdit]; 2iv.) 4 pieces of information to be changed – Database Name, Database User, Database Password [settings saved in part one], copy-and-paste information from [https://api.WordPress.org/secret-key/1.1/salt/] in place of sample lines in file; 2v.) save file with new name – “wpconfig.php” [wp-config.php]; 2vi.) once all files are ready, upload contents to web server: open FTP software, connect to host -> upload contents of ‘WordPress’ folder to the root of your server’s web directory – usually /www or /htdocs [check with host] [FTPprogram.php is included in WordPress install package]; 2vii.) once files are uploaded, open web browser and visit installation page for new site -> YOURDOMAIN/wp-admin/install.php: set site name, login details, email address; 2viii.) click ‘Install WordPress’ [troubleshooting instructions can be found on WordPress website] [^]

WORDPRESS DASHBOARD
[- * site control centre * direct link to front end of site *]

Dashboard Access
Area for Creating and Uploading Content	* Posts & Pages *: Posts > Add New/ Pages > Add New [main ways to generate site content] [default: posts display in continuous list on home page] [default: pages displayed separately, accessed via menu/navigation]
Site Admin Area – Settings, Appearance, Plugins

 
WordPress Post/Page creation: enter title, add content in large text area [tab in the top-right enables switch from ‘Visual’ to ‘HTML’ to facilitate the creation of more advanced pages & posts]…
Toolbar: format text, insert hyperlinks; ‘Upload/Insert’ – allows you to add images, audio, video; ‘Publish’ [saves work & makes it go live]; ‘Save Draft’ [return to finish work later]; ‘Preview’ [new browser tab/ window]; click ‘Visit Site’ link in top left of window/type domain name into the address bar to view website content

WordPress Settings: Basic Settings -> Select your tagline and time zone [save changes] OR Settings -> General [left-hand side of page]… Settings menu sub-pages facilitate site individuality

WordPress Theme: collection of files that control site appearance; simplest: one CSS file for styling & an index file that generates HTML for browsers to read -> more complex: particular content templates & specific pages such as search results

Choosing & Installing a Theme: [WordPress.org – list of themes] left-hand menu -> Appearance -> Manage Themes -> Add Themes -> Install -> Activate – certain amount of flexibility re: themes – earlier themes remain as a fallback

Customizing an Existing Theme: Appearance > Header – upload image/photo and crop it to correct size from within WordPress; suggested: stick with TwentyEleven theme to begin with; set background image or colour for every page; create a navigation menu with links to various site pages; determine overall site layout

Organization of Content – ‘Categories’ and ‘Tags’: * content is most important part of site – vital it’s organized efficiently & displayed optimally; Posts [left-hand dashboard menu] -> hover over title [“Hello World!”] – click ‘Edit’ link that appears… ‘Example Category’, ‘Example Tag’, click ‘Update’ in top-right panel; ‘Category’ aids content taxonomy – in time you can add a category link to the navigation menu -> Appearance -> Menus – create ‘Navigation’ menu entry, add ‘Sample Page’ and the ‘Example Category’ – ‘Save Menu’ – from ‘Theme Locations’ select ‘Navigation’ for Primary Menu dropdown – ‘Save’ there.

Plugins: add functionality to site: very simple -> complex [enhance site’s inner workings -> e-commerce solutions]; install from within admin area/upload them manually — Plugins -> Add New -> Type “NextGEN Gallery” into search box & click ‘Search Plugins’, ‘Install Now’ & ‘Activate Plugin’…’Gallery’ link appears in left-hand menu -> massive array of options for inserting images & galleries into posts/pages… upload images via NextGEN’s plugin tool -> new button in the format menu along top of main text area allows you to select gallery & insert into post/page -> ‘update’ post & gallery is now online…

Further Reading: documentation on every aspect of the software is at: [http://www.WordPress.org].

Why WordPress as a CMS?: free [except premium themes and/or plugins] to download and install; easy; scalable [content stored separately from theme, thus changes can be made to the design files without affecting content]; manageable – multiple users in multiple locations can manage the site.

WordPress Planning: time-sensitive content – posts; non-time-sensitive content – pages; social media integration/advertising/e-commerce options, can be tailored to own requirements

Under Construction: site visitors see an ‘Under Construction’ sign; authorized site users can log in and access all site aspects… from the dashboard side panel: Plugins -> Add New -> Search ‘under construction’ -> Install Now (‘Coming Soon’) -> Activate link… Settings -> Coming Soon -> renovated: Maintenance Mode; new site: Coming Soon -> Save Settings…once site is complete, return to settings and disable plugin

Themes for CMS: dictates layout, colors, fonts, image locations; FREE: Appearance -> Themes -> Install Themes; Skillsology course uses ‘Vantage’ theme [ Themes -> Install Themes – ‘Upload’ – ‘Choose File’ (find .zip file on hard drive)] -> Install Now

Theme Customization: usually stored in dashboard Appearance menu; uploading the logo should be an early task; open new browser tab to toggle between changing settings & viewing changes
Page Templates for Content Management System: mostly provide header, footer, sidebar, main content areas [plus some others depending on the theme]… by default, theme’s home page [/ ‘Front Page’] will display the latest posts, unless a static page is selected to use as the front page; Vantage provides additional template options, allowing you to identify the best template for each page: header [across top of page, contains site logo & content area to the right… Appearance -> Theme Settings -> Logo Panel] -> primary navigation — [Appearance -> Menus; Appearance -> Theme Settings -> Navigation Panel] -> slider — [Appearance -> Theme Settings -> Home Panel] -> grid of smaller content areas [Appearance -> Home Page panel]…default front page settings: Settings -> Reading… some themes automatically change these settings.
URL Settings for CMS: best to customize permalink settings; Settings -> Permalink Settings

Plugins for CMS: Page Builder: recommended to be activated with the Vantage theme; Akismet: spam filter for comments on blogs; Gravity Forms: premium form creation [install -> Dashboard -> Forms – primary view displays all the forms currently in use][form fields can be tweaked via Gravity Forms’ conditional logic][offers form integration with email marketing (Campaign Monitor/MailChimp), customer payments, coupons, user registration, client-invoicing system (Freshbooks)]

GAD for WordPress: track the traffic your site is receiving [http://www.google.com/analytics -> sign up -> search WP plugin database for GAD
Google Publisher Plugin: manage advertisement insertion into site, after creating a Google Adsense account [https://www.google.com/adsense]

Jetpack by WordPress.com — 1.) sign up for free account on WordPress.com; 2.) install Jetpack [www.jetpack.me] and connect to free account — includes sharing settings to connect blog to social networks
WordPress SEO — Yoast’s WordPress SEO — post-installation: new group of Settings Panels appears in WordPress dashboard — new WordPress SEO panel inside each page and site post – facilitates title and description customization for search engines and social networks [Further Reading: 56 Brilliant WordPress Tutorials – http://www.creativeblog.com/web-design/wordpress-tutorials-designers-1012990]

WordPress Custom Page Templates: WordPress site receives URL request – WP decides which template will be used to format content
PHP = scripting language running on web servers, generating HTML code that browsers can read… PHP template tags [angle brackets should be used in actual coding, rather than square brackets]:
[?php get_header();?] [?php get_sidebar();?] [?php get-template_part('content', 'page');?] [?php comments_template(' ', true);?] [?php get_footer();?] – tells site where to go and look for content and how to display them.

More WordPress Custom Page Template Info: all themes have a template file – index.php – typically, each theme has templates for: single blog post [single.php]; page [page.php]; list of blog posts [archive.php]; search results [search.php]; [header.php]; [footer.php]; [sidebar.php].

Creating Custom Page Templates: use existing template: navigate to /wp-content/themes/twentyeleven/ using FTP program… locate sidebarpage.php -> make a copy by right-clicking & selecting ‘Duplicate’/downloading and re-uploading with modified name [*each filename must be unique* – renew filename to ‘mytemplate.php’] -> Appearance -> Editor — experiment with ‘mytemplate.php’ – deletion of [?php comments_template(' ', true);?] stops WP fetching the comments section for this template Select new template for use with existing page -> WP admin area: Pages -> All Pages -> Edit existing page: Page Attributes — Template = MyTemplate — then Preview Changes & Update… Upload example custom template files on WP site — Example Template 1 [display latest posts in a grid] — upload post-grid-page.php to WP theme folder -> Create a new blank page & set template to ‘Post Grid Template’ -> watch in awe as page automatically updates as new posts are added. [^]

Why Use HTML Email for Marketing?: email readers have benefitted from rising HTML & CSS support; adding images, color and other formatting [poor choice for confirmation email; good choice to illustrate new attractions; problematic if email reader is not set up to display images]; cost-effective; fast; target specific users [higher sales than through random mailings]; measureable results – emails can be tracked [which opened/which ignored/click-through rate/those that resulted in sales (for future emulation)]. [^]

HTML Email Best Practices: email size is important, since emails have to compete with list of email folders/ads/application links/lists of messages
— most designers stick with maximum email width of 600pixels; initial view/preview: get message’s purpose right in front of users at the very start; stick to single- or double-column layouts for HTML email [any more tends to distract from primary purpose]

Tables for layout: use Photoshop to lay out tables, then slice and export images & HTML straight from Photoshop; always include height and width of each table cell; turn off default spacing in and around the cells; avoid background images in table cells; [http://www.sitepoint.com/how-to-code-html-email-newsletters/]

Embed CSS and avoid shorthand – [style="font-size:10pt;font-weight:bold;color:orange;"]Loaded Vegetable Chilli; ensure CSS is up-to-date: [http://www.campaignmonitor.com/css/]; avoid anything beyond standard HTML and CSS – no JavaScript etc [probably won’t work; likely to be labelled as spam]; avoid embedding multimedia [animation/flash/video – best to link it] [ensure html5 and video is up-to-date: http://www .campaignmonitor.com/blog/post/2905/html5-and-video-in-email/]; use absolute paths for links and images: eg. [a href="http://www.mywebsite.com/images/product-photo.jpg"][/a][stored in folder on website’s host server]” alt="This image shows a photo of ABC product."…

Make it easy for readers to unsubscribe – include a valid unsubscribe method in order to remain compliant with legal requirements – obey government guidelines: US – http://business.ftc.gov/documents/bus61-can-spam-act-compliance-guide-business; test thoroughly: most email service providers include testing tools [/Litmus/MailingCheck/SpamAssassin].

Reduce Chances of Email Being Marked as Spam: only email people who have given you permission to do so; follow legal guidelines; avoid spam trigger words & phrases; be honest: [http://blog.mannixmarketing.com/2009/08/spam-trigger-words/; http://emailmarketing.comm100.com/email-marketing-tutorial/emails-going-to-junk.aspx].

Improving Open and Click-through Rates: recipient-appropriate content: http://selfie.lyris.com/views/2; deliverability – avoid ‘spammy’ words, excessive CAPS, excessive punctuation marks; actionable – use appropriate verbs — ‘Meet the Legendary Ming Tsai at Blue Ginger’ vs ‘Ming Tsai at Blue Ginger’; personalization; clarity; brevity; consistency between subject line and email content [6-Step Secret Sauce for Awesome Email Subject Lines]; focus on one thing you want email to do, removing extraneous content; credible senders – sender line, sender address… [^]

6 TIPS FOR BETTER MOBILE EMAILS:
1. get their attention; 2. simplify – get them to ‘landing page’; 3. design for touch [fat thumbs]; 4. design for immediate action; 5. use alt tags; 6. test email rendering – on multiple devices -> Litmus/Return Path. [^]

[ESPs]: best way to send bulk email; manage recipient list, store & send messages, track open & click-through rates; avoids having messages from personal email account marked as spam
Considerations When Choosing ESP: design services and/or templates offered? ease of use of open & click-through tracking tool; image storage space? support? subscriber/recipient list management? email-testing tools? ease of email build…
… sign up with ESP -> access personalized website, facilitating email campaign management -> keep track of all emails; sent, open, click, unsubscribe, bounce stats; top performing links, Facebook shares.
ESPs That Skillsology Recommends: Constant Contact; Campaign Monitor; MailChimp; iContact; Vertical Response; Campaigner; YMLP; E Shot; Dot Mailer; Little Green Plane. [^]

Getting Started with eCommerce: integration of several systems – Customer Database – Product Database – Revenue Receiving Point – [secure data transfer]
Capturing PII: user name; email; street address; database storing this information must reside on ‘Safe Harbor’-certified server; if eStore collects customer data, a page must be created that discloses company’s adherence to PII laws [‘Privacy Policy’] [http://www.prvd.com/privacy.aspx]
EU/US Safe Harbor-compliant hosting: [http://www.connectria.com/solutions/eu_safe_harbor_hosting.php]; TRUSTe Safe Harbor services: many licensed, DIY, hosted, open-source ecommerce solutions available [Magento/StoreFront – powerful, flexible, suitable for larger stores; require programming to customize & configure].
DIY & Hosted Solutions: online templates to choose front-end design from; companies host it online for a monthly fee; build & host normal website in one place — build & host store with another host [user interface seamlessly links two sites] [Volusion.com; Yahoo! Small Business; Go Daddy Web Store Design Service]. [^]

WordPress eCommerce: plugin solutions – Shopp [installation services for about US $100]; OSCommerce – 1.) download & install WP.osC. [^]

SSL Certificates: when shopping online, a small ‘lock’ icon appears in the URL of browser & URL starts with https — indicative of secure socket layer
– when you submit info the browser will encrypt your data and pass it securely through the internet; * small piece of software issued by a recognized authority, residing on your secure server and validating your website’s identity and domain ownership *
– use the openssl toolkit to create a ‘RSA Private Key’ and a… [^]

… [CSR]: self-sign a temporary certificate, which is valid for a year, by adding code & installing on browser; CSR sent ideally to a Certificate Authority who will validate your identity and issue you a signed certificate…
Major web browsers have a small set of ‘root certificates authorities’ that they trust – if certificate is not signed by [VeriSign, Comodo, Entrust, GlobalSign, GeoTrust], or is self-signed, the browser may trigger a warning that the user sees – makes site look less secure and credible…
Some sites – for example RedEnvelope.com – include small graphic & text combo to put customers’ minds at ease
Price: US$50-150/year for SSL certificate: list of credible certificate providers [http://www.sslshopper.com/certificate-authority-reviews.html]. [^]

Payment Gateways:

1.) Customer ->	2.) Safe Harbor Server With SSL Certificate ->	3.) Payment Gateway Routes Encrypted Data To & From Banks & Credit Card Companies	4.) Credit Companies Verify Accounts;
7.) Purchase complete	6.) <- Gateway Relays To Online Store. Online Store Ships Product		5.) <- Banks Exchange Funds

 
Software application that bridges site’s shopping cart with the bank and credit card company systems; protects against fraud – prevents transactions from reported lost or stolen cards; fast – verifies and processes cards in the blink of an eye
Examples – Authorize.net, Amazon, PayPal, VeriSign — setup fee, small monthly fee, micro per-transaction fee…
Payflow Link – hosted payment gateway solution – start processing credit card payments online in a few hours: *checkout –> secure, interim PayPal page to enter details –> back to site* …
‘quick cart’ – previews order in a small window; user can continue shopping & keep tabs on what they’ve set aside. [^]

Shopping Cart Design Best Practices: the heart of an e-commerce website
Two main options — 1.) ‘quick cart’ in website header [upper-right corner shopping cart icon; upon rollover/click-through, a small pop-up window appears [via JavaScript, AJAX, CSS], with short summary of items bagged [close & continue shopping/proceed to dedicated checkout page]
2.) dedicated checkout page: recaps user’s order prior to payment [best for usability]; [summary of items the user has collected, with relevant visual representation, enabling quantity adjustment, item removal, and details of shipping costs]
* Give user an indication before they begin shopping; offer incentives for multiple items — provide as many different payment options as possible; upon successful purchase completion, users should see & be able to print off a receipt/payment confirmation immediately [order, price, date, reference number] & email a receipt to users, too. [^]

Google Analytics: ** checkout page –> receipt page = ‘conversion rate’ ** at what stage do users drop out? Analysis can lead to better site design — security confidence; ads; navigation.
Google Analytics: [www.google.com/adwords/] [free website performance monitoring solution] – see which keywords people enter when they see & click site link; info re: vocabulary usage throughout pages & which words to purchase in Google ad campaign. [^]

Extending a Website Through APIs: pay licensing fee to third party & customize widget to own liking; source code components facilitating communication and feature integration between third party feature & own website…
Programmable Web: [http://www.programmableweb.com/apis/directory/] – 4,000 APIs, searchable by keyword or category. [^]

FACEBOOK: Developer section: full list of plugin resources – online tools help customize, configure & explain plugins
Like Button: users can share page with their social network
Send Button: users can share page with specific friends
Comments: users can add commentary to site content
Registration: visitors avoid lengthy sign-up process – site owner can still gather the necessary user data
Login: users log into website using Facebook credentials – participate in social commentary & see other friends who have interacted with site
Facepile: collection of faces who have recently liked the website – shows users site fans in their social network
Adding the Facebook ‘Like’ Button [sample code – angle brackets should be used instead of square brackets in actual coding]
[html]
[head]
[title]Website Title[/title]
[/head]
[body]
[iframe src="http://www.facebook.com/plugins/like.php?href=www.yourwebaddress.com" scrolling="no" frameborder="0" style="border: none; width=450px; height=80px;">[/iframe]
[/body]
[/html] …
http://developers.facebook.com/docs/reference/plugins/like/.
Adding Facebook ‘Login’ Button: complex because of privacy issues; requires use of XFBML – XML components in home page & JavaScript; 1. register personal website with Facebook, acquiring a unique ‘App ID’ [owing to personal data transfer] — 2. add proper JavaScript to HTML page – references your ‘App ID’ and processes Facebook request — 3. add ‘Login with Facebook’ button in its own [div] tag… users must agree to share the requested information. [^]

Twitter: some sites like to share their Twitter feed directly on their website; others may choose to aggregate Twitter feeds of several companies/individuals who are trendsetters and/or influential
Add the Tweet Button: users can include web page link in a tweet from your site – users asked to login with Twitter credentials > small window appears, facilitating composition & sending of tweet
Add a Follow Button: allows users to follow company’s tweets – configuration info @ https://dev.twitter.com/web/follow-button
Twitter’s developer section can be found @ https://dev.twitter.com. [^]

Disqus: robust discussion forums often more interesting than the page content itself! Adds value to site for little extra effort; contents of Disqus conversations are accessible to search engines; allows users the convenience of logging in through one of their existing social accounts to join discussions – http://www.disqus.com/api/docs/. [^]

Search Engine Optimization: when searching, you actually search through an index of websites the search engine keeps and regularly updates – Google et al use an army of software ‘bots’ to constantly scan websites & add them to their database – these bots take note of site’s content, keywords, page titles etc to determine how ‘important’ the site is relative to other similar sites — the bots ‘rank’ your site based on these elements — this ranking determines how high up a search results list the site is displayed. [^]

Maximizing Natural Search: page titles and descriptions play a key role; it is possible to help Google bots by giving every page a unique title [only first 60 characters show up in Google search results {although title can be longer}] and description [set in the head section at the top of the HTML page]:

[Sample code – angle brackets should be used instead of square brackets in actual coding]
[html]
[head]
[title]Southern California High School Mountain Biking League[/title]
[meta name="description" content="The Southern California High School Cycling League was organized in 2008 to provide a well-defined race season for high school (grades 9-12) student athletes and to promote the formation of teams at public and private high school."]
[/head]

HTML content markup: bots determine page focus based on HTML tag assignment – [h1]Dressage saddles for sale[/h1]/[h3]Horse training[/h3] — bots assume the focus of content is in [h1] rather than [h3]…
sites with new content on a regular basis are considered more active & relevant – * keep it fresh *…
Google and Bing: base decisions on HTML content as well as URL path, a Sitemap file you submit online, & HTML file names to determine site’s focus and relevance to user’s search criteria. [^]

Keywords and Phrases: a sprinkling of these in your site copy will increase SEO; ‘keyword stuffing’ results in page ranking downgrading…
Image alt tags afford another opportunity to add to sprinkling of keywords – [consider both screen readers and bots] [img alt="North Shore - original watercolor painting" height="600" src="images/paintings_Northshore.png" width="932" /] [^]

URL Paths: users can type ‘www.company._com’/‘www.company.com/’ and, from a search perspective, each path is seen as unique -> site’s search ranking is diluted -> remedied by the specifying of one official URL path using canonical link element in head section of page – no matter what link is clicked/which words are typed, the search engine knows to credit the one official link:

[Sample code – use angle brackets rather than square brackets in actual coding]
[html]
[head]
[link rel="canonical" href="http://www.company.com"/]
[/head] [^]

XML Sitemap File:
= a file that lives [ideally] on the root directory of your server; contains list of all website URL paths & data re: page updating & relative importance in site hierarchy – if no Sitemap XML file is present, search engines are reliant upon paths based on links within navigation… [https://www.xml-sitemaps.com.]…

[sample code – angle brackets should be used instead of square brackets in actual code:]
[?xml version="1.0" encoding="UTF-8"?]
[urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"]

[sample code – angle brackets should be used instead of square brackets in actual code:]
[url]
[loc]http://www.example.com/[/loc]
[lastmod]2012-01-01[/lastmod]
[changefreq]monthly[/changefreq]
[priority]0.8[/priority]
[/url]
[url]
[loc]http://www.example.com/catalog.html[/loc]
[changefreq]weekly[/changefreq]
[/url]
[/urlset]


File Names: page’s title and description in head section of HTML code is important, as is the file name you choose for the page – helps search engines determine the focus of the page -> search result based on page title; url path; short copy segment from the page which Google felt was the most relevant. [^]

Inbound [‘backlinks’] and Outbound Linking:
inbound = links to your site found on other websites; if a number of high-ranking websites have links to your site, your website’s ranking goes up [appears higher in search results]
outbound = links on your site that go to other sites — ranking boost, as offering value to the user [only link to credible, content-related sites – avoid ‘link farm’/ ‘spam site’ labelling]. [^]

Things to Remember for FINAL EXAM:

• Login to site using social media identities – 1. & 2. only {avoid lengthy sign-up process & don’t have to remember new username & password combo}
• Code types not associated with Presentation Layer – PHP & .NET
• Pre-publishing testing process – ‘Validation’
• Domain name length – limited to 67 characters
• Most common page size for HTML email design – 600 pixels
• Both ‘breadcrumbs’ [yes] and ‘progress trackers’ [no] are interactive navigation devices – FALSE
• WordPress publishing: posts and pages
• Group of WordPress site presentation files – ‘Theme’
• Userflow diagram & sitemap – userflow details how a user moves from page to page during a specific task; sitemap shows how pages are linked together & organized in a site
• Perceivable, Robust, Operable, Understandable – WCAG
• API – set of programming instructions and standards for accessing a web-based software application from a third party company for the purposes of providing their services
• Unit of measure for flexible designs – percentages
• ‘natural’ search – maximizing all facets that search bots look for to boost your site’s chances of being found
• tag used to add a clickable link to a web page = <a>
• Series of images contained within a single image file – ‘sprite’
• Technology not supported on Apple mobile platform – Flash
• Main benefit of WP plugin – adding site functionality without having to program it yourself
• Important to manage how many levels deep your site goes – both 2. and 3. [usability]
• Page element in HTML that isn’t mandatory: <style>
• PII – user’s personal information
• CSS property used to change text section’s font face – font-family
• Dreamweaver and Photoshop – Photoshop for images, Dreamweaver for functioning web pages
• ‘Open source’ development platform = open code base – developers can access and customize it, sharing their results with the developer community
• Wireframe purpose – both 2. and 4. – diagrammatic drawing, detailing content, interaction, and navigation
• FTP tool used for – uploading files to a host computer
• User interface design components – alt & text transcripts; appropriate styles; appropriate colors; consistent navigation and branding; quality links; enable content to be printed quickly and efficiently; mobile-friendly
• Image file format – smallest file format for photographic image with millions of colors, without transparency = JPEG
• Not a benefit of using Adobe Photoshop’s ‘Save for Web’ feature – “it’s a quick and easy way to upload your images to the internet” [^]