Class notes from May 20, 2013

Notes on creating a mobile website:

WIDTH

<DIV> - would be extension box

Open  <DIV STYLE = "WIDTH : 300">
Close </DIV>

Will cause it wrap (if text) or push bounds out of screen (if image) when using exact pixel dimensions.

Better to use style template:

<DIV STYLE = "WIDTH 100%">

• Will size to fit dimensions of mobile device
• Works with text
• Browsers cannot re size graphics

Size images to biggest device or have different image sizes and use a JAVA applet to read back device type to select proper image
Such as:
     IF Screen Size >= 300 THEN 1.jpg (Use larger graphic)
     ELSE Screen Size < 300 2.jpg (Use smaller graphic)
On image itself:
    WIDTH = 100%
    HEIGHT = 100%

• Browser will re size image visually, but not change the size of the file

HTML 5 is the latest Standard

Dreamweaver

• Has new fluid grid layout
• A new product that can be used on mobile devices
• Uses columns
• Responsive because templates work because of columns and grids
• Makes use of source code and style sheets to do this

Phone Gap

• Uses HTML, CSS, JAVA
• Allows a developer to write app then send it to Phone Gap where it is converted to a single set of instructions
• One set for Android, one set for Apple, etc.
• At the end of the process will have a native app for all mobile devices

APP vs Web Site

APP - To do something

• Frameworks
• Uses JAVA
• Bridges the gap between desk top and mobile
• Makes web pages look like native apps
• Examples:
• Moo Tools
• J Query Mobile

Web Site - Provide Info

• Use responsive design to display on mobile or desk top

Fair Use Info

What is Fair Use:

Fair use is a legal exception to the exclusive rights an owner has for his or her copyrighted work

It governs the use of pictures (and content)  found on the internets (as well as other places).  Running afoul of it will cause a person to get a cease and desist notice due to the The Digital Millennium Copyright Act (DMCA).  (Or sued, or worse.)


Resources:

Wikipedia article on Fair Use

Fair Use legal article

Fair Use Analysis Tool by Purdue University

Class notes from April 15, 2013

Best Practice of Web Design

• Clear, consistent navigation
• Consistent use of shapes
• Imagery that compliments message of site, does not distract
• Use of correct text with keyword content
• Do not make user guess or wait
• Color scheme that is consistent (or not) to direct attention

User Experience

• Make your site easy to find - Search Engine Optimization (SEO)
• Address and phone on ALL pages
• Large video or other large resources belong on secondary pages
• Graphics (images) that capture the eye and help to tell the story
• How does you site flow?
• Monitor size and color calibration
• Browser issues
• Need contact page including google other mapping page
• Make sure page is mobile friendly
• Update site frequently and make the information on website relevant and current

Classic Design (Print) vs. Web Design

• Print - more detail, more text
• Print - eye travels across the page differently than on web
• Print - more time to study/read content
• Web - images push the ideas
• Web - text enhances the idea
• Web - Down loadable files/secondary pages carry the content
• Colors on Websites: use primary colors and complimentary colors
• Yellow is not a good website color
• Use colors that convey the idea of the website (earth tones for earthy products, blue for water, orange for food, etc.)
• Color Wheel