(watch this video in a new tab or window)
Let's take a look at Web Page 04. I decided to list the requirements at the top of my page. You may or may not want to do that. I need to have URL with a link to the site that opens in a new tab/window. For example, Yale Art. At least one thing that needs to be improved. I have 3 for Yale Art. I need a JPG screenshot of the site 1000px wide using CSS to display it at 44% width of the window, and I need it to be done with inline styling. Here's my screenshot. Let's look at my images. When I open the first image my photo editing program shows me that it is 1000 pixels wide by 845 pixels tall and it's only 182 kilobytes, so it's a good size for our web site. You have to evaluate 3 pages. I did Art Yale, the big ugly website, and miamioh.hiretouch.com which is defunct now but was still around when I did the assignment. Web pages can change between when you evaluate them and when I grade them which is one reason for including a screenshot in this assignment.
(1:40) Let's look at the code. I have Kirks Great External Stylesheet dot CSS which has a bunch of navigation stuff in it that we don't need. It also has a lot of H1 type styling. Whenever you steal someone else's stuff, it's a good idea to clean it up by removing things that you're not going to use. I'll edit the web page and the CSS document now. I'll remove the navigation styling because I'm not going to use it on my page. I'm going to save it as Web Page 04 CSS dot CSS. I have a font family for the page using local fonts (not web fonts) and I reset CSS at the top. Now I'll point my reference on the HTM document to the new CSS document. I will change the 'Change this to something new to force an uncached reload' to 'aaa', then 'bbb', then 'ccc'; basically something new each time. I also have internal styling. Also required is inline styling of the image where you need to set the style equal to a width of 44%. You can include the space or you don't have to. To make sure I'm editing the right page, I'll change some text on the page. I'll add 'Here are 3' and 'that need improvement with at least one suggestion to improve the site' to my title (H2).
(4:29) Use keyboard shortcuts to reload and review the page. We can see the text that I just changed. Now let's change the external stylesheet. I'll change the color for the H1's to red and I'll change the reference on the web page from 'aaa' to 'bbb', reload the page and there's the change. Red is not a great color for the site, that was just used for testing. I'll change it to a different color and repeat my steps changing the 'bbb' to something else and then I'll use an announcer voice to change the color to off white. I'll make other changes to show how I iterate during the design process.
(6:46) As always, you should change the color scheme and things like padding and margins to make the design your own work and to learn how CSS and HTML work together. I'll make another change, again for iteration example purposes.
(7:18) I'm going to delete my Web Page 04 CSS and switch my document back to use Kirks Great External Stylesheet dot CSS. Re-check the site to make sure it still works with the reference to the CSS document.
(watch this video in a new tab or window)
This is what I like to call, life lessons with Kirk. Don't try to be all things to all people. Find what you do well and build on those strengths. This is true for you personally and to your site. Also look for the quick wins, also known as the low hanging fruit. If you can quickly and easily make a change to your website that makes a big difference, go for it. If it's something that's highly involved, put it on the back burner. This is a good lesson for this class, your future jobs, and your future, period. Time management is something we all practice and hopefully improve on. Just remember, every time you say yes to something, that means you're saying no to everything else.
(watch this video in a new tab or window)
A persona is basically a made up person that represents the problem that you're trying to solve. Sometimes they're called user stories. I usually just put myself in the shoes of my users and use the product like they would, and think about how I would like it to work. Some places like to do benchmarking (against competitors) but I'm not really a fan of that. Aren't you trying to make something better? Then why would you copy them?
If you're called to do a persona, you'll usually want to come up with a person (name and short background), their problem (as it relates to what you're trying to solve) and their goals (i.e. a solution that you can provide). If you're doing it for a company in the future, you may also include a photo of the person that you're trying to create a persona for.
(watch this video in a new tab or window)
3 popular concepts in design are Wireframes, Mockups, and Prototypes. Wireframes can be pencil drawings or line art for how you want your design to look. Mockups are images that move beyond wireframes that give you a better sense of the final design. Prototypes are almost functioning solutions. You may have a database that will be built later; the prototype would be functioning code without the database. Personally I like to dive right in on the code but if you're having trouble seeing the final product, I encourage you to try any or all of these concepts.
(watch this video in a new tab or window)
On a Mac, to take a screen shot, use Applications...Utilities...Grab...Capture...Selection. I also use a tool called Skitch which allows for annotations as well. You may use screenshots for a wide variety of reasons. Anytime you use a photo, I recommend keeping it small. 1024 pixels wide is generally acceptable. A jpg is also generally the preferred format. Try to keep photos under ½ MB. There can be reasons to go bigger than that like a photo sharing website, but even then I wouldn't force someone to have to download large photos while just perusing the site.
Name images without spaces. Spaces and the web are not good friends.
All images need to have alt text that describe the image too. Make the photo the size that you want it to be, let the user shrink it down but forcing them to zoom in on a picture will make the picture pixelated. Finally, putting "width='100%'" will keep your photo looking great at all sizes.
(watch this video in a new tab or window)
When you evaluate sites you can use the information you've already acquired from this course. Bruce Tognazzini also came up with what he calls the 'First Principles'. You can check it out at http://asktog.com/atc/principles-of-interaction-design/. Bruce has some great ideas. One thing I would like to add is, be nice, especially when you're evaluating your peer's website. People put a lot of time and effort into their work, give them constructive criticism on things that they can do to improve their site.
We've already covered some of my top pet peeve's (spelling, grammar, consistency, file size). I'd like to address content now. If you're site is about art, it should have a lot of art on it. If it's about being an editor for a newspaper, it should have a lot of writing on it. Having the appropriate amount of quantity on a site is just as important as the quality of the content. There's no specific formula for how much you should have. That's where you need to do what makes sense and that's why it's always good to have another pair of eyes look at your work. For all future projects in this class, you should have someone evaluate your work. It can only help you get better.