Natasha Chitow's Weblog

A continuation of the topics, starting with the 27 best places for incredible web design:

• CSS Gallery has some really neat websites in their links. Definitely a good place for a very broad concept range of “cool”.
• DesignUS: I love all the sources on here. I’m enjoying just looking at all the vectors and brushes, even though I don’t have Photoshop. Neat stuff.
• Over and over, I come across 21 Ruby Lane, which intrigues me. I must try out making a website that has a left-to-right scroll frame in its structure sometime.
• Oriental Gallery: I hate their layout; it’s not difficult to use, but its navigation annoys me. Although the sites linked are pretty neat, I don’t like the way they are previewed.
• One Page Love: What a great concept– one page can be great if you’re just giving people a glimpse at what you can do. Ethem Budak, Dave Adams Photography, Design Freedom, and Giant Creative use the “one page limit” quite well, while some of the others leave me wondering about what happened. It’s a good option if you want a “short and sweet” website that exhibits the best of a small collection of stuff; on the other hand, if you’re planning on exhibiting a large amount of stuff, it’s not the best idea.

SmartWebby
• Although it’s very text-heavy, it’s easy enough to navigate. There are a lot of little tutorials, and I’m most interested in the little tips and tricks that I haven’t exercised in my CSS-based layout. I looked specifically at drop-down menus, which was explained pretty well. I think I could probably adapt it to a future website, but I’d also have to be interested in header-based navigation to do it. Between the free tutorials and the paid services on the page, there is a lot of information out there for both the people who’d want to buy the technology and the people who just want to learn to do it on their own. Overall, not a bad guide.

I’ve been a bit random in my postings, and never got around to talking about the various lessons on advanced topics, so I’m going to end up compiling it into one big post here, separated by topic.

Flash
• Flash Vista: I looked at one of their video tutorials and it’s very straightforward, if not a bit annoying that I can’t reliably skip ahead like I would with text and screenshots. Otherwise, the site is a bit busy, but overall, the tutorials are helpful if I had Flash.
• Flash Explained: the main tutorial that I came upon was neat, except for the fact that the finished product and the screenshots of the finished product did not match up. I’m guessing an error in coding or updating of the system has caused the issue, as some of the images are misaligned and difficult to read. I looked at the tutorial for an ActionScript drop-down menu and that worked quite a bit better in addition to giving straightforward text and screenshot instructions.
• SitePal: talking menus are creepy. Very creepy. The demo, however, was fun to play with and brought out the immature teenager in me; there’s something about a computer text input that makes one want to write silly things. I really would not recommend the “talking website” concept to anyone, as I find it really disturbing.
• Adobe Flash: it seems like most people are familiar with this program if they’re familiar with the concept of flash. Apparently there are a lot of new features that make components of the flash animation independent of each other, and they’re including metadata support as well. Neat.
• Swift 3D: Never heard of this one before, but it’s got an interesting demo on it. The newest version also has a lot of new features, including HTML w/SWF support; definitely a tool that makes your high tech aspects of the site more accessible. How many people use it, though?
• Swish: With screencast tutorials, templates, and effects samples, there’s a lot to look at on this program’s site. Like Swift 3D, I have no clue as to whether it’s ubiquitous or something random and not well-known in the industry.

27 design sites: my favorites
• The FWA: The layout is easy to use, pretty straightforward, and likes the scroll function, which apparently is hidden. I tried out a few of the sites that they linked to, and I was really inspired. Now if only I had a Flash program, I could try out some ideas…
• CSS Dance: This is more my speed; now that I’ve got the basics of CSS down, I want inspiration like 21 Ruby Lane to inspire me, and that’s what this site gives me. From what I recall, I saw a tutorial for the “left to right navigation” somewhere online during this course that I liked. I will have to revisit it sometime and see whether I can incorporate it simply into another site.
• DesignSnack: I like their “browse by color” function– if I’m looking for inspiration with a certain hue, this would be really neat. There are a TON of design studio websites on this and every other site; it’s as if they’re marketing to each other with all the multiple links.
• CSS Nature: I am put off by their description:
  

  CSS NATURE is a showcase of well designed eco green and organic CSS based website designs.

  It really doesn’t make any sense, especially considering the terms they’re using. Visually, all the sites involve some sort of “natural” element to their look, but none of them really appear to be eco-conscious websites. Besides, if it were more about being “eco-conscious”, using simpler and darker layout schemes would be the way to go. (Google at one point in time did 24 hours of a front page with a black background in an effort to raise awareness of the fact that darker backgrounds use less energy because of light output from the computers… or something. Either way, they were doing it to save energy.)

• CSS Design Yorkshire: I’m mentioning this one mostly because of their link to a website called Brain Fart. Apparently it’s a Ukranian company that does IT services and writes the content for their websites, as it’s got some interesting uses of English on there; I would never have guessed that this was an IT firm from either the name or the layout, and I’m not sure if that’s a good thing. I’m also amused by Dr. Burnorium’s Hot Sauce Emporium: the layout is fun and quite a bit like what my SO envisions for his portfolio.

More stuff in the next post or two.

I think I got all the kinks fixed in the coding, and I updated with more images on the site and an update on the knitting project that I showcased in the “knitting” section. I made a screenshot of the resume page so there’s at least one record of what the “intended” font combination was:

I picked a second script style font to coordinate with the overly decorative banner image to each page, and tried to coordinate most of the images with the “grungy/noisy” theme that I’d set up. The only exception were the food images, as I think that adding visual “noise” to food images might make them look really unappetizing. The coding shows up in the latest versions of IE and Firefox, which make up a large portion of the web browser market these days, and I’ve given up on trying to find out why IE5.5 and IE6 don’t like my images.

All in all, I learned a lot about how to make layouts look decent, that there are a ton of different ideas and trends out there dealing with colors and design, and that it’s really easy to take advances in website coding and make your website be a competitor for the top spots on Websites That Suck. This will all come in handy within the next year, as I’ll be revamping the layout on my fiancé’s website and I’ll also be creating a wedding website for us. It doesn’t seem so scary at this point, but now appears totally manageable if not simple.

I’ve been out of town for a week, and at work to make up for it for the past week and a half. So, I got most of the coding fixed up, but there are two things that are causing issues: the knitting page and why IE5 doesn’t like the coding I used for my images. I may have to copy all the knitting page code from Amaya into a notepad document and play with it by hand until I get it all figured out. The first image (which is terrible and I should replace it, if only I could find the scarf in question) just doesn’t show up, even though it’s uploaded and coded properly. I may have to delete it and do something else or find a similar image to what I did… which apparently exists in abundance on the web.

As for the IE5 issue, I think I need to hit the books and see what’s going on; I recall in one of the books a mention of Internet Explorer 5 not liking certain coding practices, which may include image coding. Ugh.

Chapter 11 covers a variety of topics that I’m already fairly familiar with, and clarified a few of them for me:

• Google’s PageRank system and reciprocal links: I read The Search for an earlier class, so I’d been able to understand how just linking with a bunch of other websites that have a ton of outside links (junk links) would not improve my website’s ability to show up at the top of the results. Quality outside links to websites with few other links is a better solution than linking to every other site out there just for reciprocal links.
• web rings: I remember these from the mid-1990s; usually, a bunch of websites with a similar theme/topic would make a “web ring” which would link to all the other websites. Most of the time this included a lot of tacky graphics and frames for it to work well. Web rings don’t appear to be as popular, or, if they are, they’re not as eye-gougingly tacky these days in design.
• meta tags: meta tags are an important way to make sure that web crawlers/indexers are indexing your site for their search engines. Not only do keywords in meta tags help, but having a full description in your meta tags assists search engines with what your website is about and how to present it as part of a search results page. I’ve just devised some meta tags, including a keywords list that includes not only my name in several forms but also keywords for some of the subpage subjects.
• hit counters and other ways to track website stats: These can be really useful if you’re interested in having a popular and/or profitable website. It’s also really helpful for when you use things like Google AdWords and other click-through advertising services, as it helps you gauge what kind of bids you want to pay per click-through from other sites on the web. This isn’t particularly useful for me, but it could be in the future.
• http://www.google.com/addurl.html: I’m going to actually be using this to add my website after the class is done, if only for the fact that there’s not a whole lot that comes up when you google my name. The first hit is a newspaper synopsis of my brother’s wedding in 2006, the second is from undergrad when I worked on a comic book exhibit, the third is my rarely-used Digg account (I use it so little that I forgot I had it), and the last relevant entry is from Reunion.com and shows me as living in Kissimmee or Tallahassee (they don’t appear to be certain). That last one isn’t useful, as I don’t have an account with it, and it seems to list my deceased mother, my brother and sister-in-law, and a host of relatives that I either have never met or don’t remember. Putting up a personal website with my resume and interests would give people some actual useful information about me to go on beyond the fact that I have a married brother and I worked on an exhibit in undergrad.
• The “hiding from search engines” section is more useful for me, as I’m going to end up doing a wedding website after this semester and I don’t want it indexed all over the internet. I do desire just a tiny bit of privacy sometimes. Besides, advertising that you’re going to be out of town during a specific date period is asking to get your house robbed.

I haven’t updated the blog in a while; I’ll be C&P’ing the chapter summaries in another set of posts.

I completely changed the layout of my website, and it’s a bit darker. I found textures that I liked on Urban Dirty, cropped out a section of them, and played with the controls until it looked interesting to me. I ended up with the following to the site:
This is the background texture I decided to use. It helps me “fudge” my way through designing for 800×600 pages because it gives the 1024×700-something interesting to look at on the sides that the 800×600 wouldn’t focus in on. I’m not a big fan of using “percentages” for the layers of design, as it messes with how well an image and text fits within the whole page.

This is a completely different banner concept from the original, which looked like this. Honestly, I’m not a fan of pictures of myself, so I ended up vetoing the original layout because I got tired of looking at the banner.

To accompany these two items, I designed the colors based on Hexadecimal codes from the colors I picked out of the image in GIMP. The font in the banner is the only place where I’ve used it, as it’s not the most legible font but it is a really interesting font. I picked a handful of other fonts that’d compliment it (I think “Vivaldi” is the ideal one that I chose; I’d have to check the CSS and make sure), including accounting for browsers that would not have much beyond sans-serif installed. I also did a little work on graphics, choosing to continue the “dark and grungy” theme with the images I made; my “about me” photo has been altered with a “posterize” filter, and I ended up using the “bucket fill” tool to alter the background on the knitting photo. The “airbrush” look was achieved because I took the photo with the knitting on a Scrabble box that had a somewhat mottled texture to the color. I feel pretty accomplished so far, but am still fixing little flubs in the coding.

As for testing my website’s compatibility, I’ve been using Browser Shots. Sadly, the only browser so far of the 31 out of 59 that I chose, IE 6.0 on Windows XP and IE 5.5 on Windows 2000 isn’t showing the photo. I’m going to have to figure out what in the code is having issues, and I may have to use external links for all the images to make sure that they’re all working. Browser Shots is definitely a good website to keep in mind, as there are a lot of users who vary widely in what browsers and OS platforms that they’re using out there.

Okay, so I ended up doing test runs of two ways to make multiple column layouts to see which one I understood better, and thus was more successful at making work for me. I started out with the JoshuaInk three column tutorial, and tested it on the index page of the site. Then I looked at doing the 456 Berea Street two-column layout on my knitting page and had better luck with modifying it and adding in necessary elements like centering things within a CSS style. It worked wonderfully for my header.

The knitting page currently looks like this:

I’m going to be working on texture for the background, and also spacing and uploading the photos for this page. I’ve got a lot of photo uploading to do in the next week or two to get the other stuff going along. I think that I’ll probably end up using the “UL” tags for my resume, which I’ll have up on the website pretty soon. I’m just not sure how interesting my content is going to be for all of this.

Chapter 7 covered a lot of the information I read about in Principles of Beautiful Web Design, but did so in a more technical manner. Since I’ve used most of the tags covered in that section and I’ve used graphics programs semi-successfully before, this was pretty familiar to me. I ended up skimming it to make sure I didn’t pass over any new and potentially helpful information.

Chapter 8 covered linking pages, which covered the familiar, but added a lot of handy information that I wasn’t aware of. The ../ = “go up a folder” command is going to be very useful to me, and the “you don’t have to give the full external url” commentary was good for me to hear. I had previously been wondering exactly how one dealt with linking to pages that weren’t currently uploaded to the server, but now I understand a lot better as to how the links work. I made a connection with the “image map” function, which is really a great tool when used well, and the beginnings of Mystery Meat Navigation. If it doesn’t serve as a text image that links to another page, it could potentially qualify for MMN in my book. I also found the bookmark tag to be a good one to keep up in case I end up creating a longer page of text, such as a FAQ, that would require links to different sections of the page.

Okay, so I ended up reading the book cover-to-cover over the past couple of days, and it made doing the reading for chapters 5-8 a lot more comprehensive and understandable. The images that showed the visual effects that are achieved by code really did help me understand why different attributes were important, and it really helped that I was viewing all of this in color; it fleshes out a lot of the issues that I had with reading Creating Web Sites on its own, and provided some visual styles and ideas to work with. I ended up running with one of them: the “design the basic color layout in Photoshop” idea. I picked up the concept for the color scheme from this image, which just really blew me away color-wise. I’m not sure I’m going to stick with it, though, as I don’t own rights to the image and I might be able to come up with something more interesting from all the photos we’ve been taking of our gardening over the summer. (If you are what you eat, then I’m at least 20% eggplant by now.) I should also dig through my own images of the Morikami Museum and Japanese Gardens and see if I can come up with something interesting from those, as there’s a lot of visually interesting stuff within the photo set that I took. Heck, there’s a ton of visually interesting stuff at the museum, and especially in the gardens.

On to commentary about Principles of Beautiful Web Design:
• As I’d mentioned, the color layout in a photo editing program idea was really great. It’s one of the best tips they’ve got in there, and is a great starting point.
• This book definitely taught me a bit about using texture in a way that doesn’t come across as tacky, silly, or bizarre. I hadn’t realized that a lot of the really cool websites I’d visited had invested so much effort into using texture to make their site “come alive” visually.
• The typography section:
  • ♥ I’m a font nerd. I love fonts, and I enjoyed every minute in high school of working on the literary magazine and yearbook’s layouts. I really, really, really like finding new and interesting fonts, so this section definitely caught my interest.
  • The font family property makes more sense now; I had a vague idea of how it worked back when I was just trying to figure out how to modify the blog themes’ style settings to make it my own, but now it’s crystal clear.
  • I’m going to make my page header/banner in GIMP so I can incorporate a font that may not be on anyone else’s computer and still have it show up. I’m undecided as to whether to just have the same banner on each page, or to make each banner with customized text for each page. I’ll decide soon enough, depending upon how tedious making one banner will become.
  • Although sIFR is neat, I don’t have time to learn it. Maybe sometime in the future when I’m not a student and have more free time.
  • I learned the pros and cons of justified text, and recognized some patterns of the problems that justify can bring that I’d been seeing a lot on websites that update frequently.
  • The entity references is going to be a useful bit to know, so I marked down the page number in my notes.
• imagery: I finally learned what a PNG is used for, so now I’m not confused about it. I got a lot of useful imagery tips, and some that have directed me to scrap my original color layout and try to make a new one based on my own available images. I’ve got a cache of photos of lots of random stuff on my hard drive, so I should be able to find something visually interesting and appropriate for the site. Since it’s multipurpose, I might modify the use of image banners to directly relate to the subject of each section, but have some distinct unifying elements within the banner and the rest of the style to avoid confusing visitors to my site.

If I were only able to keep one book from this class to show people about making better web pages, it’d be this one. The layout was clearer, the color images helped a lot with explaining concepts that are dependent upon knowing what the code was doing, and it covered a lot of categories of web design succinctly without feeling bogged down in the basics of coding.

To preface a lot of my commentary, I’ve been blogging to keep in touch with friends for the past six years, and I picked up little bit of HTML and CSS knowledge as I went along. Because I was never quite satisfied with the way the blog “themes” looked, I almost always ended up tweaking little bits here and there, like changing the text color, the background, how the page highlighted links on hover, and I’d spend a lot of time wading through code I didn’t quite understand, hoping that a change here or a change there would actually create the effect I was looking for.

Chapter 5
• There was a lot of commentary concerning 800×600 vs. 1024×768, and I was surprised at the claim that “most” people still use 800×600 these days. My computer at home is set for 1024×768, and most of the webpages I encounter these days display quite nicely on that format; in contrast, the computers at work are set to 800×600 to account for our version of Sirsi’s teeny-tiny display format, and I rarely find a webpage that can adequately display information without a horizontal scroll bar on these screens. This includes the vast majority of the news websites that I’ve encountered while helping people with research. Is 800×600 still ubiquitous among users, even though it’s not ubiquitous among web designers who create webpages?
• I found after reading this chapter that I’m much more used to formatting tags, and really only use the logical “list” tag. They’re useful in blogging, and for making summary entries.
• Now that I’ve read the chapter, CSS makes a lot more sense and I can discern what each portion of CSS actually means, rather than blindly guessing why there’s extra punctuation strewn in one area but not another.

Chapter 6
• This, coupled with the last segment of chapter 5, made sense of all the CSS I’d been wading through over the past 6 years of blogging. I understand the structure, what a lot of the features and values mean, and how it affects the page that I’m working on. I also understand the value of creating a separate CSS file to use for formatting all my pages.