Author Archives: onno

13 WordPress/ Final Prep

Posted on by
Reply

You have learned how HTML and CSS work, and you can build a website. Most web sites in the real world are not hand coded, but use a Content Management System, or CMS. While a CMS does not have to use a database, most do.

CMSs

High end CMS programs run sites like Google, Amazon or financial institutions. Most sites do not need that kind of performance or redundancy, and are built using open source software, usually PHP with MySQL as the database.

WordPress, Drupal and Joomla are three popular CMS. WordPress has become the most popular of these, even though it is the least CSM like. Comparison between the three main CMS platforms.

Each of these CMSs work very different, though all use PHP to construct the pages out of information provided by the database, and content stored in the site itself, on the basis of a template.

To modify the look of the CMS, requires modification of the template. You build your website by designing the template. The CMS does the rest.

WordPress

We focus on the most popular choice. Because there is not enough time in the class, I leave developing your own WordPress theme as an alternate choice.

You will be able to create a template from scratch by following the short course: WordPress 3: Creating and Editing Custom Themes with Chris Coyier of CSS-Tricks. To click this link, you first need to log into the Newschool Portal –> Library –> Databases –> search for Lynda.com, click on the link, go to Lynda.com, sign up for an account, and then sign in. You can then use this link to go to the tutorial and download the accompanying exercise files. Lynda.com.

When A Dynamic Website is Not the Best Choice

Dynamic websites are the best thing since sliced bread, but they come with one big drawback. If you do not keep up with the software, they can contain exploits used by people with malicious intent. This can render your website hacked. This is not possible with a conventional, hand coded website.

If you plan to not update your portfolio all of the time, it better be a hand coded site. If you plant to keep up with the software updates, then by all means, use a CMS.

Installing WordPress

You will find all the resources you need at wordpress.org. You start by downloading WordPress. Put all of the files in the directory you want WordPress to appear in.

You will go to that directory, and you will be guided by the WordPress Installer. You will need to know the name and password of the database that WordPress is to use. The installer will take care of setting up everything else.

See MAMP & WAMP for setting up WordPress on your own computer.

Chris Coyier outlines a great way to experiment by using a local MAMP installation at both Linda.com with a video tutorial or the Video on CSS-tricks.com. That’s a sure way to become familiar with using WordPress as the basis for building web sites.

WordPress Template

WordPress comes with a default templates. It is possible to modify them. The problem with preexisting templates is that if they are not exactly what you want, even though they are 95% of the way there, that extra 5% sometimes requires a lot more work than you would expect, as you have to deconstruct the template and rebuild it the way you want. It can take less time to do it from black template. That is why a better way is to design the template from scratch. Start with a blank template Chris prepared.

Having installed WordPress, you need to add this to the “themes” folder in the “wp-content” folder. Once it is there, you can activate it from within the WordPress Dashboard.

Yes I am going through this rather very fast, in part because we could never cover the whole topic anyway, and this is just to give you a taste of what is to come. Please do Chris’ tutorial if you want to learn more.

WordPress File Organization

Inside the blank template folder, you will find an index.php file. That is the main file creating each page.

You learned how PHP is able to include a number of files. That is what happens here. Everywhere you see a “get_” PHP will insert an associated file in that place. This is what the index.php looks like:

<?php get_header(); ?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
			<div class="entry">
				<?php the_content(); ?>
			</div>
			<div class="postmetadata">
				<?php the_tags('Tags: ', ', ', '<br />'); ?>
				Posted in <?php the_category(', ') ?> | 
				<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
			</div>
		</div>
	<?php endwhile; ?>
	<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
	<?php else : ?>
		<h2>Not Found</h2>
	<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

You will notice that the index file pulls in the header.php, the sidebar.php and the footer.php files, in addition to the loop that fetches the current post.

Here is a list of all the files in the template:

404.php
archive.php
comments.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

You need to understand that the HTML page that you otherwise code as one entity is here divided among these different files. It is quite easy to transfer your static website to a dynamic WordPress site by dividing up the web page into the existing pages like the header.php, sidebar.php, footer.php, etc.

The good news is that the CSS styles are included as an external stylesheet “style.css” exactly as you would expect.

As you translate your existing website to WordPress, you will once again learn everything that you have learned in class over again, but this time, you will be applying it to the modular structure of a dynamic php / database driven site.

There are many benefits to such a dynamic site, and a few drawbacks. Dynamic sites are a little slower and unless you keep up with the latest software, can be insecure, but that is not that large a price to pay when you add in all the benefits of a dynamic site.

I understand that this is all a little much. This is meant as a brief introduction. Watch the tutorial, and you will use WordPress to build your sites from that point on.

Assessable Tasks

Posted on by
Reply

Assessable tasks are those core tasks required to create modern web design.

TASKS / ACTIVITIES DATE REQUIREMENTS / INDICATORS
Marking‑up Content week 1 Is the markup valid and semantically correct HTML5? Are images the correct formatand size?
User Experience week 2 Are UX concerns driving the design process?
Design Process week 2 Are all 8 steps articulated? Are they reflected in the portfolio and final?
Styling the Content week 3 Is the CSS valid, clean, external, and using structural selectors wherever possible?
Layout out the Content week 4 Are multiple layout strategies used to construct the website? Document Flow? Positioning? Floats? Flex Box? Grid?
Constructing the Portfolio Site week 5 Is the site logically organized? Is it SEO friendly? Is it tracked using Google Analytics? (only for non‑Parsons hosted websites)
Is the web site Future Proof? week 3‑6 Is the website responsive to a change in viewport size, from smart phones to 4K Screens?
Does the typography communicate? week 6 Does the typography promote legibility? Accessibility?  Does it communicate the messaging, tone, sentiment, and aesthetics?
Exploring CSS3 and beyond week 9‑11 Are advanced CSS modules used to create the look, feel, and functionality of the website? Does it stand out?
Modularity and Interactivity week 12 Are PHP and Javascript used in the final website?
CMS: WordPress week 9‑13 Are You capable of creating a site using WordPress?
Forms week 14 Are forms used in the final website?

03 Demo Instructions

Posted on by
Reply

In class demonstration for week three: introduction to CSS. Finished file.

  1. pick up the HTML5 template from the class portal
  2. Give it a title.
  3. There is an embedded style sheet that we will not use. 
    <style type="text/css"> 
.example {
}
</style>
  4. There is a link to an external style sheet. 
     <link rel="stylesheet" href="CSS/styles.css" media="all">
  5. We will use an external style sheet. Create a folder called “CSS” and a file called “style.css” External style sheets are just blank files, filled with css rules attached to selectors that target the elements in the HTML document.
  6. If we were to start adding rules, we would be adding our rules on top of the default rules of the browser. Since we do not want to depend on the rules of this or that browser, we neutralize them with a browser reset.
  7. After the Browser reset, we begin by writing that this is where the user style sheets starts. 
    /*USER STYLES*/
  8. We start by targeting the most general tags, and slowly work our way to more specific tags.
  9. The most general tag is the <body> tag. Do we want to keep the white background? What fonts do we want, etc? How about: 
    body {
background: hsla(0,100%,70%,1);
font:  400 1.5em/1.6em  "Times New Roman", Georgia, Serif;
}
  10. Be careful with this font property, as it combines a number of properties, and you need to execute it exactly as it is here. 400 refers to the weight of the font. 400 is normal. 700 is bold. 1.5/1.6 provides us with both the font size and the line height. I then name the font family, were Times New Roman is requested, and if that is not available , Georgia, then any serif font. See Class 6 for more font information.
  11. Since every other tag will be written inside the body tag, they will inherit some of these properties. The font property is inheritable, the background property is not.
  12. The next strategy is to limit the width of the window when looking at the website on a computer screen, and to center it in the middle. We limit the width to 940px and place it in the middle by using the CSS property margin with value auto like so: margin: auto;. 
    section {
width: 940px;
margin: auto;
background: hsla(30,100%,98%,1);
}
  13. The background of the section tag is only as large as the information inside of the tag. Right now it takes on the size of the picture. Let’s swap the picture with the text that one of you has written. The section expands to contain the new content.
  14. The CSS reset has reset most properties, so we need to define all of our CSS. We start by providing the section tag with 40px padding. This keeps the content from hitting the edges of the section tag.
  15. Save the document, make the browser window active by clicking on it and hit command-R to refresh the browser.
  16. We can keep the top from touching the top of the window by giving it a positive top and bottom margin. This is done by adding 40px before the auto. margin: 40px auto;
  17. CSS always starts on top, then goes clockwise, to the right, bottom, and finally left. If you only have one value, all sides take on that number. If you specify two numbers, the first signifies the top and bottom, the second the right and left sides. If there are three numbers, you can give different values to the top and bottom, and the sides stay the same. With four values all the sides are specified separately.
  18. Let’s define the section by adding a #444 border. We can do that with a shortcut that allows us to specify width, kind and color at the same time; border: 3px solid #444;
  19. The entire code for the section now looks like this: 
     section {
width: 1100px;
margin: 40px auto;
padding: 70px 30px;
background: hsla(30,100%,98%,1);
border: 3px solid #444;
}
  20. What if I were to give the header a background color? If I color the header, it looks kind of clumsy, because of the padding I gave the section. I want to counteract that by giving the header negative margins for each side, but not the top or bottom. That is accomplished by margin: 0 -60px; Giving it a little extra makes it stick out over the section, and has the effect of raising the header above the rest of the document, which helps define its importance in the visual hierarchy. I also want a little space between the header and whatever comes next. 30px should do it. margin: 0 -60px 30px; I give it a border border: 1px solid #444; and 20px of padding to finish it off. 
    header{
background: hsla(0,100%,90%,1);
margin: 0 -60px 30px;
padding: 20px;
border: 1px solid #444; 
}
  21. Next up is to style the h1 header. If we make it 2em (that is a size based on the width of an em dash). OK, that is not brash enough. Lets go with 4em. The serif font does not work and I change it to Helvetica. There are more interesting fonts available, but for now, lets keep it simple.
  22. The navigation is a list. Lists items by default act like blocks. That means they go down like paragraph returns. We want them to go across, so we need to target the list items in the header and change the display from block to inline-block. With a little margin we can separate the menu items. We can go further, but lets leave that till class 5. 
    header li {
display: inline-block;
margin: 0 10px;
}
  23. It is easy to have paragraphs display one below the other. It is more difficult to display them side by side. Going vertical is natural, going horizontal is what will give you your headaches.
  24. To give us some practice, I will demonstrate the float technique to place items horizontally. This is the technique used by the NYTimes.com to create their layout. You can see this for yourself by installing the Plugin. Click on the bug that is installed to the right of your address bar, select outline in the pop-up and select outline frames. You will see almost every box in the layout light up.
  25. The float technique was originally used for floating pictures, but five years ago it was adopted by the NYTimes to float layout elements. Tables were used for layout before that time.
  26. The first step is to float an image to the right. Create a figure, img and figcaption and link to an appropriately sized picture. Since I may want to move pictures to the right more often, I create a class called pict-r, and use the class attribute in the figure class="pict-r" . A selector for the class is placing a period before pict-r in the CSS style sheet .pict-r . I also specify a smaller font for the caption, and align it to the right, and put a border on the image, though I offset it by 2px using padding. 
    .pict-r {
float: right;
margin-left: 40px;
}
img {
border: 3px solid silver;
padding: 2px;
}
figure {
}
figcaption {
font:  400 .7em/.7em  Helvetica, san-serif;
text-align: right;
}
  27. The picture moves to the right. The caption is flush right. The picture has a border around it, and the text runs around that picture.
  28. We use the same idea, but now we float a layout element to the left. THe layout element is created by introducing a div in the markup that encloses the text I want to float to the left.
  29. This time I use an ID to target the div. An ID can only to used once on a page. The id attribute is placed in the div tag: id="left" and in the style sheet, a hashtag is used as the selector: #left 
    #left {
float: left;
width: 44%;
margin-right: 3%;
padding-right: 3%;
border-right: 2px solid silver;
margin-bottom: 10px;
}
  30. I used percentages as an easy way to figure out the width. It is always a percentage of the width of the parent element. I could have figured out the pixels values and done it that way as well.
  31. When I decided to put a top and bottom holding line it, a problem arose, and I needed to push the last paragraph below the float. There is a CSS property to do this, called clear, meaning clear float. That allowed me to put the last paragraph below the two columns.
  32. To finish it off, I gave the paragraphs a 13px spacing at the bottom. 
     .bottom {
border-bottom: 2px solid silver;
padding-bottom: 10px;
margin-bottom: 20px;
}
.top {
clear: left;
border-top: 2px solid silver;
padding-top: 10px;
margin-top: 20px;
}

15 Final Presentation

Posted on by
Reply

Week 15
12/11

Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream of, on the web. Show your final, walk us through your code. What was the most difficult/frustrating part of the project? What was the most rewarding?

Homework

Final Assessment:

Class Evaluation

  • 15 minutes to fill out the course evaluation.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • provide each student with the time to exhibit their work to the rest of the class.
  • receive feedback from everyone.
  • to celebrate that you have learned a new and imminently usable skill and now belong to the modern world wide web culture.

Outcomes

At the end of this unit, students will have:

  • spent about ten minutes each presenting their final assignment.
  • expressed the UX and IA decisions that went into the project
  • explained the problems they set out to solve
  • show the way that they tackled those problems.
  • used the work-sheets to help present and express themselves.

Definitions

These are the general criteria that The Webby Awards use to evaluate web sites. You should be familiar with them.

Content
Content is the information provided on the site. It is not just text but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

15 Parting Essay

Posted on by
Reply

You now know a lot more about CSS and HTML than you did when you walked in. It was difficult to first wrap your head around how this new language worked. You had to practice coding. Once you shed the obvious mistakes, coding HTML and CSS proved to be not nearly so difficult as you had first imagined. With the confidence you’ve gained you are hopefully liberated in your design sensibilities and impose it upon the code, and not the other way around. Make the code work for you.

If you’ve become really good at HTML and CSS you can give back and offer your services at the University Learning Center

Keep yourself in the loop of the continually evolving web by paying attention to what the browsers are doing, like Google Chrome Developer and Mozilla Developer.

Know that the web will be the next computing platform. HTML and CSS are to play a gargantuan role. Know it. Use it. Keep on top of it as it evolves.

Have you become interested in front end web design? Know it takes more than HTML and CSS.

Push the limits. It is amazing what a little CSS can do. Check out Diana Smith’s CSS Francine and the Explanation.

Use the web to facilitate your professional aspiration with real target audiences to make you a better and more responsive student.

Be good, enjoy what you do and have an effective web presence.

And have an interesting and rewarding life.

All the best,

onno

13 CMS: WordPress / Final Review

Posted on by
Reply

Week 14
11/27

Forms and Peer Review. HTML forms are a standard way to collect information from the user. Activity: Create a simple form. Your final project should be a functional web site by this time. Activity: Peer Review: Students split up into pairs and review each other’s web sites.

Homework

You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • Everyone is pretty busy with their finals but I thought to wrap up the course with a guided tour of a WordPress template.
  • look at how PHP creates the WordPress Website out of different sections.
  • take a detailed look at the WordPress style sheet.

Outcomes

At the end of this unit, students will have:

  • been exposed to a content management system (CMS).
  • worked through WordPress template.
  • understood how PHP combines the page out of disparate files.
  • will have been helped with any outstanding issues remaining in their final project.

Step-by-Step

20 Review homework and answer questions.
40 Show and Tell: Content management System — WordPress: new site

15 Student Evaluations: I will leave the room while you fill out the evaluations.
10 Break
80 In Class Help on the Final

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Move the Web Forward is the hub for how to engage the web community once you have joined it. You have all joined this community by now, and this will be a continually updated resource at the center of the web design universe.
  2. Changing the World! Web Governance
  3. Paul Irish Industry leader.
  4. Eric Meyer The original Industry Leader that helped bring in Standards based web design.
  5. Jeff Zeldman Another industry leaders that helped bring in standards based web design.

There are, of course, many more resources but in this ever changing fast moving web culture, you can count on these to move the web forward. This will keep you going.

  1. One last article that introduces freelance bidding sites.

    As long as you are a student, your courses provide you with projects but if you are graduating, I highly recommend checking these sites out, and doing a number of projects, if not for the money, for the experience, so that you can build up your portfolio.

Definitions

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

14 Forms / Peer Review

Posted on by
Reply

Week 14
12/04

Forms and Peer Review. HTML forms are a standard way to collect information from the user. It requires setting up a php script. Activity: Create a simple form and include it in your final. Activity: Peer Review: Students split up into pairs and review each other’s web site(s).

Homework

1) For class: sv Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that to the person whose site you reviewed and to me. Read: chapter 16. 3) For final: Use the feedback from the peer review to finish your website. Due: The following week.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • Be able to incorporate forms into the final website.
  • Understand how to critically review web site design and execution.
  • Have your web site reviewed by a peer.
  • Critique and review a peer’s web site.
  • Have me review your web site.

Outcomes

At the end of this unit, students will have:

  • Learned how to construct forms in HTML.
  • Activated forms on the server side using a PHP script.
  • Implemented forms on their own website.
  • To have been a user and test a peer’s web site
  • Critiqued and reviewed that website.
  • Had their web site critiqued and reviewed.
  • Used the feedback to finish web site.

Step-by-Step

20 Review homework and answer questions.
20 Forms
20 Implement Forms and PHP script on server.
20 How to peer review a website
10 Break
20 User test partner’s site
30 Peer review partner’s site
40 Switch Roles

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Opera Developer Blog
  2. Safari Developer Blog
  3. Mozilla Hacs

There are, of course, many more resources but Safari, Firefox and Opera are the standards compliant browsers that have carried web forward. Microsoft is also becoming a player but all of you use Macs.

Talking Points

LYNDA.COM is available to all Newschool students by logging in, going to the library page, clicking on databases and search for lynda.com. You will have to sign up and activate an account but this will will give you access to both the video and the supplementary exercise files.

LYNDA.COM video Series: Validating and Processing Forms with JavaScript and PHP

Validating web forms is a critical skill for any web developer, ensuring that the data that’s submitted is complete, accurate, and not malicious before it’s sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it’s ready for other applications.

Assignment Links

Links that I expect to be up and the end of the semester:

Example of landing page from a previous semester.

    Week 2

  1. Assignment 1 (5 pages marked up)

    Week 3

  2. Index.html landing page— these links and a picture next to your name.
  3. Worksheet: behind the scenes on creative process.
  4. NY Times Wireframe
  5. Portfolio Photoshop Comp

    Week 4

  6. Portfolio exhibiting the CSS selections

    Week 5

  7. Portfolio Photoshop comp to HTML/CSS.

    Week 6

  8. Portfolio: rough, including SEO, Google Analytics and Styled Navigation

    Week 7

  9. Midterm Quiz
  10. Midterm: Portfolio (can be the same link as week 6)

    Week 8

  11. Typography Poster
  12. Final Worksheet with topic

    Week 9

  13. Responsive Redesign of Portfolio

    Week 10

  14. CSS3 Collateral ( and post the exercise you did in class)

    Week 11

  15. CSS3 Animatics (and post the exercise you did in class)

    Week 12

  16. Final: Rough

    Week 12

  17. Multimedia Demonstration

    Week 13

  18. Final: Modular Navigation

    Week 14

  19. Final: User Testing

    Week 14

  20. Final: Peer Review

    Week 14

  21. Forms

    Week 15

  22. WordPress CMS

    Week 15

  23. Link to Final

    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.

Definitions

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

14 Peer Review

Posted on by
Reply

Peer review is an important life skill. Do it effectively and with tact, be positive and insightful and help the person see things about their site that they did not catch, from effective design and user experience point of view to mistakes or better solutions to implementing code.

Be Constructive and Instructive

Be positive, let your partner know what you liked. Praise, comment, and correct in that order. Make positive comments about the design, its execution and overall effectiveness of the site before explaining what does not meet expectations. Look at the code to see if it is properly annotated, well organized and valid. You will run their code through validator (and css validator. I expect that the site was already valid HTM and CSS. If not, it should be by the time you are finished.

Instruct if your partner needs to understand things that you are aware of and they are not. You can help them grow in the same way that you grew this semester. Sharing is caring, and it is always good to spread the love. You really know your stuff when you can teach it!

Critical Review Examples

If you are in need of an example please check out Web Standards Sherpa, a website dedicated to constructive criticism, to highlight standards compliant solution that solve real world problems. You can see articles that review the headlines of the New York Times and there are many others, including a critique of their own site.

The goal of WebStandardsSherpa.com is to provide web professionals the opportunity to receive feedback, glean advice and learn best practices from experts in the field to help improve the quality of their own work. It’s very instructive to see professional and pedagogically useful critique at work.

Reacting to Criticism

You do not have to incorporate your classmate’s suggestions. Trust your own judgement about your design, determine which issues are most important, though pay attention to comments if they are made by more than one peer, and get another opinion if you aren’t sure about something.

User Testing

One way to get feedback is to user test your site. You will use the SilverBack application to record the user test. Download the application, which is free for 30 days.

Doing a user test is straight forward. Create a project, and create a session which will record the your peer review partner’s “user interaction” as they go through your website.

Peer Review Check List

Be constructive, not just “yes” or “no”. Goint through these lists will help you dot your “i”s and crossed your “t”s, so to speak.

Using the HTML5 boilerplate should help to make your site work for most browsers. Try to test your site on Chrome, Firefox and Safari for Mac and Edge for Windows.

Help Your Partner. Everyone has learned a lot but not everyone will have learned everything equally well. You have the opportunity of helping your partner fixissues with their website where they may not have figured out the best way to do something. We are in this all together, and being able to help someone is rewarding initself.

Print out or fill in online the two pdf documents: the questions below and Adobe’s website analysis. Evaluate and answer questions. Send them to your peer review partner and CC me. If your partner has not yet finished coding their site they need to coordinate with you when it is finished, so you can do the review.

  • Intuitive reaction

    1. Take the five-seconds test. What’s your immediate response? Your split second intuition is often canny in its ability to present an accurate picture that can get lost in more deliberated responses.
    2. Describe how the site make you feel.

  • Clarity of Communication

    1. Does the clearly communicate to its intended audience?
    2. Is the experience seamless?
    3. Do the pictures and the design facilitate the communication?

  • Accessibility

    1. Are any of the pictures too large or too small? If so, fix them.
    2. Is there an easily discoverable means of communicating with the author or administrator?
    3. Is the HTML semantic (can screen readers to navigate the site)?

  • Consistency

    1. Does the site have a consistent and clearly recognizable “look-&-feel”?
    2. Do repeating visual themes to unify the site?
    3. Is it consistent even without graphics or an external style sheet? (it can happen)

  • Navigation

    1. Are the links obvious in their intent and destination?
    2. Is there a convenient, obvious way to maneuver among related pages, and between different sections?

  • Design & maintenance

    1. Does the site make effective use of hyperlinks to tie related items together?
    2. Are there dead links? Broken scripts? Pages that are not completed or look unfinished?
    3. Is page length appropriate to site content?

  • Code

    1. Is the code clean and well documented?
    2. Is it optimized for Search Engines (SEO)?
    3. Does it have Google’s Analytics code?
    4. Does it use the HTML5 boilerplate?
    5. Does the HTML validate? Use the Unicorn Unified Validator Service and Check the HTML and CSS. You are to report your findings in your conclusion.

  • HTML5 and CSS3 goodness

    1. List the CSS3 features used. Were they used to good effect?
    2. Is the HTML5 semantically correct?
    3. Is the website future proof? Does it use media queries? Check to see how it works on the iPhone/Android?

  • Overall Assessment?

    Make a list of fixes, suggestions and possible solutions to any issue that came up when assessing the website using the aforementioned considerations.

    Send this report to your partner later today, if you need more time to write it up than class provides, and send a copy to me.