TESTING:
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
Monday, March 14, 2011
Andrew Vernon - FINAL
a: My target audience is people who love guns, military or law enforcement personnel. I chose military type colors, and camo patterned buttons with bullet holes to keep it interesting.
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
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
My final website provides info about the (deceased) sci-fi writer, Philip K. Dick. Some popular movies he penned were: "Blade Runner", "Total Recall", "Minority Report", "Paycheck", "Next", and the newest one, "Adjustment Bureau".
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
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
Final Project - Vicki Knapton
For my Final Project I decided to create a website, with my bosses full permission, for a book publishing company (Graphic Arts Books) I consult/work for.
a. My target audience are people interested in Alaska and Northwest books. This covers a large span of people as the books GAC publishes range from Photo-essay, childrens illustrated titles, cookbooks and non-fiction titles. I choose easy to read classic font styles, and colors that convey the feelings of the northwest and Alaska (blues and greens)
b. I have yet to master the box model....but I feel I'm getting better. That was my main issue. I also do not know what the secret is to using background: url(graphics/name.jpg) as I cannot for the life of me get this function to work. a little disappointing, but because of this I was unsuccessful with the rollovers, and probably would have implemented the technique in places like the table head.
c. the majority of the images used are front covers from the company. I picked the most important titles to feature (new releases and upcoming events). I also used a shot of mt. hood to convey "northwest". the colors of the shot tied in with the o/a site very well also.
d. I chose a border that matched the border of the website (double) I aligned the text right for column a and left for column b. to tie the lines better together. I used colors for the head and background to make the table still readable but that allow it to pop. I did not use lines between rows as I thought this would be overkill.
e. One of the upcoming events was for a book about a foot race. I chose media about the footrace to give people who may not be familiar with it exactly how cool the race and the mountain it is named for are.
f. I had no problems getting my code to validate using firefox validator in the the web toolbar. being careful to check and re-check my code as I designed it was very helpful. I triple checked all links to make sure they worked. and I checked for accessibility using cynthiasays.com (it passed!)
g (SEO) Although Graphic Arts Books name is perhaps not as well known as it's titles, or it's parent company (Ingram) so for the Keywords and meta tags I utilized these aspects. I also focused on a major subject of the company: Alaska as this has less competition then the general subject of publishing. A couple changes I made for better optimization: to my surprise, I noticed GAB's parent company Ingram Publishing services URL didn't receive as high rating as Ingram Content Group's URL so I added both to the "about" page. I also added more descriptive text to the title of each page.
I did use Browserlabs, and will continue to use it in the future. I noticed chrome windows and Firefox (mac) and Safari seemed to be very similar. while other windows browsers seemed to shift my logo head left and right. I tried to adjust this, but it was never consistent from browser to browser which way it would shift so I had to leave it. Not sure how to resolve this - smaller image or absolute positioning perhaps.
a. My target audience are people interested in Alaska and Northwest books. This covers a large span of people as the books GAC publishes range from Photo-essay, childrens illustrated titles, cookbooks and non-fiction titles. I choose easy to read classic font styles, and colors that convey the feelings of the northwest and Alaska (blues and greens)
b. I have yet to master the box model....but I feel I'm getting better. That was my main issue. I also do not know what the secret is to using background: url(graphics/name.jpg) as I cannot for the life of me get this function to work. a little disappointing, but because of this I was unsuccessful with the rollovers, and probably would have implemented the technique in places like the table head.
c. the majority of the images used are front covers from the company. I picked the most important titles to feature (new releases and upcoming events). I also used a shot of mt. hood to convey "northwest". the colors of the shot tied in with the o/a site very well also.
d. I chose a border that matched the border of the website (double) I aligned the text right for column a and left for column b. to tie the lines better together. I used colors for the head and background to make the table still readable but that allow it to pop. I did not use lines between rows as I thought this would be overkill.
e. One of the upcoming events was for a book about a foot race. I chose media about the footrace to give people who may not be familiar with it exactly how cool the race and the mountain it is named for are.
f. I had no problems getting my code to validate using firefox validator in the the web toolbar. being careful to check and re-check my code as I designed it was very helpful. I triple checked all links to make sure they worked. and I checked for accessibility using cynthiasays.com (it passed!)
g (SEO) Although Graphic Arts Books name is perhaps not as well known as it's titles, or it's parent company (Ingram) so for the Keywords and meta tags I utilized these aspects. I also focused on a major subject of the company: Alaska as this has less competition then the general subject of publishing. A couple changes I made for better optimization: to my surprise, I noticed GAB's parent company Ingram Publishing services URL didn't receive as high rating as Ingram Content Group's URL so I added both to the "about" page. I also added more descriptive text to the title of each page.
I did use Browserlabs, and will continue to use it in the future. I noticed chrome windows and Firefox (mac) and Safari seemed to be very similar. while other windows browsers seemed to shift my logo head left and right. I tried to adjust this, but it was never consistent from browser to browser which way it would shift so I had to leave it. Not sure how to resolve this - smaller image or absolute positioning perhaps.
Saturday, March 12, 2011
Final - Megan McFadden
A: I chose to create my site for my "make-believe" graphic design business ... which I plan on starting up for real sometime this year when I'm not so busy. My target audience is very general, it is mostly targeted towards businesses but also regular people who are in search of graphic design services. I chose to keep my site well organized with consistent navigation so it is easy for the user to navigate through. I chose my color scheme based on how I want my company branding to look; it is not tailored for a specific audience. My logo needs work ... but I don't want to waste too much time on that right now.
B: I actually didn't experience any trouble shooting this time around, other than missing a closing p tag. I may have had problems with the image navigation but I pulled my hair out over that on the midterm. Now that I have that figured out, this site was pretty easy for me ... except for the fact that I spent WAY too much time on it and now I'm panicking about studying for my microbiology final.
C: The images provide an example of the designs I have created at my jobs. I hope it contributes to my website since it shows the viewer what my designs are like. I created a thin border and padding around all of the images to help them stand out a little better.
D: I kept my table pretty simple and clean. I made a different color for the headers, made the main items bold, and created a border around everything so it is easy to follow.
E: I had a HORRIBLE time finding media to fit into my site. For my real site, I will not be including any media. For the purpose of this assignment, I found a video regarding the graphic design process and added a link to it so the viewers can watch if it their curious about how the design process works. The video is on YouTube, so the user will need a flash plug-in.
F: I didn't have any problem validating, it went really smooth for me. I just had that missing ending p tag at one point, but that was easily fixable.
G: I added in meta tags, description and keywords, below the title tag to help search engine crawlers index my site. I also tried to use the text "graphic design" a lot throughout my site. I created a Facebook page for my pretend company and added a link to that page (which needs work, of course, but I'll do this once I make the site officially live), and also added a link to my LinkedIn account. I also added a link to my final site on each of the sites I linked to (does that make sense)? I chose to link to these sites in an attempt to benefit from the social media and SEO concept.
H: My browser experience went great! I was really happy that everything looked right in all the browsers I tested (Chrome 8.0-windows, Firefox 3.6-windows, Firefox 3.6-OSX, IE 8.0-windows, IE 9.0 Beta-windows, Safari 5.0-OSX, IE 7.0 -windows, IE 6.0-windows, Firefox 4.0 Beta 7 -windows). The only real issue I had was the .png image rendering in Internet Explorer 6.0 does not seem to catch the transparency on my navigation. I chose not to change this at this time, but I will figure out how to manipulate the graphics so I don't have to use a .png. I do plan on using the browser labs as long as it is available.
I: For the testing requirements, I used the W3Cvalidator for all of my HTML and CSS to make sure it validated, and fixed any errors I had. I checked all of my links and they work just fine. I used http://www.cynthiasays.com/ to test my accessibility and my site passed the verification checklist; I had no warnings.
J: My final site
B: I actually didn't experience any trouble shooting this time around, other than missing a closing p tag. I may have had problems with the image navigation but I pulled my hair out over that on the midterm. Now that I have that figured out, this site was pretty easy for me ... except for the fact that I spent WAY too much time on it and now I'm panicking about studying for my microbiology final.
C: The images provide an example of the designs I have created at my jobs. I hope it contributes to my website since it shows the viewer what my designs are like. I created a thin border and padding around all of the images to help them stand out a little better.
D: I kept my table pretty simple and clean. I made a different color for the headers, made the main items bold, and created a border around everything so it is easy to follow.
E: I had a HORRIBLE time finding media to fit into my site. For my real site, I will not be including any media. For the purpose of this assignment, I found a video regarding the graphic design process and added a link to it so the viewers can watch if it their curious about how the design process works. The video is on YouTube, so the user will need a flash plug-in.
F: I didn't have any problem validating, it went really smooth for me. I just had that missing ending p tag at one point, but that was easily fixable.
G: I added in meta tags, description and keywords, below the title tag to help search engine crawlers index my site. I also tried to use the text "graphic design" a lot throughout my site. I created a Facebook page for my pretend company and added a link to that page (which needs work, of course, but I'll do this once I make the site officially live), and also added a link to my LinkedIn account. I also added a link to my final site on each of the sites I linked to (does that make sense)? I chose to link to these sites in an attempt to benefit from the social media and SEO concept.
H: My browser experience went great! I was really happy that everything looked right in all the browsers I tested (Chrome 8.0-windows, Firefox 3.6-windows, Firefox 3.6-OSX, IE 8.0-windows, IE 9.0 Beta-windows, Safari 5.0-OSX, IE 7.0 -windows, IE 6.0-windows, Firefox 4.0 Beta 7 -windows). The only real issue I had was the .png image rendering in Internet Explorer 6.0 does not seem to catch the transparency on my navigation. I chose not to change this at this time, but I will figure out how to manipulate the graphics so I don't have to use a .png. I do plan on using the browser labs as long as it is available.
I: For the testing requirements, I used the W3Cvalidator for all of my HTML and CSS to make sure it validated, and fixed any errors I had. I checked all of my links and they work just fine. I used http://www.cynthiasays.com/ to test my accessibility and my site passed the verification checklist; I had no warnings.
J: My final site
Friday, March 11, 2011
Final Blog Posting-Jane Ghorashi
a) Who is your target audience?
My target audience are people who are interested in have pets.
b) What trouble shooting did you experience?
Navigation and centering was one of my main issue and I tried to put some images but I cannot center or position my images.
c) How did the images you contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?
My images contributed quite well for my web site. Some images of the
d) What choice s did you make to improve the readability of your table?
I change the heading to a brighter color and increase the font.
e) How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play.
Adobe flash player would be the main plug-in.
f) Describe your validating experience
I have no problem with validating. Validating help me a lot with html and css
Link.
Subscribe to:
Posts (Atom)