I would like to discuss a little design and accessibility quibble I have, once again. Somehow I accidentally deleted the code from my CSS that overrides the focus box that appears on visited links in Firefox. Of course I knew it was a simple fix, but just couldn't remember what it was so I had to dig around on the Internet looking for the answer. Since I couldn't remember what the box was officially called I was stuck searching for "dotted lines in Firefox," "borders on links in Firefox," etc. This search returned lots of forums that described setting images to have a zero border and so forth, which meant I had to comb many of those forums before I found my answer. This process led me to focus on the aforementioned design quibble.
What was striking about this search was the large number of people that responded to the forum inquiries about losing the dotted lines (who fully understood the border was a feature of Firefox) by stating there was a javascript workaround or some code that could tell Firefox to override the focus box, but then wouldn't tell how to do it because it was considered "poor practice."
From David on Adobe forums:
"There are JavaScript techniques for removing focus rectangles, but they are considered very bad practice, and go against the accessibility requirements for websites laid down by most governments."
When later prompted he added:
"As for the focus rectangles, they're deliberately visible. If you were disabled, you would want them to be as visible as possible. If you think they destroy the look of your site, perhaps it's time to rethink your design."
Newsgroup_user added:
"I get it most of the time with most browsers, I came to terms with it about 8 years ago, its just one of those things."
These types of responses were relatively prevalent, and here is my issue. I don't necessarily disagree with the usage of those focus boxes — accessibility is a good thing. However, I believe many users do find them annoying, yet would not take the time to disable them in the browser settings. I certainly haven't bothered and I actually know how to do it. So, we are forcing an annoying element on Firefox users, many of whom will assume the web designer intended the focus box as part of the page. How is this different than any other annoying element, such as overuse of animation? Most users that don't require the functionality of the focus boxes will not understand them to be useful or automatic and therefore will not excuse the element as being out of the designer's control.
That leads me to the next point, which is that bad practice or not, most designers are forcing Firefox to override the focus boxes. I don't have the default setting turned off, I use Firefox all the time, and yet I rarely encounter the dreaded dots. I also take issue with the arrogance of stating that if the focus boxes ruin a design the design must be poor to begin with. I don't know of any way to change the color, and that bright blue "link" hue is jarring. If a designer has spent considerable time crafting a color palette that blue just might look very wrong against the page, as it does on mine. It is unfair to say we should just get over it. In fact, I would have much less of an issue with the focus box if you could change the color to something that would be contrasty enough, yet still fit the look of the page.
I also feel that pointing out that you know how to change the effect, but won't divulge the technique because you are "saving" someone from making an error is arrogant. Don't weigh in, or else give the information with the caveat that you believe it should not be used. I might also mention here that Firefox could make the focus box feature default to invisible. Then nobody would bother overriding it since only people that wanted to see the focus box would turn it on. Right now designers are being forced to choose between all or none, which is totally unnecessary. All of that said, there are valid reasons for wanting to control the look of web designs. If I am to be faulted for bad choices by using hot pink, yellow, orange, purple, and powder blue on a page, why would it suddenly be fine to have a bright blue dotted border appear around elements on a page that uses only earth tones, or black, white, and gray? Design choices matter as much as functionality. Form is equal to function in my view (sorry Louis Sullivan, but Modernist ideology is dead) and sometimes "functional" rules get in the way of good communication through aesthetic design, which in itself creates a usage issue.
All of this aside, I eventually did find the rule: a { -moz-outline: none 0; outline: none 0; } and my website looks much better for having put it to good use.
Tuesday, November 30, 2010
Tuesday, November 23, 2010
12.1 Web tutorials
Today I am looking at Smart Webby, which is a design guide web site that has lots of free tutorials. More importantly, the tutorials are written at a very basic level so anyone can follow them; to this end, all web terms are defined at the beginning of the articles so that novices can find what they are looking for without being entirely familiar with the lingo. The articles state that familiarity with the software will help, but honestly they are so clear I feel even a complete beginner can follow along.
The choice of tutorials includes a surprising variety, from Dreamweaver to Flash and Fireworks. Within each category the options are further refined to include specific functions, such as creating rollovers and pop-up windows. I have to admit, I didn't realize that Dreamweaver would write the code for the latter--I thought that was definitely a feature you had to manually enter. Other particularly useful files include the tips lists for effective navigation and layouts. For example, the point is made in the former that too many links will confuse and overwhelm a visitor and therefore extra (secondary) links should be stored in drop-down menus. They also make the point that if you want to remain flexible in your ability to add additional links that drop-down menus are the best way to do this. Truthfully, I wish I had thought more about that point in my own web design. I have an airtight arrangement for my links that looks good, but there is absolutely no room for additional categories later on. This is something I may need to eventually consider as it is likely that new products might demand new categories. For now though, the navigation will stand.
As for the other tips, clean layout, optimum load time, scalability, and compatibility with multiple browsers make sense. As for minimizing graphics, I have mixed feelings. I totally agree that clip art, useless animations, and extra non content-related garbage can go. I also feel, however, that pictures can illustrate many good ideas and that well-placed scripts such as unobtrusive slideshows, forms, etc. are some of what can give your site personality. Slower running, perhaps, but that's where optimizing the code and graphics (another recommendation from the list) can help.
As for the Smart Webby site, it looks pretty good. The text is very large with ample line spacing, which makes it quite easy to read. This is good because it makes it likely users will stick around to view several tutorials. Of course, you could argue that the size is overkill, as a smaller version would be alright as well. Then again, I have great eyesight… The page is also very colorful and rather fun, but not to an obnoxious level. The textures (clouds and vines with flowers) are whimsical and align perfectly with the judiciously placed rainbow background colors. The repetition of those colors in the navigation, account, and news boxes helps tie the page elements together. Even the black top navigation bar, which originally I thought might be out of place, is echoed in the footer. Bottom line, balance and repetition are key to making all the disparate elements on this page gel in a professional manner; it does this, while still maintaining a sense of whimsy and fun, which are nice elements to take the scary out of web design topics.
Check out Smart Webby here:
www.smartwebby.com/
The choice of tutorials includes a surprising variety, from Dreamweaver to Flash and Fireworks. Within each category the options are further refined to include specific functions, such as creating rollovers and pop-up windows. I have to admit, I didn't realize that Dreamweaver would write the code for the latter--I thought that was definitely a feature you had to manually enter. Other particularly useful files include the tips lists for effective navigation and layouts. For example, the point is made in the former that too many links will confuse and overwhelm a visitor and therefore extra (secondary) links should be stored in drop-down menus. They also make the point that if you want to remain flexible in your ability to add additional links that drop-down menus are the best way to do this. Truthfully, I wish I had thought more about that point in my own web design. I have an airtight arrangement for my links that looks good, but there is absolutely no room for additional categories later on. This is something I may need to eventually consider as it is likely that new products might demand new categories. For now though, the navigation will stand.
As for the other tips, clean layout, optimum load time, scalability, and compatibility with multiple browsers make sense. As for minimizing graphics, I have mixed feelings. I totally agree that clip art, useless animations, and extra non content-related garbage can go. I also feel, however, that pictures can illustrate many good ideas and that well-placed scripts such as unobtrusive slideshows, forms, etc. are some of what can give your site personality. Slower running, perhaps, but that's where optimizing the code and graphics (another recommendation from the list) can help.
As for the Smart Webby site, it looks pretty good. The text is very large with ample line spacing, which makes it quite easy to read. This is good because it makes it likely users will stick around to view several tutorials. Of course, you could argue that the size is overkill, as a smaller version would be alright as well. Then again, I have great eyesight… The page is also very colorful and rather fun, but not to an obnoxious level. The textures (clouds and vines with flowers) are whimsical and align perfectly with the judiciously placed rainbow background colors. The repetition of those colors in the navigation, account, and news boxes helps tie the page elements together. Even the black top navigation bar, which originally I thought might be out of place, is echoed in the footer. Bottom line, balance and repetition are key to making all the disparate elements on this page gel in a professional manner; it does this, while still maintaining a sense of whimsy and fun, which are nice elements to take the scary out of web design topics.
Check out Smart Webby here:
www.smartwebby.com/
Tuesday, November 16, 2010
11.2 Web site reviews
This week I will discuss some web sites that offer listings of good designs that are out there. I love these types of "best of" lists because they really do take the work out of combing the web for great inspirations. An added bonus is that many of the sites listed have links to other great resources (designers really do take sharing quality examples seriously). The websites featured here are all pulled from the blog "27 Best Places You Should Visit To Get Incredible Web Design Inspiration!" posted by Smashing Apps.
To visit this post directly, go to:
http://www.smashingapps.com/2008/10/20/27-best-places-you-should-visit-to-get-incredible-web-design-inspiration.html
One Page Love:
This web site contains a compilation of web sites that cleverly contain all the navigation and information on a single page. Some of these pages are beautiful, such as the Heart's Cry, Inc. page, which uses a yellow text box that unfurls as you click links. This navigation is sleek and organized and actually makes multi-page sites seem a little clunky. Of course, it depends on the amount of information that needs to be presented, so specific topic pages work great in this format--multiple product or topic pages would get unwieldy. Some of the sites mentioned by One Page Love seem to be nice page designs that are actually not really self-contained. For example, the Rei das Praias site may be one page, but it really functions more as a home page with links to different but related company websites. Each of these opens a full website that navigates through various pages. Even so, most of the featured pages do fit the criteria for true one-page navigation.
The design of One Page Love is conducive to browsing the featured websites. Like many similar compilation sites, it uses a very minimal design that does not compete with the contents. In this case the black background and white text are highlighted with just a few splashes of hot pink in the logo, footer, and links. These pops of color are used judiciously and therefore add a nice touch without becoming annoying. The website thumbnails are large so it is easy to see the contents of the pages prior to clicking, which is important for navigation; it is easy to bypass those that look uninteresting without the hassle of clicking. One feature that I like, although it is controversial in the web world, is that the links open in new tabs. This saves navigating back to the site, and mimics the manner in which I normally choose to browse anyway. I don't think this is uncommon, and yet I was reading a blog the other day that chastised the practice of forcing a new window--ever. Apparently an even greater sin is using a target= blank attribute to do so, which I noticed this website employs. All the code wars and objections aside (I don't really care if javascript or target= blank makes it work), I think this type of browsing works well.
One last note, I like that this website includes dates next to some of the thumbnails. I'm not certain why all of the submissions are not dated, but the inclusion of at least some dates is essential. For instance, when I see November 15, 2010 listed next to the latest feature I can tell the website is still active. This is important since such sites run a real risk of seeming static.
Check out One Page Love here:
http://onepagelove.com/
Unmatched Style:
This website has much more content than One Page Love since the focus here is on a variety of web sites as well as other resources, interviews, etc. The focus on quality web site designs remains central though (literally), as it occupies the middle column of the page. Organization on this site is key as it helps to avoid information overload. The other categories are neatly defined and contained in logical columns, with headers like news, interviews, and resources. It is immediately obvious that this website is vibrant and active, as evidenced by a news section that contains the latest highlights (this in turn links to an archive area). Here again, knowing the web site is updated makes it more likely users will return.
The design of this website is clean, with the contents creating all the page decor, so to speak. A few bright red headlines and buttons add interest, but otherwise the slate colored header and footer contrast with a white background. This lack of "design" functions perfectly for this web site, however, because it leaves the contents as the only focus. Adding any other page elements would be distracting given the vast amounts of information presented. It is actually hard to pull off an information-rich yet uncluttered look, and in that regard this site is extremely successful.
Check it out here:
http://www.unmatchedstyle.com/
CSS Creme: Best web flavors:
This website, like Unmatched Style, showcases a three-column design that allows a lot of information to occupy the home page. This page has more design elements and yet it manages to stay uncluttered as well. The color scheme of light brown and turquoise is pleasing and a little trendy, and it because it has a minimal amount of texture it is interesting without competing with page contents. The color scheme is carried through by the use of turquoise text in the main white content area.
The navigational structure on this website is an important element in making it user-friendly. The amount of information could be daunting, but it is neatly organized into a series of sub-navigation menus. The resources menu on the left stays consistent on almost every page, while a new menu specific to a broader category (fonts, tutorials, etc.) opens below it on each section page. This helps to refine the selection within a category so users can easily find only Photoshop tutorials or CSS tutorials, and so forth. An interesting note, you can peruse featured designs by color; clicking a color swatch reveals websites that use a predominate color, such as blue or purple, in the layout. This is a nice feature that I have seen in only a few other places, and is one that could help provide inspiration when you have a color for a web design but don't know what to do with it.
One thing that I don't like about this site is the large gradient-filled rectangle in the center of the header. It is empty of any content and it appears that something didn't load there. If it is intentionally placed it is a bad design choice because it simultaneously non-functional and covers up other header elements like wood grain and paint splotches. And while it is only on element on an otherwise nicely designed page, the prominent placement really makes the entire site look a bit unprofessional.
Check out CSS Creme here:
http://csscreme.com/
Unique CSS:
This web site provides a twist on the "best of" concept by featuring only four websites per month, the best of which is determined by user votes. I like this concept because it involves the web community while still maintaining a high level of design credibility. This is accomplished because judges select the four finalists from a pool of websites that have been submitted by designers. They can ensure that the public, in turn, is only able to select a favorite from four quality designs. This avoids the problem of the public choosing a poorly designed site from an uncurated pool.
What I really like about this web site is the curation aspect. Rather than continue to showcase all the finalists from each month, only the winner's site is featured. This creates a truly curated selection of designs and adds some clout (or bragging rights, as the website points out) to actually winning. Overall the featured websites did indeed live up to the juried mission of Unique CSS. They were different and exciting, embracing a variety of design looks, but all worth perusing. Featured winning web sites extend back to 2008.
As for the design of the Unique CSS website, I like it less than I do their mission. It's not confusing or cluttered, but it isn't quite clean either. It's easy to navigate, but somehow the design just seems blah. This is a bit counterintuitive, but perhaps stripping away a few elements would actually make it more engaging. The design would have a minimalist identity. Right now it doesn't have any identity, since it is neither playful or purposely stripped down. It is simply there, without adding too much clutter but with a few too many elements to be considered purposefully pared down. First, the winner stamp needs to go--it's cheesy. Second, the alternating white and gray boxes that separate list elements on the home page could be eliminated. Yes the alternation differentiates the items, but they are short enough on their own that it isn't necessary. The boxes also look like elements in a bad Word table or Excel spreadsheet. I also dislike the white header. It is not handled in a purposeful manner so it looks a little unfinished. Perhaps a white-on-white texture would help there with adding the element of color.
The bottom line is that the intent of Unique CSS is great. The web site contains beautiful web design examples and some good information. The design, however, interferes with the enjoyment of the contents.
Check out Unique CSS here:
http://uniquecss.com/home
Cool Home Pages:
Interestingly, this website has an awful home page. The predominant colors are blue, orange, and white, and the overall design looks something like the old Reverse Phonebook website. Seriously. My point is that this design is generic in a way that screams basic template instead of sophisticated minimalism. Amazingly, there is a design academy section on Cool Home Pages that discusses the use of minimal color palettes. It reads:
"Websites like www.Apple.com, www.EddieBauer.com have used limited color space and yet look sharp, even Cool Home Pages mainly uses 2 colors, Orange and Blue."
While I agree with the sentiment, I think holding up this page as an example of appropriate color use is egregious. It is simply unsophisticated and, quite frankly, takes away from the contents of the site.
The recommended websites are pretty good, depending on the section. Clicking on "very clean" yields nice choices, as does the "low-bandwith" category. Even so, I have seen more questionable choices here than on other similar web sites. For instance, the "fun" category has some nice choices, but also a lot of garbage. I have seen better interactive and quirky sites featured elsewhere. Sure, this somewhat subjective, but really good sites tend to adhere to some basic design principles that quite a few of these designs lack. There are some duplicate postings in the same categories as well, which occasionally wind up next to one another (see screen bites in "fun").
This site does feature some good content, but not really the best stuff out there. It is worth a look, but ultimately other similar sites are just better, easier to look at resources.
Checkout Cool Home Pages here:
http://www.coolhomepages.com/
To visit this post directly, go to:
http://www.smashingapps.com/2008/10/20/27-best-places-you-should-visit-to-get-incredible-web-design-inspiration.html
One Page Love:
This web site contains a compilation of web sites that cleverly contain all the navigation and information on a single page. Some of these pages are beautiful, such as the Heart's Cry, Inc. page, which uses a yellow text box that unfurls as you click links. This navigation is sleek and organized and actually makes multi-page sites seem a little clunky. Of course, it depends on the amount of information that needs to be presented, so specific topic pages work great in this format--multiple product or topic pages would get unwieldy. Some of the sites mentioned by One Page Love seem to be nice page designs that are actually not really self-contained. For example, the Rei das Praias site may be one page, but it really functions more as a home page with links to different but related company websites. Each of these opens a full website that navigates through various pages. Even so, most of the featured pages do fit the criteria for true one-page navigation.
The design of One Page Love is conducive to browsing the featured websites. Like many similar compilation sites, it uses a very minimal design that does not compete with the contents. In this case the black background and white text are highlighted with just a few splashes of hot pink in the logo, footer, and links. These pops of color are used judiciously and therefore add a nice touch without becoming annoying. The website thumbnails are large so it is easy to see the contents of the pages prior to clicking, which is important for navigation; it is easy to bypass those that look uninteresting without the hassle of clicking. One feature that I like, although it is controversial in the web world, is that the links open in new tabs. This saves navigating back to the site, and mimics the manner in which I normally choose to browse anyway. I don't think this is uncommon, and yet I was reading a blog the other day that chastised the practice of forcing a new window--ever. Apparently an even greater sin is using a target= blank attribute to do so, which I noticed this website employs. All the code wars and objections aside (I don't really care if javascript or target= blank makes it work), I think this type of browsing works well.
One last note, I like that this website includes dates next to some of the thumbnails. I'm not certain why all of the submissions are not dated, but the inclusion of at least some dates is essential. For instance, when I see November 15, 2010 listed next to the latest feature I can tell the website is still active. This is important since such sites run a real risk of seeming static.
Check out One Page Love here:
http://onepagelove.com/
Unmatched Style:
This website has much more content than One Page Love since the focus here is on a variety of web sites as well as other resources, interviews, etc. The focus on quality web site designs remains central though (literally), as it occupies the middle column of the page. Organization on this site is key as it helps to avoid information overload. The other categories are neatly defined and contained in logical columns, with headers like news, interviews, and resources. It is immediately obvious that this website is vibrant and active, as evidenced by a news section that contains the latest highlights (this in turn links to an archive area). Here again, knowing the web site is updated makes it more likely users will return.
The design of this website is clean, with the contents creating all the page decor, so to speak. A few bright red headlines and buttons add interest, but otherwise the slate colored header and footer contrast with a white background. This lack of "design" functions perfectly for this web site, however, because it leaves the contents as the only focus. Adding any other page elements would be distracting given the vast amounts of information presented. It is actually hard to pull off an information-rich yet uncluttered look, and in that regard this site is extremely successful.
Check it out here:
http://www.unmatchedstyle.com/
CSS Creme: Best web flavors:
This website, like Unmatched Style, showcases a three-column design that allows a lot of information to occupy the home page. This page has more design elements and yet it manages to stay uncluttered as well. The color scheme of light brown and turquoise is pleasing and a little trendy, and it because it has a minimal amount of texture it is interesting without competing with page contents. The color scheme is carried through by the use of turquoise text in the main white content area.
The navigational structure on this website is an important element in making it user-friendly. The amount of information could be daunting, but it is neatly organized into a series of sub-navigation menus. The resources menu on the left stays consistent on almost every page, while a new menu specific to a broader category (fonts, tutorials, etc.) opens below it on each section page. This helps to refine the selection within a category so users can easily find only Photoshop tutorials or CSS tutorials, and so forth. An interesting note, you can peruse featured designs by color; clicking a color swatch reveals websites that use a predominate color, such as blue or purple, in the layout. This is a nice feature that I have seen in only a few other places, and is one that could help provide inspiration when you have a color for a web design but don't know what to do with it.
One thing that I don't like about this site is the large gradient-filled rectangle in the center of the header. It is empty of any content and it appears that something didn't load there. If it is intentionally placed it is a bad design choice because it simultaneously non-functional and covers up other header elements like wood grain and paint splotches. And while it is only on element on an otherwise nicely designed page, the prominent placement really makes the entire site look a bit unprofessional.
Check out CSS Creme here:
http://csscreme.com/
Unique CSS:
This web site provides a twist on the "best of" concept by featuring only four websites per month, the best of which is determined by user votes. I like this concept because it involves the web community while still maintaining a high level of design credibility. This is accomplished because judges select the four finalists from a pool of websites that have been submitted by designers. They can ensure that the public, in turn, is only able to select a favorite from four quality designs. This avoids the problem of the public choosing a poorly designed site from an uncurated pool.
What I really like about this web site is the curation aspect. Rather than continue to showcase all the finalists from each month, only the winner's site is featured. This creates a truly curated selection of designs and adds some clout (or bragging rights, as the website points out) to actually winning. Overall the featured websites did indeed live up to the juried mission of Unique CSS. They were different and exciting, embracing a variety of design looks, but all worth perusing. Featured winning web sites extend back to 2008.
As for the design of the Unique CSS website, I like it less than I do their mission. It's not confusing or cluttered, but it isn't quite clean either. It's easy to navigate, but somehow the design just seems blah. This is a bit counterintuitive, but perhaps stripping away a few elements would actually make it more engaging. The design would have a minimalist identity. Right now it doesn't have any identity, since it is neither playful or purposely stripped down. It is simply there, without adding too much clutter but with a few too many elements to be considered purposefully pared down. First, the winner stamp needs to go--it's cheesy. Second, the alternating white and gray boxes that separate list elements on the home page could be eliminated. Yes the alternation differentiates the items, but they are short enough on their own that it isn't necessary. The boxes also look like elements in a bad Word table or Excel spreadsheet. I also dislike the white header. It is not handled in a purposeful manner so it looks a little unfinished. Perhaps a white-on-white texture would help there with adding the element of color.
The bottom line is that the intent of Unique CSS is great. The web site contains beautiful web design examples and some good information. The design, however, interferes with the enjoyment of the contents.
Check out Unique CSS here:
http://uniquecss.com/home
Cool Home Pages:
Interestingly, this website has an awful home page. The predominant colors are blue, orange, and white, and the overall design looks something like the old Reverse Phonebook website. Seriously. My point is that this design is generic in a way that screams basic template instead of sophisticated minimalism. Amazingly, there is a design academy section on Cool Home Pages that discusses the use of minimal color palettes. It reads:
"Websites like www.Apple.com, www.EddieBauer.com have used limited color space and yet look sharp, even Cool Home Pages mainly uses 2 colors, Orange and Blue."
While I agree with the sentiment, I think holding up this page as an example of appropriate color use is egregious. It is simply unsophisticated and, quite frankly, takes away from the contents of the site.
The recommended websites are pretty good, depending on the section. Clicking on "very clean" yields nice choices, as does the "low-bandwith" category. Even so, I have seen more questionable choices here than on other similar web sites. For instance, the "fun" category has some nice choices, but also a lot of garbage. I have seen better interactive and quirky sites featured elsewhere. Sure, this somewhat subjective, but really good sites tend to adhere to some basic design principles that quite a few of these designs lack. There are some duplicate postings in the same categories as well, which occasionally wind up next to one another (see screen bites in "fun").
This site does feature some good content, but not really the best stuff out there. It is worth a look, but ultimately other similar sites are just better, easier to look at resources.
Checkout Cool Home Pages here:
http://www.coolhomepages.com/
Saturday, November 13, 2010
11.1 Design dilemmas
I fully understand the need for compatible and accessible design and I try to be cognizant of contrast when I choose background and text colors. With this in mind, I ran my header, logo, and navigation tab colors through the color analyzer at Colors on the Web. The header is a gradient that ranges from #80021F (burgundy) to #3C0303 (dark burgundy); the text is #DAD9C3 (ivory) and the logo is #181412 (dark brown). According to the results, my header/logo combination, although it looks contrasty enough, does not pass. The navigation text/header combination passes on all fronts, for small and large text. So this leaves me with a bit of a design dilemma.
In order to rectify the problem, I went into Photoshop and altered my logo colors using a slightly darker version of the ivory that I used for the main content box and the main navigation text. The results of the original and the ivory version look like this:
Original:
Lightened version:
The problem is that I'm not really happy with the lighter look and haven't found any similar combinations that look quite right against the header. I'll keep trying, but it honestly appears right now that using the darker color combination is the lesser of the two issues. I have used a light background and dark text in the content areas and light text on a dark background for navigation, so it's not like I have unreadable content. It's also not like the contrast makes the logo indecipherable for most people. Is it possible to leave that one element "out of compliance," so to speak? I'm on the fence right now.
One other issue in my design lately has been that I set up a blog for Taste the World using Blogger. The intent was to route the blog to a special page on the Taste website. I thought this would make it easy for Anne to later add content to the website without having to update the site. Unfortunately, I didn't realize prior to creating a customized look for the blog (which actually took a long time) that Blogger was no longer allowing FTP transfers of content to websites. I guess this has been in place since last March, so I should have looked harder at publishing tips, I guess. Anyway, I will probably just link to the external blog from the website; this seems like the best choice right now. One thing I know you can do is direct the header link (which defaults back to your blog) to your own website. I can't for the life of me find the link portion in the code, however. I combed that code too, so I don't get the issue. Anyway, I have seen dynamic headers with multiple links, so if I have time I want to build a new template. I modified an existing template and added a custom header image, but a new template would be better (if time allows, as my list of additions and tweaks continues to grow).
In order to rectify the problem, I went into Photoshop and altered my logo colors using a slightly darker version of the ivory that I used for the main content box and the main navigation text. The results of the original and the ivory version look like this:
Original:
Lightened version:
The problem is that I'm not really happy with the lighter look and haven't found any similar combinations that look quite right against the header. I'll keep trying, but it honestly appears right now that using the darker color combination is the lesser of the two issues. I have used a light background and dark text in the content areas and light text on a dark background for navigation, so it's not like I have unreadable content. It's also not like the contrast makes the logo indecipherable for most people. Is it possible to leave that one element "out of compliance," so to speak? I'm on the fence right now.
One other issue in my design lately has been that I set up a blog for Taste the World using Blogger. The intent was to route the blog to a special page on the Taste website. I thought this would make it easy for Anne to later add content to the website without having to update the site. Unfortunately, I didn't realize prior to creating a customized look for the blog (which actually took a long time) that Blogger was no longer allowing FTP transfers of content to websites. I guess this has been in place since last March, so I should have looked harder at publishing tips, I guess. Anyway, I will probably just link to the external blog from the website; this seems like the best choice right now. One thing I know you can do is direct the header link (which defaults back to your blog) to your own website. I can't for the life of me find the link portion in the code, however. I combed that code too, so I don't get the issue. Anyway, I have seen dynamic headers with multiple links, so if I have time I want to build a new template. I modified an existing template and added a custom header image, but a new template would be better (if time allows, as my list of additions and tweaks continues to grow).
Sunday, November 7, 2010
10.1 Funny stuff
Tom Chi and Kevin Cheng have a very funny comic at ok/cancel that displays a designer being chided by his office coworkers over increasing the border size on a web redesign. When the designer protests that the size increase is part of a cohesive design idea his coworkers cut him off by saying that they will need to retest prior to launch (which would probably cost untold sums of money in its own right…). The last frame hints at the sometimes ridiculous nature of design-by-committee as the coworker suggests that the border size increase would have cost the company a minuscule percentage of business. This is hilarious, but hints at the importance of balancing user-centered design, analysis, and aesthetics. As the comments indicate, people are rather torn on this front. One user notes that for a larger company, that insignificant percentage would equate to hundreds of thousands of dollars, while another notes that such pettiness will wear down creative professionals and they will depart for companies that allow more freedom. They are probably both right, and certainly this cartoon was at least partly in response to Doug Bowman departing from Google for such controlling policies as spoofed here. The accompanying blog post details this departure and goes on to talk about the balance between design and data-driven decisions.
Check out the comic and blog here:
http://okcancel.com/
My favorite line from the blog post reads, "OK, first off — design is not the same as art … I’ve often said that Art is about freedom while Design is about constraints." This is a great characterization since design really is much more about making something aesthetically pleasing while conforming to communication and usage needs. Design needs to accomplish a purpose that artwork is not necessarily held to. Both must communicate, but clarity isn't always the main goal of artwork. With design the message can be provocative but must still be clear. With that, data can help to refine the design process. It is very easy to get too absorbed into your own head and forget that others may not share your sense of logic or vision. Often things that makes sense to you are just not clear to others. User testing can help with this, as can other evaluations. The key thing, as the blog points out, is that designers learn what evaluation techniques add value and which waste time. Then, by pushing for the value-added metrics the designer can help control the process and demonstrate the professionalism and knowledge that goes into design and effective evaluation.
This can be easier said than done, however. Whether evaluation is data-driven or not, committees can be a bad thing. There is a finesse to the design process that non-creatives don't always understand. The fact is there are some wretchedly designed sites out there that have great contents, but no will look long enough to find them. There also sites with good intentions that try to make everything visible from the homepage, which results in visual overload and unmanageable navigation. I worked at a museum that was going through a website redesign when I arrived. This was in 2007 and the redesign is still happening, two webmasters later. The problem there was that the design committee was comprised of people from various departments telling the designer what was needed. There were many competing interests and no cohesive visions. This is where design breaks down. As of now, the web page is still cluttered, confusing, and ugly. The designer was unable to communicate that the design would allow users to access information easily, but not necessarily from a list of everything placed on the homepage. An appropriate look for the site was watered down to the point that it does not fit with the image of the museum or look of the printed materials they produce. All of the changes, as far as I am aware, were based on anecdotal "evidence" as opposed to data. This is sort of the flip side of what was detailed in the cartoon, and yet it represents the same type of oppression that can hinder and destroy good design.
Speaking of design, my aunt had a designer work with my original logo suggestion. As it turns out, she had a nonprofessional work with it. The woman had done some miscellaneous design work for the county when she was employed there several years ago, but the extent of that work is questionable. This is why you always ask for a portfolio sample! The final product my aunt was provided with had redesigned the original into something that was unbalanced and looked a little like a PowerPoint slide.
Logo redesign:
The font chosen was Papyrus, which does not in any way communicate the sophistication of fine roasted coffee and specialty foods; the inclusion of a globe as steam from the coffee was too cluttered and the elements cut from the original design were jagged (as in not a vector graphic). The elements and text piled together created something of a lopsided triangle and the black background was dominating everything. This would also present problems for printing; it just wasn't functional at all, let alone communicative of the correct message. It was mentioned that the black background could be eliminated, but that would actually create more balance issues by exacerbating the lopsidedness of the text and image stack.
So back to the drawing board. I tweaked the original design, changed out the fonts (a free Caviar Dreams, and licensed , and sent it off to a company that produces vector graphics by redrawing the shapes in Illustrator--I just don't have that skill down to the appropriate level. Anyway, the logo is now complete and ready for inclusion on the website as well as signs, vinyl labels, and packaging.
Original design tweaked and vectorized:
I also want to briefly recount my experiences playing around with Dreamweaver plugin Flexi CSS Layouts. It is a drag and drop process that allows for drawing layouts while it writes the code. It is an interesting program but it has a few quirks I wasn't able to iron out. I will have to try it again at a later time because it seemed to create very clean code. However, if you notice in the image below, some things, when not drawn correctly yield some slightly funky results. Despite my efforts, I couldn't quite get the layout right, so I returned to working directly from Dreamweaver for this part.
Flexi layout, slightly off:
I am adding this plugin to an ever-growing list of things I need to study after this class ends. For instance, using the @fontface css rule is something I need to read more about. It seems like a great way to add fonts without defying accessibility by using images of fonts for headlines, however, it doesn't work correctly with Internet Explorer. I would love to use this rule, but IE is still the most widely browser so I can't defy all those users, especially when creating a site to accompany a physical store. There are all kinds of work arounds out there, but I just don't have time to learn that in enough detail just now. My suspicion is that the website I role out will be a good start, and the best I'm capable of at this skill level. Then over the semester break I will be able to work out some fixes to make it more sophisticated and technologically sleek. I'm overwhelmed by all the information out there and thankful for all the techies that so freely share resources, tricks, and advice via a seemingly infinite number of blogs and forums. I'm even more grateful for the websites that organize the best of these resources and deliver the lists in endless succession to my Facebook and Twitter accounts. "Following" has made me so much more aware since every quality organization is engaging in social outreach. It really does work in building a great community feeling in an abstract environment. I feel totally connected.
Check out the comic and blog here:
http://okcancel.com/
My favorite line from the blog post reads, "OK, first off — design is not the same as art … I’ve often said that Art is about freedom while Design is about constraints." This is a great characterization since design really is much more about making something aesthetically pleasing while conforming to communication and usage needs. Design needs to accomplish a purpose that artwork is not necessarily held to. Both must communicate, but clarity isn't always the main goal of artwork. With design the message can be provocative but must still be clear. With that, data can help to refine the design process. It is very easy to get too absorbed into your own head and forget that others may not share your sense of logic or vision. Often things that makes sense to you are just not clear to others. User testing can help with this, as can other evaluations. The key thing, as the blog points out, is that designers learn what evaluation techniques add value and which waste time. Then, by pushing for the value-added metrics the designer can help control the process and demonstrate the professionalism and knowledge that goes into design and effective evaluation.
This can be easier said than done, however. Whether evaluation is data-driven or not, committees can be a bad thing. There is a finesse to the design process that non-creatives don't always understand. The fact is there are some wretchedly designed sites out there that have great contents, but no will look long enough to find them. There also sites with good intentions that try to make everything visible from the homepage, which results in visual overload and unmanageable navigation. I worked at a museum that was going through a website redesign when I arrived. This was in 2007 and the redesign is still happening, two webmasters later. The problem there was that the design committee was comprised of people from various departments telling the designer what was needed. There were many competing interests and no cohesive visions. This is where design breaks down. As of now, the web page is still cluttered, confusing, and ugly. The designer was unable to communicate that the design would allow users to access information easily, but not necessarily from a list of everything placed on the homepage. An appropriate look for the site was watered down to the point that it does not fit with the image of the museum or look of the printed materials they produce. All of the changes, as far as I am aware, were based on anecdotal "evidence" as opposed to data. This is sort of the flip side of what was detailed in the cartoon, and yet it represents the same type of oppression that can hinder and destroy good design.
Speaking of design, my aunt had a designer work with my original logo suggestion. As it turns out, she had a nonprofessional work with it. The woman had done some miscellaneous design work for the county when she was employed there several years ago, but the extent of that work is questionable. This is why you always ask for a portfolio sample! The final product my aunt was provided with had redesigned the original into something that was unbalanced and looked a little like a PowerPoint slide.
Logo redesign:
The font chosen was Papyrus, which does not in any way communicate the sophistication of fine roasted coffee and specialty foods; the inclusion of a globe as steam from the coffee was too cluttered and the elements cut from the original design were jagged (as in not a vector graphic). The elements and text piled together created something of a lopsided triangle and the black background was dominating everything. This would also present problems for printing; it just wasn't functional at all, let alone communicative of the correct message. It was mentioned that the black background could be eliminated, but that would actually create more balance issues by exacerbating the lopsidedness of the text and image stack.
So back to the drawing board. I tweaked the original design, changed out the fonts (a free Caviar Dreams, and licensed , and sent it off to a company that produces vector graphics by redrawing the shapes in Illustrator--I just don't have that skill down to the appropriate level. Anyway, the logo is now complete and ready for inclusion on the website as well as signs, vinyl labels, and packaging.
Original design tweaked and vectorized:
I also want to briefly recount my experiences playing around with Dreamweaver plugin Flexi CSS Layouts. It is a drag and drop process that allows for drawing layouts while it writes the code. It is an interesting program but it has a few quirks I wasn't able to iron out. I will have to try it again at a later time because it seemed to create very clean code. However, if you notice in the image below, some things, when not drawn correctly yield some slightly funky results. Despite my efforts, I couldn't quite get the layout right, so I returned to working directly from Dreamweaver for this part.
Flexi layout, slightly off:
I am adding this plugin to an ever-growing list of things I need to study after this class ends. For instance, using the @fontface css rule is something I need to read more about. It seems like a great way to add fonts without defying accessibility by using images of fonts for headlines, however, it doesn't work correctly with Internet Explorer. I would love to use this rule, but IE is still the most widely browser so I can't defy all those users, especially when creating a site to accompany a physical store. There are all kinds of work arounds out there, but I just don't have time to learn that in enough detail just now. My suspicion is that the website I role out will be a good start, and the best I'm capable of at this skill level. Then over the semester break I will be able to work out some fixes to make it more sophisticated and technologically sleek. I'm overwhelmed by all the information out there and thankful for all the techies that so freely share resources, tricks, and advice via a seemingly infinite number of blogs and forums. I'm even more grateful for the websites that organize the best of these resources and deliver the lists in endless succession to my Facebook and Twitter accounts. "Following" has made me so much more aware since every quality organization is engaging in social outreach. It really does work in building a great community feeling in an abstract environment. I feel totally connected.
Friday, November 5, 2010
9.3 Audio, scripts, and some software
Hot Scripts website:
There are a lot of positive elements to this website, ranging from the excellent contents to the pleasing design. First, the color scheme, red with off-white and white for the content areas, combined with a few bright pops of green, is pretty perfect for conveying the theme of the website. The logo of a pepper enclosed in angle brackets is simple and clever, and that heat theme is translated to the rating system used to rank the quality of the resources available. Not that using a pepper scale to indicate whether something is super hot is unique, but I haven't necessarily seen the heat theme carried through an entire design quite like this. The designers definitely paid attention to the small details on this site and it makes for a pleasant browsing experience.
As for the contents, there is a blog section, design templates, and over 48 thousand scripts that can be searched. Realizing the magnitude of the site, the designers have helpfully offered up "top rated," "most popular," and "new" sections to wade through the scripts if you aren't really sure what you're looking for. The secondary navigation on the side has specific categories to browse for those that have an idea of what they need. The results present a mixture of free and for-purchase resources, so the only possible drawback is that if a user is looking for a free resource they might be disappointed to find the perfect script and then discover it costs money. Sometimes, though, you just have to pay for that perfect resource. I myself found what seems to be a good free script for incorporating a search feature into a website. I haven't tried it out yet but it was highly rated. The comments also indicated that it works well and allows you to create a search section that fits in with the look of your website. I'm actually excited because it seems simple enough to add to the code. One additional feature that I like on this site is that once you identify a script you like you can click a link on the page to see more by the same publisher. Kind of like tracking font manufacturers, you can predict that someone that created one quality product is very likely to have a lot more.
Check out HotScripts here:
http://www.hotscripts.com/listing/free-search-engine/
Trellian software:
The Trellian website provides access to both free and purchasable software packages. In the latter category, they have a Search Engine Optimization package that combines a bunch of different tools, including their site promotion software and some link checker and analytics tools. It actually sounds like a good package because it brings together some resources that you would otherwise have to use separately; at $300, however, locating and manually running analytical tools freely available on the internet seems like a comparatively good deal. The free software packages include InternetStudio and Trellian Webpage, which are web creation tools. I didn't download the resources, but they seem as though they would be good tools to replace more complex systems and that they would be quite user-friendly. It's always good to have free alternatives to the expensive professional software packages. I might have to grab a trial of the SEO software, though, because I'm interested to see how well it performs. Stay tuned for that description at a later time.
Check out Trellian here:
http://www.trellian.com/index.html
Self Seo:
This website is mostly of note for a simple how-to article on streaming audio. In fact, it is almost unbelievable how easy it is to set up, since all it really requires is creating a file with an m3u exitnsion, uploading and linking. Ok, that was a little simplified, but read the article and you'll see it truly isn't much more complex than that. The text itself is clearly written, and the clutter-free site design mimics that simplicity; it works well. A number of SEO tools are also worth noting. My favorite is the keyword suggestion tool, which shows the popularity of an entered term as compared to others that might wind up being more useful. Similarly, the misspelling tools provide insight into how adding common misspellings to keyword tags might your website easier to find. Interesting and useful stuff here. I found that "hot sauce" had a high daily ranking, for instance, but that "hot sauce recipes" was also popular, so would be worth adding if the site has relevant contents. Cool way to keep in touch with what people might be searching.
Check out the streaming audio story here:
http://www.selfseo.com/story-13698.php
Audacity:
Audacity is a great open source audio editing program. I have used it several times in the past because it has sophisticated features like the ability to mix multiple channels and record or import files for editing, and so forth. Most notably I used Audacity recently to edit sound files for a cell phone tour pilot program at the art museum where I worked. A collegue and I recorded audio and I then imported it and laid in music and intro tracks. I was also able to clean up the voice files quite a bit. The only hitch is that WMA and AAC files are not supported, so when I incorporated existing audio recordings of gallery talks into the files I was creating I found I had to convert them first. This was a pain because it added an extra step, but really it is a very small inconvenience in the grand scheme of things. I am not a musician or anything, but I found this to be great audio software for a number of projects. So basically this is great software, easy to use and available completely free of charge; its very existence means I should never again have to suffer through an informational video with unedited sound!
Download Audacity here:
http://audacity.sourceforge.net/download/
Music:
Pandora and Musicovery are both worth mentioning here, although I prefer the former (maybe out of habit though). What is notable about Musicovery, however, is the ability to define a playlist by mood (calm, dark, etc.) or dance matrix (tempo) and then refine it by choosing an era from which the music should be drawn. Cool concept. Even better though, is that you can download an iTunes plug-in to impose this structure on your own music library, thus ensuring you match your mood with music that already presumably like. Pandora, on the other hand, offers what I feel is a more sophisticated approach to assessing your musical tastes. Because of the extensive analysis that has gone into each song, the stations generated by inputting an artist or title are pretty much dead on. I don't skip much music when listening to Pandora because it assigns music with similar qualities so accurately that it really can pinpoint taste. Even better though, it learns. Skipping a song results in ban from the channel and skipping an artist twice results in a musician ban. The channel just gets increasing specialized not to a type of music, but to a type refined by your own tastes. It's great. People sometimes lament not being able to skip enough songs because of the limits they place, but I really think if you use the program correctly excessive skipping becomes unnecessary anyway. I've discovered more good music that way than I ever could have located on my own. And much like free fonts, scripts, templates, etc., you have to love a free resource that is based on little more than the enthusiasm of developers to create a community and share something they are passionate about. Fantastic stuff.
Check the sites here:
http://musicovery.com/
http://www.pandora.com/
There are a lot of positive elements to this website, ranging from the excellent contents to the pleasing design. First, the color scheme, red with off-white and white for the content areas, combined with a few bright pops of green, is pretty perfect for conveying the theme of the website. The logo of a pepper enclosed in angle brackets is simple and clever, and that heat theme is translated to the rating system used to rank the quality of the resources available. Not that using a pepper scale to indicate whether something is super hot is unique, but I haven't necessarily seen the heat theme carried through an entire design quite like this. The designers definitely paid attention to the small details on this site and it makes for a pleasant browsing experience.
As for the contents, there is a blog section, design templates, and over 48 thousand scripts that can be searched. Realizing the magnitude of the site, the designers have helpfully offered up "top rated," "most popular," and "new" sections to wade through the scripts if you aren't really sure what you're looking for. The secondary navigation on the side has specific categories to browse for those that have an idea of what they need. The results present a mixture of free and for-purchase resources, so the only possible drawback is that if a user is looking for a free resource they might be disappointed to find the perfect script and then discover it costs money. Sometimes, though, you just have to pay for that perfect resource. I myself found what seems to be a good free script for incorporating a search feature into a website. I haven't tried it out yet but it was highly rated. The comments also indicated that it works well and allows you to create a search section that fits in with the look of your website. I'm actually excited because it seems simple enough to add to the code. One additional feature that I like on this site is that once you identify a script you like you can click a link on the page to see more by the same publisher. Kind of like tracking font manufacturers, you can predict that someone that created one quality product is very likely to have a lot more.
Check out HotScripts here:
http://www.hotscripts.com/listing/free-search-engine/
Trellian software:
The Trellian website provides access to both free and purchasable software packages. In the latter category, they have a Search Engine Optimization package that combines a bunch of different tools, including their site promotion software and some link checker and analytics tools. It actually sounds like a good package because it brings together some resources that you would otherwise have to use separately; at $300, however, locating and manually running analytical tools freely available on the internet seems like a comparatively good deal. The free software packages include InternetStudio and Trellian Webpage, which are web creation tools. I didn't download the resources, but they seem as though they would be good tools to replace more complex systems and that they would be quite user-friendly. It's always good to have free alternatives to the expensive professional software packages. I might have to grab a trial of the SEO software, though, because I'm interested to see how well it performs. Stay tuned for that description at a later time.
Check out Trellian here:
http://www.trellian.com/index.html
Self Seo:
This website is mostly of note for a simple how-to article on streaming audio. In fact, it is almost unbelievable how easy it is to set up, since all it really requires is creating a file with an m3u exitnsion, uploading and linking. Ok, that was a little simplified, but read the article and you'll see it truly isn't much more complex than that. The text itself is clearly written, and the clutter-free site design mimics that simplicity; it works well. A number of SEO tools are also worth noting. My favorite is the keyword suggestion tool, which shows the popularity of an entered term as compared to others that might wind up being more useful. Similarly, the misspelling tools provide insight into how adding common misspellings to keyword tags might your website easier to find. Interesting and useful stuff here. I found that "hot sauce" had a high daily ranking, for instance, but that "hot sauce recipes" was also popular, so would be worth adding if the site has relevant contents. Cool way to keep in touch with what people might be searching.
Check out the streaming audio story here:
http://www.selfseo.com/story-13698.php
Audacity:
Audacity is a great open source audio editing program. I have used it several times in the past because it has sophisticated features like the ability to mix multiple channels and record or import files for editing, and so forth. Most notably I used Audacity recently to edit sound files for a cell phone tour pilot program at the art museum where I worked. A collegue and I recorded audio and I then imported it and laid in music and intro tracks. I was also able to clean up the voice files quite a bit. The only hitch is that WMA and AAC files are not supported, so when I incorporated existing audio recordings of gallery talks into the files I was creating I found I had to convert them first. This was a pain because it added an extra step, but really it is a very small inconvenience in the grand scheme of things. I am not a musician or anything, but I found this to be great audio software for a number of projects. So basically this is great software, easy to use and available completely free of charge; its very existence means I should never again have to suffer through an informational video with unedited sound!
Download Audacity here:
http://audacity.sourceforge.net/download/
Music:
Pandora and Musicovery are both worth mentioning here, although I prefer the former (maybe out of habit though). What is notable about Musicovery, however, is the ability to define a playlist by mood (calm, dark, etc.) or dance matrix (tempo) and then refine it by choosing an era from which the music should be drawn. Cool concept. Even better though, is that you can download an iTunes plug-in to impose this structure on your own music library, thus ensuring you match your mood with music that already presumably like. Pandora, on the other hand, offers what I feel is a more sophisticated approach to assessing your musical tastes. Because of the extensive analysis that has gone into each song, the stations generated by inputting an artist or title are pretty much dead on. I don't skip much music when listening to Pandora because it assigns music with similar qualities so accurately that it really can pinpoint taste. Even better though, it learns. Skipping a song results in ban from the channel and skipping an artist twice results in a musician ban. The channel just gets increasing specialized not to a type of music, but to a type refined by your own tastes. It's great. People sometimes lament not being able to skip enough songs because of the limits they place, but I really think if you use the program correctly excessive skipping becomes unnecessary anyway. I've discovered more good music that way than I ever could have located on my own. And much like free fonts, scripts, templates, etc., you have to love a free resource that is based on little more than the enthusiasm of developers to create a community and share something they are passionate about. Fantastic stuff.
Check the sites here:
http://musicovery.com/
http://www.pandora.com/
Subscribe to:
Posts (Atom)