3 Local Sites that Can Improve Usability Today

1. Mi Cielo - http://mymicielo.com/     - Mexican Restaurant in Redmond, Oregon

For the Website mymicielo.com, I believe the usability issue: Images and videos are relevant and meaningful, is a hindrance for them. The whole page doesn't have a great flow to it, but I've never eaten at this restaurant before and was curious to actually see the pictures on their index page. When you go to the page, a large picture loads towards the top and it has right and left arrows so you can click through different pictures. But when I scroll right or left, it loads pages with only broken image links. Some prospective customers might base their decision not to go based on the lack of images.

Mi Cielo could improve their site by fixing these image links and having professional looking photos of their food actually load for the viewer to see. 

2. Earth Fire Art    http://www.earthfireart.com/   - A pottery lounge in Bend, Oregon
Earth, Fire, Art is actually a place I take my son quite often, which is why I looked up their webpage. I expected to see at least photos of the different types of pottery you could buy, and ones of people having a good time painting their pottery, but none of that was included. Their website is basically one page, that says what they are and gives contact information. I was pretty disappointed with this companies website, which in no way really tries to bring in new customers. There are so many things wrong, but I will only list a couple along with recommendations. First of all, the lack of pictures:  Images and videos are relevant and meaningful. If people don't know what this place is about, it's hard to imagine it without photos. For a business like this one, that is probably their biggest tool for getting new business from their website. I would also say that the usability rule: Color alone is not used to convey information, is not something followed. They have a colored background and links but nothing that catches your eye to specific things. I think adding some photos and some different colored content areas can make this website feel like it actually has usable information.

Basically, earth, fire, art, needs to add content to their page. They need photos showing the customer's experience when their business is visited. Also, I think a huge downfall of their website is not listing birthday party information. They say you can have parties there but don't give any info except for "call us for details". As a mom, and someone who uses the internet for information regularly, I can honestly say I'd probably pass this business up as an option for my sons birthdays because I can't get at least a minimum amount of information from their website.

3. Zydeco Kitchen  - http://www.zydecokitchen.com/ - A restaurant in Bend, OR

Zydeco's website did some things well but I think the main problem is the site's navigation... Or lack there of. Zydeco's website is all inclusive on the main index page. For example, there are links on the top such as "Home, restaurant, menus, wine..." and if you click on one, it scrolls you down to part of the homepage that lists that information. So it's all on one page. I found it hard to review their menus and know exactly where I was on the page. If I wanted to go back up to the address, my first instinct would be to scroll all the way back up because 'contact us' or 'location' or something similar is not listed in their menu, which is fixed (which is a plus).

My recommendation for Zydeco is to include their amazing, professional looking photos on the homepage with a short length design and make the menu items links to other pages. I think this would create a better user experience for potential customer's by allowing easier site navigation.

3 Web Sites that Have the Look I like

1.    Dr. Jays Clothing etc., website.  -            http://www.drjays.com/

I use this website a lot so it's one that came to mind but I really do like the look of it. The huge header and the huge footer both stand out to me. Or it's split up into 4 sections vertically. links up top, then a large section with a rotating banner, then a scrollable portion showing products for sale, and then at the bottom a footer with a large height. I just like the black on top, then two sections, then a giant black footer. It's simple but visually pleasing, and the overall layout feels unique to me.

2. Stuck in customs, photographers website -          http://www.stuckincustoms.com/

 

I liked the look and feel of this website. Mostly, because it seems rare to come across any website anymore where the home or index page is informational in any way besides being just a page to include links to other pages. On this website, the photographer includes a rotating banner across the top showing different pictures he took, and then you can scroll down forever and view more of his work along with descriptions of the photo and area it was taken. I like the logo and links being fixed so they scroll right along with you as well. Also, cool hover effect on the photos giving the viewer shot information. The fact that you don't have to go through any links to be able to view his photos is my main attraction. This guys photos are enough to deter any visitor from complaining about his website layout though...

3. Woodwork's website. It's a film, graphics, and production company -         http://woodwork.nl/

Woodwork's website is very unusual and original. I don't think it's for everyone but for me, the unexpectedness of it made me curious, which prompted me to click around, checking things out. That's got to be a plus for any website, especially one showcasing their previous work in order to get new clients. The vertical photos that scroll sideways is really cool. I love all the vibrant and colorful pictures they used as well. Each picture being a link to another page that describes the project that accompanied it. And the main heading info for the site being in simple black on the left was a good touch.

3 CSS Properties I Haven’t Used...Until Today

background-origin     https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin


I thought this was a pretty cool CSS property that I have never heard of or used. background-origin allows you to specify how you want the background image to appear in your webpage. You have to use it following background-image, to determine how it will appear. For example, you can use background-origin: padding box; and it will only extend the background image to the edge of the padding that you designated. I also like that you can use background-origin: content-box; that is one I'll have to play with. Not sure exactly what this is going to do. It appears that you could put it inside for example, one column of a three column webpage and it would only be a background image for that one column. If that's the case, I love this.

border-image     https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

border-image is a pretty cool CSS property. It allows you to use any image and have it tiled, and or repeated to create a border around an element. So you could find a picture of a small ghost on google, and use border-image to create a repeating small ghost as a border around a div talking about a halloween party. I think this one is pretty creative, and I'm really into the visual aspects of CSS properties.

inherit  https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

 Inherit is pretty cool and I know you've talked about it before but maybe it didn't really click. It reminds me of nth-child... or that type of CSS property that is almost like format painter in Excel. That's where my mind goes with it anyways. Inherit is used to specify that a specific html tag's design be based off of it's parent element and not off of new CSS rules you are putting in. For example, you use a specific color font in all your paragraphs in the footer, but you create a CSS rule for <p> in the body portion of your CSS, you can then state that you want #footer p to color: inherit.. kinda cool. Although as I'm typing this, I'm wondering how much time that would save you. Probably would be great for more complex CSS rules. I thought this was cool anyways.

3 HTML Tags That I Haven’t Used...Until Today

1. The <small> tag - http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-small-element


I haven't heard of this one but think it' s pretty cool.The small tag will create the portion of text within the tags to be smaller.  Reading through the article around it I can see how it could be relevant. Instead of using emphasis, or strong tags to change the look of certain font, using small can come in handy. I can see how it would clearly be quicker than giving maybe that portion of the paragraph a specific class or id, and then formatting it in CSS.

2. The <label> tag - http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-label-element

I haven't ever heard or seen the label element. I read up on it through this article, and because this article is confusing, I reviewed it on the W3Schools website to see it in action. The label tag, along with a control tag can create radio  buttons, for example.  I see that you need to couple it with a type of control function but I think those two things combined could be a cool attribute to a website, for a poll or general user feedback. Not sure how the back end would look exactly on this but I think it's a pretty cool tag.

3. The <pre> tag - http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-pre-element

the pre tag is an easy way to style a portion of text within pre tags. You can use it to display text with unusual formatting. I think saving some CSS for pre tags could come in handy as something you can save in a file and refer back to and use that specific one over and over again in certain instances.