Week 2
2/5

Semantic HTML5, Developing Website and User Experience. Writing semantic HTML5, preparing images, upload files using FTP client and organize server space. Introduce user experience in developing content and designing layout Activity: Create an HTML document for the website you analyzed with an eye on making it your own portfolio. Activity: Activate the account school provides and upload first assignment.

Homework

Create landing page with link to assignment and worksheet. Worksheet is to contain strategy, design considerations, wireframe and comp of website. Make links to these assignments on the worksheet. Read chapters 4-6. Due: The following week.

Materials

Additional materials for this unit can be found by following these links (32 pages):

• User Experience (UX)
• Designing for the Web (7 Steps)
• Semantic Markup
• Color and Preparing Images for the Web
• Fetch and Text Wrangler Tips
• Visual Literacy
• Worksheet Example
• Homework

last week’s links:

• HTML & CSS Primer
• Writing HTML
• Absolute and Relative Addresses
• Tools of the Trade
• Setting Up Your Server Space
• History of the Web
• HTML5 Doctor Element Index for all your quick lookup needs.
• HTML5 Template
• Dabblet for quick HTML and CSS explorations
• Homework
• Style Guide Example

Goals

The goals of this unit are to:

• Understand the user experience that drives web design.
• Incorporate user interaction into the process of creating web sites.
• Explore the semantic implications of the Hyper Text Markup Language.
• Show how HTML5 imposes semantic order with its tags.
• Mark up a document using these tags and to Validate that document using the validator.
• Know how to prepare images for use on the web
• Understand how to use color.
• Use inline CSS to visually design the content.

Outcomes

At the end of this unit, students will have:

• Will consider the user’s experience when creating for the web.
• Have gone through the process of creating a web site.
• Transformed content into semantically correct markup.
• Used their server space to upload work.
• Created a valid HTML5 document.
• Checked the validity of that document.
• Prepare images for the web using the correct file format and resolution.
• Understand the hexadecimal (base 16) notation for RGB color.
• Basic styling of the document using inline CSS styles.

Step-by-Step

Final Assignment Links

Updated links that I expect to be up and live as they will be graded for your final grade.

Example of landing page from several semesters ago.

Week 2

1. Website Analysis*
   

   Week 3

2. landing page— links to your assignments and a picture next to your name.
3. HTML markup of Analysis
4. Worksheet: behind the scenes on creative process for midterm (7 steps)*:
   

   Week 4

5. Portfolio exhibiting the CSS selections
6. HTML Wire Frame from PhotoShop comp
   

   Week 5

7. incorporate CSS Layout Strategies in web site
   

   Week 6

8. Quiz
9. Peer Review Notes / Advice
   

   Week 7

10. Typography Poster
11. Finished Midterm: Portfolio
    

    Week 8

12. Final Worksheet*
    

    Week 9

13. Responsive Redesign of Portfolio
    

    Week 10

14. CSS3 Collateral
15. Class Exercise
    

    Week 11

16. CSS3 Animatics
17. Class Exercise
    

    Week 12

18. Final: Modular Navigation
    

    Week 13

19. Multimedia Demonstration
    

    Week 14

20. Forms
21. Peer Review Notes / Advice
    

    Week 15

22. Final — You have 5 days extra to hand it in before I determine my final grade

Each assignment exhibits a skill. If you have used that skill in building your portfolio, link to that page and explain how it satisfies the homework. For example, for Week 11 CSS Animatics, if you used a hover that fades in your final, point to the page that exhibits that feature and let me know where to look if it is not completely obvious.

The final website sells something. It does not have to be lots of pages, but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms, media queries, etc.

Final Grade Calculation (from syllabus)

The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are ground for Failure.

*Do not require coding.

Current Practice UX Design

Two newspapers, the Guardian and the NY Times have updated their websites. Actually, the Guardian is currently (Fall 2014) asking for feedback, as part of its XU testing cycle, asking for user feedback.

1. NY Times A standard setting newspaper that helped move the web away from its addiction to tables in 2007 has just been using jQuery animation. Follow the link to see how UX Design considerations led to a more engaging web experience.
2. The Guardian tests its UXD for mobile.

More News and External Resources

Links to help you explore you explore the visual development of your Portfolio Site.

There is no reason to have a primitive site, because you want it to show off the content. Show me what you can do. That is the basis for your grade. Impress me with your design sensibility.

Official W3 Resources

Official W3 Resources: Open. Free. Crowdsourced. The Web Platform to Go to.

• Beg Development for Beginners
• General Web Concepts
• HTML (including index of HTML Elements and Attributes)
• CSS (including list of Standard CSS Properties)
• Accessibility
• Javascript
• Dom
• SVG

Depreciated Documentation

• Terminology
• Documents
• HTML Syntax
• Elements Organized by Function
• elements
• Common Content Models
• Global Attributes
• Data Types
• Index of terms

Talking Points

Topics covered in the reading:

Chapter 4: Text

1. Starting a New Paragraph 100
2. Adding Author Contact Information 102
3. Creating a Figure 104
4. Specifying Time 106
5. Marking Important and Emphasized Text 110
6. Indicating a Citation or Reference 112
7. Quoting Text 113
8. Highlighting Text 116
9. Explaining Abbreviations 118
10. Defining a Term 120
11. Creating Superscripts and Subscripts 121
12. Noting Edits and Inaccurate Text 124
13. Marking Up Code 128
14. Using Preformatted Text 130
15. Specifying Fine Print 132
16. Creating a Line Break 133
17. Creating Spans 134
18. Other Elements 136

Chapter 5: Working with Images

1. About Images for the Web 148
2. Getting Images 152
3. Choosing an Image Editor 153
4. Saving Your Images 154
5. Inserting Images on a Page 156
6. Offering Alternate Text 157
7. Specifying Image Size 158
8. Scaling Images with the Browser 160
9. Scaling Images with an Image Editor 161
10. Adding Icons for Your Web Site 162

Chapter 6: Links

1. The Anatomy of a Link 166
2. Creating a Link to Another Web Page 167
3. Creating Anchors 172
4. Linking to a Specific Anchor 174
5. Creating Other Kinds of Links 175

Definitions

These are the terms that participants should be familiar with during this unit:

Semantic Web

The Semantic Web is a “web of data” that enables machines to understand the semantics, or meaning, of information on the World Wide Web. It extends the network of hyperlinked human-readable web pages by inserting machine-readable metadata about pages and how they are related to each other, enabling automated agents to access the Web more intelligently and perform tasks on behalf of users. The term was coined by Tim Berners-Lee, the inventor of the World Wide Web and director of the World Wide Web Consortium, which oversees the development of proposed Semantic Web standards. He defines the Semantic Web as “a web of data that can be processed directly and indirectly by machines.”

User Experience

User experience (UX) is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

User Interface design

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.

Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.

Web design

Web design is a broad term used to encompass the way that content (usually hypertext or hypermedia) is delivered to an end-user through the World Wide Web, using a web browser (e.g. Opera, Internet Explorer, Firefox, Google Chrome, Safari) or other web-enabled software to display the content. The intent of web design is to create a website—a collection of online content including documents and applications that reside on a web server/servers. A website may include text, images, sounds and other content, and may be interactive.

Information Design

Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer.

Information Architecture

Information architecture is defined by the Information Architecture Institute as:

1. The structural design of shared information environments.
2. The art and science of organizing and labeling web sites, intranets, online communities, and software to support findability and usability.
3. An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

Parsons students hopefully familiar with the language of design as it pertains to graphic design, illustration, product design, photography. Lang students will have experience in developing arguments of one sort or another. Play up your strengths.

7 steps everyone needs to document in a worksheet when creating their website. There are more steps that are faded out. I do not require you to do those.

You are required to document these creative decisions in the worksheet. They are required for me to evaluate your midterm and final, and count toward your grade.

1) Develop Your Idea

Define the problem you are to solve when developing a web site. It is hard to create a good end product if the problem is not very well defined at the beginning.

Sometimes the problem is given to you by the client, but the client does not alway know exactly what the problem is. It’s your job to figure that out.

Either way, develop your idea.

It is hard to sell a bad idea.

This time you are your own client. That is difficult.

Make sure that whatever you come up with will work and is worth the time spent making it real.

2) Discovery and Research

Discovery and research is the second step. You might have a good idea of what you want, but test it by contrasting the idea with similar ideas that have already been executed. Google to see what others have done. The first assignment should have been a gigantic step in the right direction.

Find competitor web sites that have a track record that you can learn from, or have developed novel ways to express things that you are also desiring to express.

Tell me what you have learned and the conclusions you have reached from your research. I will be looking for that in the worksheets for both the midterm and the final projects.

3) Target Your Audience

Focus your energy by figuring out who your audience is, and target them.

Develop your content with that audience in mind.

Read the user experience article.

Go further and read Designed For Use by Lukas Mathis and develop a killer user interface because this excellent book will give you a good understanding of how user interfaces work, and work well, and what to look out for, to make sure that they do work.

Whatever you do, keep the user in mind.

4) Inspiration

Look for sites that inspired you. Here are two single page sites : UltraWebPage and Head to Heart.

Mood boards are another way to visually stimulate your design sense. You can test colors images, design elements, ideas, etc, as you develop your design intent. Print these out and place them on a board, or layer them in a Photoshop document. Playing with the visual hierarchy of like or contrasting elements can help gel the creative process.

Mood boards are used to develop the overall feel of a project, putting together images and objects which inspire, target desires and facilitate creativity and innovation in establishing the aesthetic feel of a web site.

Things that can be explored in the mood board include photography style, color palettes, typography, patterns, and the overall look and feel of the site. Soft or hard? Grungy or clean? Dark or light? A rough collage of colors, textures and pictures is all it takes to evoke a specific style or feeling. This process can act like a catalyst and save a lot of time and help focus in on your final design.

5) Thumbnails

Once you are clear as to what your problem is, and have content and direction, the next step is to respond with a user centered design solution using pencil and paper.

I would like to see the sketches and variations that show how you arrived at the solution. These are called thumbnails, because they start simple and small.

It takes more than one thumbnail to develop a finished concept. You never can tell ahead of time what will work, but you can separate out what does not appear to work ahead of time. Increase your success rate by staying with paper and pencil till you are clear about how to solve your problem.

Circle or otherwise indicate the one that you went with. Take a picture or scan the drawings and upload them to the worksheet.

6) Wireframes

Wireframes are lines or boxes with some text and a few visual widgets that represent your website structure and help you establish hierarchy. It is a clean pixel perfect interpretation of the thumbnail that you selected to go with.

Wireframes help you save time because you can work out how your website works and looks over and over again until you get the details of user experience and design just right.

Then you will know exactly where the boxes need to go, their size, and how to position them, when you build the website.

Though a wireframe takes longer than a thumbnail, it takes much less time than a photoshop comp or an HTML prototype.

Take a moment and learn how to read, evaluate and design wireframes.

This is a low fidelity wireframe of the NY Times site.

Higher fidelity wireframes provide more information.

It is possible to use ready made toolkits using photoshop(explanation), Illustrator (explanation) and InDesign (explanation with video tutorials) for creating wireframes.

A stylized Illustrator version (explanation) puts some distance between how it looks and what it will look like. This is ideal for working with clients who often start to sweat over details that can kill the creative process. Make sure you set the Document Raster Settings to 72 dpi for fast rendering while you work.

Balsamiq Mockups is a wireframe application with limited interactivity that is free to use for 7 days. It too has a hand drawn look to foil client expectations. They have a great tutorials. Other free wireframe web applications like Cacoo can also be used.

7) PhotoShop Comp

This is the last step I require that you take, which is to create a photoshop comp. After coming up with the idea, doing the research, sketching the direction and building a wireframe, you are ready to create the PhotoShop Comp.

It is quite common for people to comp up a site in photoshop, and there are lots of tutorials that will tell you how to do it. Those who aren’t can look through the tutorial or search the web for other tutorials.

Since most of you are photoshop wizards, I will not elaborate how to realize your website in PhotoShop.

Prototype the Website

The Web Design workflow has to reflect the information architecture, the interaction design and the user experience. Prototyping can help facilitate the development of all three.

A prototype can be fast, nothing more than a series of wireframe sketches, or it can be visually complete, like a photoshop comp or even a bare bones working website.

It can be static, meaning that the buttons are not functional and cannot be tested, or fully interactive, like a working wireframe, for example.

You can leave out the content, or use the lorum ipsum placeholder text. It’s also possible to work with finished content, which is most likely what you will do, but know that its often better to ignore the content (after it has been prepared and mapped out) while working on prototyping the design and functionality of the site.

Designing with a Grid

Whatever wireframe toolkit you use, you need to consider that you will be working in pixels, and to make it easy on yourself, use a 960 grid. This number is evenly divisible by a number of denominators, so its ideal for creating grids and organizing your layout. You get additional flexibility by adding gutters to the columns. The height is not crucial and can be between 700 and 800 pixels for development purposes.

Start with defining the grid you want to use with Gridulator. It’s enough right now to pick a grid that you want to develop in and make a png. It will be 960 pixels across. This example had been shrunk to 500 pixels across. use it in photoshop to develop your bio comp.

It’s possible that you want to develop not just a prototype, but the entire website in something like the 960 Grid System, which utilizes a number of canned CSS classes that quickly allow you to mock up your site. That’s not the goal right now, but we can use some of the 960 resources to help make the photoshop comp, or make pdf templates to print out for quickly sketching what you want your page to look like. There are a number of other such HTML/CSS Frameworks, like Twitter’s Bootstrap.

The Feedback Loop: User Testing

The reason for quickly prototyping your site is to receive user feedback, so that you can change it as you go along. You use the feedback from the review of the prototype to refine it, and get it reviewed again. The more user input you receive, the more likely the web site will work as expected. There are a few ways to get user feedback.

Card Sorting

One of the quickest ways to get meaningful user feedback is to use card sorting. Create cards with concepts, tasks and features the web site is to have and shuffle them. Then ask users to organize and rate the cards. Repeat the procedure with different users and you will have an idea of how to organize your website.

User Testing

Another way to get feedback is to do a 5 second test. This is quick and easy, and you will be required to visit 5 Second Test and participate in a number of tests. This provides rudimentary function and design feedback, but if the feedback isn’t spot on, it will have given you something to think about.

Once you have a prototype built, you can set up a more complete user testing that can gauge a user’s response to using the web site. There are plenty of websites that offer such services, of you can run user testing software yourself.

Images need to be prepared so that they upload quickly. Use photoshop to limit the resolution to the screen and specify the image in terms of pixels. You also need to select the appropriate image format.

Size

The resolution should be 1 to 1, pixel for pixel to the screen. The problems is that there are a number of different screen sizes and resolutions that do not make this easy.

If the picture is too small or large, the browser will up resolve or down resolve the picture to fit. It does not do as good a job as displaying the picture at 1 to 1 ratio. Make sure that you do not have a huge picture and down resolve it, as it takes too long to download, and looks worse.

Traditional sizes for iPhone are 320px by 480px to 960px in width for the computer monitor. Modern displays double that resolution, and a proliferation of mobile and tablet devices have resolutions all up and down the spectrum. Websites on monitors can easily go wider than 1300px, but rarely eclipse 1920px, the width of the majority of monitors currently in use.

Using responsive CSS techniques, you can prepare pictures for mobile and desktop versions, and switch between them to save bandwidth. This will become more clear in week 8.

File Formats

Gif Images (and PNG-8)

For graphic images that have large areas of solid color, like those produced with Illustrator, or strongly contrasting finely detailed lines like serifs in type, use gif or the license unencumbered 8 bit png. They reduce the 16 million plus computer colors to a look-up table of up to 8 bits, or 256 colors. It is possible to set transparency, but it is a 1 bit off/on transparency, and not an alpha channel that would produce a smooth transition. That means there is no antialiasing of the image, which makes the transition look pretty ugly when placed on a background unless the colors match. In the image on the right, you can see that it does not blend into the background color. The blend ends abruptly as the transparency gives way to the pink background. When the backgrounds do match, the 1 bit transparency works. This format works well to preserve type and other fine detail in the picture. Jpeg, on the other hand, tends to soften such strongly contrasting detail and adds artifacts that disrupt areas of solid color.

Gif Animations

Simple animations can be created by using Photoshop or web apps like Gif Ninja.

JPEG

Use the JPEG format (with the extension .jpeg or .jpg) for photographs. JPEG stands for Joint Photographic Experts Group. It’s the most commonly used method of lossy compression for photographic images, as photographs still look good even when they are a fraction of their original file size. Image degradation does occur when the compression is too great, so for good fidelity, use around 40%, or for high quality, like your portfolio images, use 60% compression. If there is a lot of noise or detail in the image, compression is less efficient.

With increased compression come artifacts. You may increase the compression till the artifacts become problematic. The example at the right is compressed at 10% to show off the artifacts, but even at 60% introduces significant artifacts. That is why GIF and PNG-8 are preferred over JPEG for type and other finely detailed images. Before web fonts were widely available, titles were often set as a picture to maintain a typeface. GIFs are far superior than JPEGs for that purpose, as you can see.

There is no alpha channel associated with jpegs. That makes them rectangular, which is not always desirable. You would have to match the background if you want the image boundaries with the existing background color.

PNG-24

You can have the best of both worlds by using the 24 bit png format, which should really be called a 32 bit png format, because it contains an 8 bit alpha channel. This format allows you to composite an image of any shape with perfect anti-aliasing, just like in photoshop. It renders all details perfectly, without artifacts. There is just one big price to pay. The cost of using PNG-24 is huge in terms of the file size, so be discrete in your usage of this otherwise marvelous format.

Save for Web

We all use Adobe products to prepare our images for the web. Use the save for web interface — command, option, shift S — to prepare your images, be it from Photoshop or Illustrator, and choose one of these methods. You can select the different attributes and compare the levels of compression and the quality.

Color on the Computer

Color on the computer is composed of red, green and blue channels, or RGB. Each channel is allocated 256 levels of intensity. The computer starts counting its colors at 0 for each channel. 0 represents off, or black, while 255 — and not 256, since the counting starts with 0 — is fully on. If the red, green and blue channels are at 255, or completely on, the color is white. There are over 16 million possible colors between black and white. The exact number is 256 x 256 x 256, or 16,777,216 colors.

8 Bits to a Byte

256 represents the number of possibilities stored in one byte. One byte is composed of 8 bits of information. Three channels at 8 bits each is known as 24 bit color. An additional alpha channel can be added as a mask, requiring 32bits in all to describe the color state of each pixel. Photoshop is essentially a calculator, calculating the 32 bit color for each channel with all the other channels to arrive at the 32 bit composite image of all the channels. The same compositing happens when using PNG-24 images.

Each of the eight bits per channel represents the binary state of either on or off, as that is how digital computers work. The number of different possible stares that these 8 bits of information can form is 256.

One bit is either off or on. Two bits make for four possibilities. The bits can be off off, off on, on off or off off. If you add one more bit, you double the number of states because you get the same four possibilities twice. The first four with the third bit off and the next four with the third bit on. This continues, doubling each time another bit is added, till 8 bits creates 256 possible states.

Base 16, or Hexadecimal Numbers

This color is 182 red, 161 green and 134 blue. In web development, this color is often described, not in base 10, but using hexadecimal, like this: #b6a186 .

That is because programers divide the byte (8 bits) into two nibbles (4 bits each, or 16 possibilities) which corresponds into two hexadecimal numbers. Hexadecimal is a short hand way to write binary numbers and that make life easier for programers. See table of nibbles.

Hexadecimal is base 16. It is as if we have 8 fingers on each hand, or 16 fingers all together. We count that 0 1 2 3 4 5 6 7 8 9 a b c d e f. That is 16 digits all together. Two hexadecimal numbers express a channel’s color: 16 x 16 = 256. Six hexadecimal characters can express any of the 16 million plus possible colors. For example, the hexadecimal b6 is the same as the base ten number 182 .

If the hexadecimal units are the same in each of the three channels, as in red: #ff0000 , it can be shortened to #f00 . When all the channels are the same value, #888, the colors cancel each other out, and all that is expressed is the brightness value. #444 is dark grey while #bbb is light gray.

Color Names

You can use names instead of code. The name silver is a light grey. The actual code for silver is #c0c0c0 and it has an RGB value of 192 for each channel. Common color names are red, orange, yellow, green, cyan, blue, purple and pink. A complete list of all the colors can be found in the color demo

Here are the names of the colors, with their Hexadecimal and decimal numbers:

Change the Color of the Background

Hue Saturation and Brightness (HSB)

1. red is 0°
2. yellow is 60°
3. green is 120°
4. cyan is 180°
5. blue is 240°
6. magenta is 300°

The first specification to be widely implemented, CSS3 color, includes opacity and the hue, saturation and luminance (HSL) color space.

HSL takes three values: Hue is a degree on the color wheel from 0 to 360, where 0 is red, 180 is green and 240 is blue and 360 is red again. So is 720, or any other multiple of 360 — the colors repeat.

Saturation is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance.

Luminance is also a percentage; 0% is dark (black), 100% is light (white), and 50% allows for full chroma before it is made lighter or darker. The table on the right gives percentages of grey translated from hexadecimal, or base 16, with middle grey being #808080.

Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color, but it is preferred over the RGB method of specifying a color. With HSLa it is easy to increase the saturation or luminance for a particular hue, something that is not at all intuitive using RGB.

Opacity

CSS3 also added the alpha property transparency, or opacity, or alpha, which can be combined with color to change RGB to RGBA and HSL to HSLA. The value range is from 0 to 1, with 0 being transparent and 1 being opaque. That makes .5 half way transparent. color: hsla(0,50%,50%,.5 You can make any element transparent by using the opacity property.

To help you see the relation between the HLS and opacity, change the numbers in this demo. I’m sure you have a favorite color or color combination. Try changing some of these colors to your favorite colors:

Pick a Color: HSLa Generator

Mother-effing hsl() by Paul Irish

Publishing Your Work using Fetch

Everyone needs to publish their work on the web. We start the class by making sure that everyone can, using Fetch.

The server space is a lot like your desktop, only instead of folders, they are called directories. These servers are usually run by computers running Linux. These operating systems do not tolerate spaces, and lower case letters and capitalized letters (a and A) are two different letters. As long as you follow those rules, you should have no problem uploading files to your web space.

You can drag and drop between the Finder window and Fetch, and the document icon in Textwranger can also be dragged into fetch. Know that when you drag the same document into Fetch, the document will be overwritten without warning.

If you need more help, visit the Fetch help pages

Writing Code using TextWrangler

TextWranger is a free program that will serve as our text editor. There are a number of useful features that will make your life easier, including coloring the code so you know that you are doing it right, search and replace over multiple documents, show line numbers, invisibles, etc. If you need more help, download the TextWrangler Documentation PDF.

The most important features that you need to be aware of is that by clicking on the document icon, you go to it in the finder. You can use that icon to drag the file into the browser or into Fetch as well. The pencil locks the document, if you do not want to make any changes to one or another document (useful if you are comparing one document to another and get confused). The pop-up list shown as a box with the T has a number of useful preferences, including Soft Wrap Text and Show Line Numbers. At the bottom of the toolbar is a pop-up list that has the open documents in it, and next to that is a pop-up list that shows major tags and comments. This is one way to easily get around a long document, provided that you comment your work. Another useful feature for long documents is the ability to split the document window into two views, which you do by click and dragging the small grey rectangle right above the scroll bar.

The goal is to prepare a semantically well formed HTML document. How do we go about doing this?

Organizing the Content

Document structure before HTML5 was organized according to the hierarchy of header tags, which went from the most general to more specific, following the way content is created.

How content is created? In a well written document, the topic is expressed by the title. It is then supported by subtopics. This structure is duplicated in HTML. The main header expresses the title, and sub headers express the subtopics.

This hierarchy of headers used to be the only structure an HTML document had. The title is an <h1> header that explains what document is about. Second level topics are given a <h2> header, and if there are third or forth level topics, they receive a <h3> or <h4>. Headers become more specific as the levels go down, to level <h6>, the most specific header available in HTML. There is no <h7>.

Here Come the Machines, or The Semantic Web

We can understand the content of a web page, because we are cognizant beings. The World Wide Web was originally built for human consumption, and although everything on it is machine-readable, this data is not machine-understandable. It is very hard to automate anything on the Web, and because of the volume of information the Web contains, it is not possible to manage it manually.

It has been a goal of the 3W.org and of Tim-Berners-Lee in particular to overcome this problem. To that end, Tim Berners-Lee coined the term semantic web, and has simplified it to something he calls linked data. You can see this idea embodied in a discussion of statistics by Swedish professor Hans Roseling.

The goal of the semantic web project is to make machines understand, as far as possible, the meaning of the content from the structure and meta information contained in the markup itself. This would allow automated agents, like bots that cruse the web, to link up information in a meaningful way.

Such agents would automatically locate related information on behalf of the user. That would allow us to cut through the noise, so to speak.

The semantic web has been gaining ground, and is currently (2015) expressed as

In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data.

HTML vs XHTML

HTML is tolerant of human differences in coding and allows for errors. That made it difficult for machines to understand the semantic meaning of the content. W3.org introduced XHTML as a way to clean up the excesses of human error. It saw XHTML as the future of the web, and was fully prepared to release XHTML2 as the future of the web back in 2005-6. Good thing for us that didn’t happen.

Based on XML, or extensible machine language, it would have make the web much more friendly for machines to repurpose, but at a price. Humans would have been required to write code with machine like accuracy in creating all of their web pages. To enforce that, draconian error handling would not render pages if they were not XHTML2 compliant.

A group of browser makers (Apple, Mozilla Foundation and Opera) revolted and came together in 2004 to form the Web Hypertext Application Technology Working Group (WHATWG). They created HTML5 in response to XHTML2, making it forgiving to human error, even standardized how errors are to be resolved, and introduced new tags that would allow for a more semantic web.

The messy world of human error won over the more perfect coding world of machines. XHTML 2.0 was canned by the W3.org and was allowed to expire in 2009, officially recognizing HTML5 as the way of the future. It should be noted that there is an XHTML5 version, for machines to read and write, of course, but we need not be concerned with that.

You can view the differences between HTML and XHTML in this Table. To provide but one example, while XHTML requires all starting and ending tags, HTML is quite cavalier about it, so that both starting and ending tags are optional for the html, head and body tags. A well formed HTML5 document can start and end with the content itself. End tags are optional for li, dt, p, tr, td. I personally started to leave these out as the W3.org site itself leaves them out. I figure that they set the standard by which we are to measure our web pages. Roll over in your grave, XHTML2.

Tag Soup

The model for marking up a page is to let the CSS do all of the styling. This is most easily done by using the <div> tag for block elements and the <span> tag for inline elements, and then giving them id or class attributes: <div id="header">. <Div> stands for division, and is a generic element that, along with other block elements, can be thought of as boxes that divide the page. The <span> tag “spans” the content of inline elements. The content of inline elements are like characters, though they can be pictures, links or characters that make up the content of a paragraph.

Everything can be marked up with these <div> and <span> tags, and before HTML5, this is what a lot of people did, to the exclusion of using the other HTML tags.

The problem is that these are generic tags that do not impart any meaning onto the content. The over-use of these tags, called “classitis” and “divitis”, of which I have been guilty of in the past, contributed to a lack of semantically well formed web pages. Being semantically neutral, the markup could not be counted on to help machines understand the meaning of the content.

The solution is simple. Use the different HTMl tags to determine the content, and only use the <div> and <span> tags if necessary.

Imparting Semantic Meaning to the Markup.

The content can be structured so that it becomes more semantically meaningful, by using the header tags, specific tags, microformats and meta tags. HTML5 then comes along and introduces a number of new tags that help determine the document content’s. meaning .

Document Hierarchy

As mentioned above, before HTML5, documents were structured using the header tags <h1> through <h6>. This does not always synch up with a designer’s gut reaction, which visualizes header 1 as bigger and bolder than header 2. This is how they are in the default browser style sheets. Designers then use these header tags according to their idea of the visual hierarchy.

This may or may not be correct, as the design’s visual hierarchy does not necessarily follow the semantic requirement that header tags reflect the structural meaning of the content. It’s possible, for example, to make a <h1> smaller and less bold than a <h3> if that is what the layout calls for.

Before HTML5, each document should have only one <h1> tag that expresses the title and purpose of the page. All of the subsequent content should be organized according to the <h2> through <h6> headers. With HTML5, each tag can have its own hierarchy of <h1> to <h6> headers, making it much easier to structure complicated documents.

Semantic Code Elements

Tags that describe the content are:

MicroFormats

Microformats are agreed upon classes used to tag certain information. Instead of making up your own name for the class, which would be specific only to your document, a name has become universally recognizable by convention. This is quite handy for things like contact information or calendars, and can be seen in Apple’s Address Book and iCal, which uses standardized microformats.

In this example, the contact information is presented with generic markup:

<div>
<div>Joe Doe</div>
<div>The Example Company</div>
<div>604-555-1234</div>
<a href="http://example.com/">http://example.com/</a>
</div>

With hCard microformat markup, that becomes:

<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/</a>
</div>

Meta Tags

Meta tags that described the content. They are used by bots to identify page content. This use to be especially important for search engine optimization, but was abused. Google will still take them into account, but they no longer have the weight they used to have.

Here is a list of some of these meta tags that can appear in the header of the web page. You can use these yourself. Just fill in _missing_fields and delete unwanted tags.

• <meta name=”author” content=”All: _author_name_; mailto:_your@mail.here_” />
• <meta name=”owner” content=”_owner_of_the_page_” />
• <meta name=”generator” content=”_name_of_your_editor_” />
• <meta name=”publisher” content=”_publisher_of_page_” />
• <meta name=”resource-type” content=”document” />
• <meta name=”page-topic” content=”_page_topic_” />
• <meta name=”doc-rights” content=”_copyright_status_(Copywritten Work / Public Domain)_” />
• <meta name=”language” content=”_page_language_” />

HTML5

HTML5 added structural elements that provide additional semantic meaning, replacing the divs that would otherwise have marked up the page. Incorporate these elements into the structure of the document as part of its semantic structure. You can find out more about HTML5 elements here.

The HTML5 Tags help to structure your content/document

• main is an element that can be used only once per page. It represents the main content of the body. The main element may not be a descendant of a article, aside, footer, header or nav element.

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

• article represents an independent piece of content of a document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly related to the rest of the page. For complimentary content to the main content (Taken from XHTML 2.0 specification)

• hgroup represents the header of a section.

• header represents a group of introductory or navigational aids.

• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.

• nav represents a section of the document intended for navigation.

• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

  <figure>
  <video src="ogg"></video>
  <figcaption>Example</figcaption>
  </figure>

• figcaption can be used as caption (it is optional).

User Experience means making every visitor feel like your website was built just for them.

That there are User eXperience professionals demonstrates that the web has grown up just like print or broadcast. That it has grown up different from print is the nature of the hypertext links, interactivity and different form factors that the media takes. Web sites have become so complex and feature rich that they require the services of information architects and user experience designers. The web sites designed in this class will not be that complex, but the needs that drive the industry to create user experience designers is very much present, and should be reflected in your web site.

Know The User

Users employ a number of shortcuts that have to be taken into account. They do not read the page linearly, and usually read only the top-left hand corner, if they read anything at all. They scan pages, usually spending little time on any one page, as if they are in a hurry. The user knows that they do not need to read everything, and they have gotten used to doing just that.

They can usually tell that they want and decide whether or not to continue in a fraction of a second, and that is all the time that you will have. If they continue, it means you aroused their interest.

When the user gets to a page, they often have something in mind and that is all they are interested in. This is not logical or rational, but driven by a mix of desires called satisfice. Satisfice combines satisfy with suffice, and it means that a user will select the first reasonable match to what they are looking for that they find, not necessarily the best choice. Truth is, most users don’t really care to evaluate their options, and they will muddle through till they get what they are looking for.

How often do you read a manual before using a product? If you are like most people, rarely, and so it goes for web sites.

That means a web site has to anticipate the users’s habits if it wants to communicate effectively. You have to know the user. Most of you will be designing for peers, faculty or prospective employers, three very different users with different requirements. The challenge is to be clear about your audience and to target them in your writing and design.

Understand Experience

A website’s success hinges on how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the central tenets of a user-centered design, and that’s the base line for beginning the design process.

Once you have targeted your user you have to design for them, and then test to see if this has actually been the case. Does the website provide value, is it easy and pleasant to use? This is the roll of user testing, and there are software packages that will help you facilitate this.

How does a web site provide good value? Easy to navigate will not be a problem with the web sites that you will create here. Will the web site provide that something extra to make it stand out? There are too many web sites out there to be just like the rest. You need to stand out!

What makes the user experience? Low barriers to getting what they are looking for, pleasant surprises and a good story. Ease of use, effective communication and novelty can be designed, but a good story is integral to the developing and presenting of the content itself.

Good story telling gets the reader hooked on the protagonist. Once hooked, the author can tortures the hero until they break, at which point in time they somehow manage to overcome all obstacles for a cathartic resolution. A good writer will do that with each scene, emotionally grabbing the reader so that they cannot put the book down.

In the same way, a good design can turn a product into a coveted experience, one that satisfies something in the user by how it is presented, ideally anticipating the user’s actions and motivations, and can teach, motivate, persuade, inform or inspire the user, for that is how users form positive emotional experiences so important in successful communication. There is no joy if nothing resonates.

Understand Information

A simple web site will seem pretty straight forward, but as the complexity ramps up, the information architecture becomes daunting, especially since websites are not static systems, but are in a continual process of being reinvented, and the content is continually repurposed. This is a fact of life for sites like the New York Times.

To manage the daunting amount of complexity, a process emerged to help manage it all. The treasure map is a list of user experience deliverables: stories, proverbs, personas, scenarios, content inventories, analytics, user surveys, concept maps, system maps, process flows, wireframes, storyboards, concept designs, prototypes, narrative reports, presentations, plans, specifications, style guide and design patterns. Not all of these will be useful, but there are a lot of techniques to help you create and test the user experience.

Navigating the content is full of junctures where decisions are made. To prototype such decisions logical flowcharts are created called user flows. It is impossible to design an information hierarchy fully loaded with content, so designers take the content away and are left with a wireframe.

Wireframes are an integral part of developing the web site, and each of you will get your chance to build one with the midterm project. Removing what the content looks like allows the designer to focus on the information hierarchy, of what comes where, not just on the page, but throughout the site. Wireframes isolate user interaction by including only those elements that are absolutely necessary, like site navigation, headers, and content locations, and then only by empty shapes that allow the site to be easily modified to the user requirements before locking in the code.

The goal of the wireframe is to structure the content so it’s understandable and easy to use. As you will see, CSS’s box model is ideally suited for developing an interactive wireframe, but I require that you first develop your ideas on paper in quick thumbnails. There is no better, faster and comprehensive way to foster your creative impulse to do good work than by using paper and pencil, and to sketch out what’s on your mind. A few minutes brainstorming will be followed with hours of less creative implementation, if not tedious and often frustrating development, so make these minutes count.

You can go straight from the thumbnail to the wireframe. If you were doing a more official site, the procedure would require you figure out the relation between the content and the navigation first. If you were an information architect, this is how you would describe it:

1. Write down and organize the site objectives.
2. List the content requirements.
3. Determine the appropriate page hierarchy for the site, be it top down or bottoms up.
4. Design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear.
5. Standardize the navigation architecture with the organization of the content, and you are ready to create a complete diagram of the information architecture.
6. You will create a wireframe mockup from that diagram which will show the placement of the navigation elements in relation to the content of the site.

Strive for Simplicity

KISS! Keep it simple is the mantra, and for emphasis they add the second “S” The user is concerned with the content, not how it is presented. The presentation should be like the cuts in a movie: transparent, intuitive and emotionally effective. The design should not get in the way of the user experience, period. Keep it simple!

The Landing Page

This is the page you land on. If it does not capture your audience, they will not go further, and you will have lost your chance to communicate. There are a lot of things to consider, for it is a marketing campaign, and not just a design problem.

To help you along, unbound has a number of videos to make you think twice about how you put your landing page together. Check out this video critique. It will hopefully inspire you to do the right thing when it comes to your own landing page.

User Experience Guidelines for Apple’s iOS

Apple’s done a great job implementing user experience guidelines from the very beginning. We can all be thankful that Steve Jobs oversaw the creation of the Macintosh and the Next Computers, both of which pushed intelligently designed user interfaces from the beginning. The new way forward at first appear a step backward, as a finger is not nearly as precise as a mouse, but precision is not what user interaction is about, and immediacy has won out.

These are the topical headlines from the iOS User Experience Guide. They are equally relevant to the web sites you make that will be appearing on these iOS. The user experience revolves around streamlined interaction with content that people care about.

• Focus on the Primary Task
• Elevate the Content People Care About
• Think From the Top of the screen Down
• Give People a Logical Path to Follow
• Make Usage Easy and Obvious
• Strive to make your content instantly understandable to people,
• Make the main point of your content immediately apparent.
• Be consistent
• Use User-Centric Terminology
• Minimize the Effort Required for User Input
• Enable Collaboration and Connectedness
• Brand Appropriately
• For the best user experience, you want to quietly remind users of your identity.
• Avoid taking space away from the content people care about.
• Entice and Inform with a Well-Written Description
• Be sure to correct all spelling, grammatical, and punctuation errors.
• Keep all-capital words to a minimum.
• Be Succinct
• Think like a newspaper editor, and strive to convey information in a condensed, headline style.
• Give buttons short labels, or use well-understood symbols, so that people can tell what they do at a glance.
• Use Design Elements Consistently
• Consider Adding Physicality and Realism
• Use appropriate animation to further enhance realism in your application.
• Delight People with Stunning Graphics.
• Consider replicating the look of high-quality or precious materials.
• When appropriate, create high-resolution artwork.
• Make Targets Fingertip-Size
• Give tappable elements in your application a target area of about 44 x 44 points.
• Use Subtle Animation to Communicate
• Add animation cautiously
• Make animation consistent
• Restrain Your Information Hierarchy

Google User Experience Manifesto

As you can imagine, there is a lot more to this that you had probably thought about when you entered the class. That is how it goes. I want to leave you with Google’s Googlification, if that is a word. This is their user Experience manifesto.

Our aspirations

The Google User Experience team aims to create designs that are useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable. Achieving a harmonious balance of these ten principles is a constant challenge. A product that gets the balance right is “Googley” – and will satisfy and delight people all over the world.

Ten principles that contribute to a Googley user experience

1. Focus on people their lives, their work, their dreams.
   The Google User Experience team works to discover people‘s actual needs, including needs they can‘t always articulate. Armed with that information, Google can create products that solve real-world problems and spark the creativity of all kinds of people. Improving people‘s lives, not just easing step-by-step tasks, is our goal.

   Above all, a well-designed Google product is useful in daily life. It doesn‘t try to impress users with its whizbang technology or visual style – though it might have both. It doesn‘t strong-arm people to use features they don‘t want – but it does provide a natural growth path for those who are interested. It doesn‘t intrude on people‘s lives – but it does open doors for users who want to explore the world‘s information, work more quickly and creatively, and share ideas with their friends or the world.

2. Every millisecond counts.
   Nothing is more valuable than people‘s time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.
   

   Speed is a boon to users. It is also a competitive advantage that Google doesn‘t sacrifice without good reason.

3. Simplicity is powerful.
   Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product‘s fundamental functions. Google doesn‘t set out to create feature-rich products; our best designs include only the features that people need to accomplish their goals. Ideally, even products that require large feature sets and complex visual designs appear to be simple as well as powerful.

   Google teams think twice before sacrificing simplicity in pursuit of a less important feature. Our hope is to evolve products in new directions instead of just adding more features.

4. Engage beginners and attract experts.
   Designing for many people doesn‘t mean designing for the lowest common denominator. The best Google designs appear quite simple on the surface but include powerful features that are easily accessible to those users who want them. Our intent is to invite beginners with a great initial experience while also attracting power users whose excitement and expertise will draw others to the product.

   A well-designed Google product lets new users jump in, offers help when necessary, and ensures that users can make simple and intuitive use of the product‘s most valuable features. Progressive disclosure of advanced features encourages people to expand their usage of the product. Whenever appropriate, Google offers smart features that entice people with complex online lives – for instance, people who share data across several devices and computers, work online and off, and crave storage space.

5. Dare to innovate.
   Design consistency builds a trusted foundation for Google products, makes users comfortable, and speeds their work. But it is the element of imagination that transforms designs from ho-hum to delightful.

   Google encourages innovative, risk-taking designs whenever they serve the needs of users. Our teams encourage new ideas to come out and play. Instead of just matching the features of existing products, Google wants to change the game.

6. Design for the world.
   The World Wide Web has opened all the resources of the Internet to people everywhere. For example, many users are exploring Google products while strolling with a mobile device, not sitting at a desk with a personal computer. Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users. Google supports slower connections and older browsers when possible, and Google allows people to choose how they view information (screen size, font size) and how they enter information (smart query parsing). The User Experience team researches the fundamental differences in user experiences throughout the world and works to design the right products for each audience, device, and culture. Simple translation, or “graceful degradation” of a feature set, isn‘t sufficient to meet people‘s needs.

   Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google‘s mission to make the world‘s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone, including those with physical and cognitive limitations.

7. Plan for today‘s and tomorrow‘s business.
   Those Google products that make money strive to do so in a way that is helpful to users. To reach that lofty goal, designers work with product teams to ensure that business considerations integrate seamlessly with the goals of users. Teams work to make sure ads are relevant, useful, and clearly identifiable as ads. Google also takes care to protect the interests of advertisers and others who depend on Google for their livelihood.

   Google never tries to increase revenue from a product if it would mean reducing the number of Google users in the future. If a profitable design doesn‘t please users, it‘s time to go back to the drawing board. Not every product has to make money, and none should be bad for business.

8. Delight the eye without distracting the mind.
   If people looked at a Google product and said ”Wow, that‘s beautiful!” the User Experience team would cheer. A positive first impression makes users comfortable, assures them that the product is reliable and professional, and encourages people to make the product their own.

   A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn‘t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, ”simple elegance” is not the best fit for every product. Audience and cultural context matter. A Google product‘s visual design should please its users and improve usability for them.

9. Be worthy of people‘s trust.
   Good design can go a long way to earn the trust of the people who use Google products. Establishing Google‘s reliability starts with the basics – for example, making sure the interface is efficient and professional, actions are easily reversed, ads are clearly identified, terminology is consistent, and users are never unhappily surprised. In addition, Google products open themselves to the world by including links to competitors and encouraging user contributions such as community maps or iGoogle gadgets.

   A greater challenge is to make sure that Google demonstrates respect for users‘ right to control their own data. Google is transparent about how it uses information and how that information is shared with others (if at all), so that users can make informed choices. Our products warn users about such dangers as insecure connections, actions that may make users vulnerable to spam, or the possibility that data shared outside Google may be stored elsewhere. The larger Google becomes, the more essential it is to live up to our “Don‘t be evil” motto.

10. Add a human touch.
    Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart – and not boring, close-minded, or arrogant. Google text talks directly to people and offers the same practical, informal assistance that anyone would offer to a neighbor who asked a question. And Google doesn‘t let fun or personality interfere with other elements of a design, especially when people‘s livelihood, or their ability to find vital information, is at stake.

    Google doesn‘t know everything, and no design is perfect. Our products ask for feedback, and Google acts on that feedback. When practicing these design principles, the Google User Experience team seeks the best possible balance in the time available for each product. Then the cycle of iteration, innovation, and improvement continues.

UX Crash Course: 31 Fundamentals

want to learn more? Joel March has put together what 31 fundamentals. They are short and to the point, and an illustration of his XU Perspective in which everything rotates around XU.

Introduction & Key Ideas

#01 — What is UX?

#02 — User Goals & Business Goals

#03 — The 5 Main Ingredients of UX

****

How to Understand Users

#04 — What is User Research?

#05 — How to Ask People Questions

#06 — Creating User Profiles

#07 — Designing for Devices

#08 — Design Patterns

****

Information Architecture

#09 — What is Information Architecture?

#10 — User Stories & Types of Information Architecture

#11 — What is a Wireframe?

****

Visual Design Principles

#12 — Visual Weight, Contrast & Depth

#13 — Colour

#14 — Repetition & Pattern-Breaking

#15 — Line Tension & Edge Tension

#16 — Alignment & Proximity

****

Functional Layout Design

#17 — Z-Pattern, F-Pattern, and Visual Hierarchy

#18 — Browsing vs. Searching vs. Discovery

#19 — Page Framework

#20 — The Fold, Images, & Headlines

#21 — The Axis of Interaction

#22 — Forms

#23 — Calls-to-Action, Instructions & Labels

#24 — Primary & Secondary Buttons

****

User Psychology

#25 — Conditioning

#26 — Persuasion

#27 — How Experience Changes Experience

****

Designing with Data

#28 — What is Data?

#29 — Summary Statistics

#30 — Graph Shapes

#31 — A/B Tests