CAS206-Winter2011
Tuesday, March 15, 2011
Sadie Final
your site?
Fellow ceramics artists.
b. What troubleshooting did you experience?
Easy, once I figured out how to do the navigation.
c. How did the images you use contribute to your website’s purpose? Did your CSS style
add to the “siteness” of your website?
They were the main purpous of the site.
d. What style choices did you make to improve the readability of your table?
Easy sweet to understand words.
e. How did the media you created contribute to the purpose of your website? What plugins does the end user need to display-play?
It helped explain what a wood kiln is. Flash.
f. Describe your validating experience.
Easy! Nothing was wrong!!! :DDDD
g. How did integrating SEO best practice change or improve your website?
I had to think about the wording for everything!
i. Please respond to all SEO questions here
a. Keywords
b. Metatag
c. Links
d. Content
e. Hierarch
I used Google Ads to choose the wording for my website. Through out my website I mentioned Ceramics, pottery, plates, bowls, sculptures.
h. Discuss your browser lab experience. Will you continue using the browser labs?
As long as it is free certainly. The page doesn't look to different between all of them. Goggle was off slightly from all the other pages.
i. Discuss all testing requirements.
I passed Cynthia ^^
^^
Monday, March 14, 2011
Final Project
My main strategy for promoting my site was to use google keywords to help me find the most common search terms for Tegan and Sara. It was really helpful because it gave me ideas, such as spelling sara with an "h", that I wouldn't have thought of normally. I was able to take those ideas and create better metatags for my site so that hopefully it would show up in a broader range of search results.
My browser lab experience actually went pretty well. I played around with viewing my site in a lot of different browsers in the 2-up view, and didn't really notice a whole lot of changes. The main thing I noticed was that some browsers didn't support my font and defaulted to Times New Roman, which was fine with me. One thing I thought was funny was that my buttons didn't have top or bottom borders in IE 7.0 Windows. I will definitely continue using browser labs as long as it is free. I would probably even pay for it if it becomes necessary to in the future because it is so helpful.
The accessibility testing went ok for me. I tried cynthiasays first, but it was a bit too overwhelming and confusing to read everything, so I used achecker after that. It seemed to be much easier and direct. The only thing it told me to change was my link color because there was not enough contrast between that and my background color. I really liked my link color, so I decided to keep it even though it was not in best practice for accessibility.
MAIN BLOG POSTING QUESTIONS:
Who is your target audience?
My target audience was fans of Tegan and Sara music. They have a pretty broad following, but majority of their listeners are young and trendy.
What design choices did choose to attract your audience to your site?
I decided to use clean colors, mainly black, white and grey with my links and a couple of my h tags as a pop of color. I got my colors directly from an image of Tegan and Sara so that my color scheme would be more cohesive with my main image of them.
What troubleshooting did you experience?
It's always so hard for me to recall troubleshooting when it comes time to do the blog post because it's something I just constantly do as I go along without really thinking about it. Nothing really stands out, sorry.
How did the images you use contribute to your website’s purpose?
I used on image on my home page so that visitors could know immediately by the name and image who the site was dedicated to. I also had a photo gallery that had a bunch of images that I photoshop'd all down to the same size for a clean layout.
Did your CSS style add to the “siteness” of your website?
Absolutely. Without css, my page would have looked like crap. I think the wrapper and borders are really what help me the most because they give the site a controlled feeling, as if everything is in it's place.
What style choices did you make to improve the readability of your table?
My table was for the discography of T&S, so I chose to center the album titles above the track listings, but to keep the track listings aligned left so that they were easier to read. I also chose to separate the album titles from the track listings by using red.
How did the media you created contribute to the purpose of your website?
The media I used was a the video for their song, "The Con". I had created a page titled "Song of the Week", so this was where I included my chosen video.
What plug-ins does the end user need to display-play?
I think just flash since it's just a youtube video.
Describe your validating experience.
I was validating my pages as I went along, which made validating at the end a lot easier. I was surprised that I didn't really encounter many errors except for on my site map because I had made a mistake on my ul, but it was easy to correct.
How did integrating SEO best practice change or improve your website?
The main thing that I learned was not to link to unpopular sites because even bad links can lower your search rankings. I think knowing this will help my sites in the future a lot. I wasn't really sure how to use link popularity, so I just used only the official websites of Tegan and Sara that I imagine to be the most popular, such as teganand sara.com,twitter, youtube and facebook. It also was really helpful to have google ad words as a tool and I will 100% be using that in the future to ensure SEO.
Lauren Pogue - T&S Fan Site
as for the usability of my site, i tried to keep it designed really clean and simple because i feel that the target audience for my site would rather it be more bare in color and theme than cluttered and an eye sore. This enhances the user experience by not being messy and a pain to look at when navigating through the various pages. When testing in Adobe Browserlab I test in two versions of firefox and the latest version of Chrome. The website was accessible and had no problem, although i notice the font style and the banner image shifting slightly. The only change i made was adjusting the margin for the banner to make it less noticeable that it shifts when using Chrome or the previous version of Firefox.
JOURNAL:
a. My target audience is anyone who has seen the movie, read the book, or has heard about either and is interested in a brief summary from a fan page. I chose simple designs with a handwriting banner to keep it clean but still enjoyable to look at.
b. I did experience some trouble shooting while using the box model to adjust my image and media to fit so that it would not shift as much in the browser. It was fairly simple and the box model did most of the work.
c. the images i chose gave the user a chance to look inside the movie and see a few "screenshots" from various scenes. styling them in CSS gave it a little bit of spice as opposed to leaving them borderless and dull. I still kept them fairly simple with a black double border.
d. I didnt choose any particular style to keep my table readable, i just kept it separated with black border so you can differentiate the rows and columns.
e. the user will need a flash plugin to view the video i embedded into my sites "preview" page. I chose a theatrical trailer for my media to give the user a real view into the movie and how it was shown in japan.
f. my validating experience went smoothly because i validated after making changes so that i wouldnt get ahead of myself and end up with a lot of troubleshooting like I did on my midterm. I feel this is a much better way to do things in the end and saves you plenty of hassle.
g. I dont feel that integrating SEO practices has improved my site so much right now since they are not actually employed for search engines and keywords, but they are a must for every website and a vital part of a live website.
SEO:
My strategy to promote my website was basically just taking the two links in my page and seeing their popularity rank and then integrating them into my index page. Then I took some keywords off of google and added them in the meta tags to make it easier to target when searching in popular search engines.
h. I think browserlab is an awesome tool, right up there with kuler in terms of helpfulness. It works great and gives you a lot of options, instead of only being able to test browser "A" B" and "c", you can test browser A version 1.2 1.3 1.4 1.5 etc. This is key since browser versions seem to have subtle changes. i would use this program again.
i. see testing
j. My Battle Royale Fanpage
Andrew Vernon - FINAL
b: I didn't experience any trouble shooting because my midterm code helped me out a lot.
c: I chose images of guns so people can see pictures of the guns I'm talking about. I added a border around the images that matches my color scheme. It looks pretty cool.
d: I just changed around the background colors and added a border. I think it is nice and readable.
e: I embedded a YouTube video from the Discovery channel comparing an AK-47 to a M16. It fits in well with my AK-47 page. The user needs a Flash plug-in.
f: Everything validated; no problems at all. Except for the embedded video code, but that was expected.
g: I added meta tags and a description that uses keywords useful to my site. I used links for sites I thought would be useful to the user, as well as an email to my link.
h: The browser lab is pretty cool. All of my pages look great in the sites I tested, which were Chrome, Firefox, and Internet Explorer 7.
i: Cynthiasays.com says that my site is great! Everything validated using the W3C validator. All my links work just fine. And I'd say may layout is simple enough that people won't get lost.
j: My Site: Gundamentals
Final- Amy Petit
a) My target audience for this website is artists and potential patrons for my dad's sculpture work. I chose to make this an online portfolio and in order to attract the audience to the site, kept it very clean and simple. I didn't want to overwhelm the viewer with sculpture pieces so I edited it down to key pieces and made pdf links if people would want to see more samples. I chose a darker blue and brighter green for the background and chose to keep the area on the work bright to draw attention to the pieces. I also provided details on the construction materials and contact info for my dad.
b) I had to do a lot of troubleshooting with the navigation. The image rollovers were giving me a little trouble at first but after going back and looking at the midterm code I was able to make it work properly.
c) The images were critical to showing the sculpture work. I used them in the header and in order to get some variety - I kept the design of the header the same but swapped out the images. I chose to use a large picture on the front page as a "feature" which can be changed out as new pieces become available. The mobile and sculpture pages each contain six images so the viewer can get a sense of the some of the pieces. I think the CSS styles were so important in helping keep the site cohesive - though I was pleased to see that if I broke the link to the stylesheet the hierarchy remains due to the use of the h1, h2 and p tags.
d) In order to improve the readability of the site, I made sure there was good contrast between the background and text. I also provided alt tags and a summary for the table to help with assistive reading devices.
e) I used the media as an example of one of my father's artistic influences. It's a short time-lapse video of an Alexander Calder sculpture. This is a link to YouTube so the user would need the latest version of Adobe Flash player.
f) I validated the site as I designed it which made errors much easier to troubleshoot. The mobile page with the media generates an error as we knew it would. One thing I noticed that I do is I will accidentally put the "&" symbol in and validating is great for catching that it either needs to be "and" or the ASCII character.
g) SEO was an interesting process - It made me aware when I was writing the content of the phrases I was using particularly in the headlines, subheads and title bar. I used keywords and descriptions in the meta tags to help the search engine find the site. I also used linkpopularity.com and chose to include the Idaho Commission on the Arts because it was both relevant to the content and and extremely popular site. The other links I included had decent traffic and are two places my dad has exhibited his work.
h) I thought Browser Lab was really cool - a great way to test out different operating systems and versions of browsers in one spot. I will definitely continue to use it.
i) I tested this site in OSX Firefox 3.6, Safari 5.0 and Chrome. I used Browser Lab to test in Internet Explorer 6.0 and 8.0 and Chrome for Windows. I used the onion skinning to observe the difference and the main thing I noticed was how Windows renders the type and borders. There was difference in positioning as well. None of the differences were so severe that I wanted to change anything.
j) Here is a link to my site: http://sws.pcc.edu/student/CAS206_pdeangel_13645/amypetit41/Final/final_website/Sunday, March 13, 2011
Final Website
a) The target audience would be sci-fi readers familiar with his books, and a cross-over user who is familiar with his movies. I chose colors and treated images to reflect a dreamlike, fractured reality, hyper world state consistent with his story lines.
b) Troubleshooting problems - I ran into a little problem getting the elements to flow to the right of the vertical nav buttons. I realized I needed a div class to contain the elements that I wanted to position neatly in that area. Overall there was a lot of margin tweaking throughout the project.
c) I had fun creating the strange treatments to the Photoshop elements. The blinking eye nav buttons were the first thing I thought of when I chose this subject. The CSS for some of the images applied a border that was consistent with the colors in the site and treatment to the page header.
d) The table's readability was enhanced by the use of sans-serif type in the table columns and headers. The table headers and table caption were bolded and reversed against darker backgrounds.
e) The media shows a trailer to the latest movie made from one of his stories, "Adjustment Bureau". The media used was embedded from YouTube's old embedding code, so I don't believe it requires special plug-ins.
f) I found a few cut/paste mistakes while validating. I find my validating style is to do the index page, then validate it. Then dupe that page to start producing the rest of the site. When I have all pages created, I validate often, and even more so towards the very end of the production process.
g) The addition of metatag description and keywords that were used throughout the site supports SEO practices. Promotion included the inclusion of expected user search words for sites of this topic. I checked on the Google's Adword Keyword tool and added "books" to my keywords. Inclusion of links to other sites probably visited by someone searching this subject supports SEO. I used well-formed code, and variable descriptive titles in the head section of the XHTML code.
h) Browser Lab - I was surprised by some unexpected results with some of the browsers. I tested Firefox 3.6 for Windows, and found it didn't display the YouTube media I embedded. Odd, because it works fine on my Firefox 3.6 for MAC. I also checked on Explorer 7.0 which appeared to be quirky about recognizing some margin attributes while Explorer 8.0 did fine. Chrome did an awful job representing the fonts throughout the site. I tried to fix one of the faults I noticed in Explorer 7.0 - the background color of the nav hover link. But when I rechecked afterward, the misrepresented color persisted. I assume it was a "refresh" problem on the SWS, or something I could not immediately address if it was an Explorer problem. I will continue to use Browser Lab.
i) I checked and passed the accessibility testing on "cynthiasays.com". CSS and XHTML code validated as uploaded, and all links functioned - internal and external. One page contains a lengthy list of books, so I added a "Go To Top of Page" link for quick navigation. Other pages do not have this much depth, so they did not require this link.
j) My CAS206 Final Website