XHTML Forms
The first site I came across with good information about XHTML for was a site called The Web Authoring FAQ on their Forms chapter. They answer a lot of questions new designers might have about the different aspects of forms. I was actually curious about the section on mailto forms. I am working on a site for someone who wants me to add some forms but does not want to get into the server side of things, only wants the information in the forms to come to him via email. This site says that using mailtoin XHTML forms is unreliable so I will have to work out a different way of doing it. Maybe PHP allows for emailing forms more easily and reliably.
About.com also had a good section on explaining all of the XHTML Form Tags/Elements and their functions. It provided you with a library of tags and elements which you can click on to get a greater explanation of their uses and how the function.
The last source I used for learning about XHTML forms was the Building Forms chapter of our textbook. I think that is the best source of information about forms that I have come across during my research so far. They do a very good job of explaining all of the tags and element, giving you code examples, and visualisations of what the code looks like in a browser.
And just in case anyone is curious about my mailto questions in the first paragraph. I looked up some info on PHP forms and found this article showing how to make a simple form in XHTML and using PHP to generate and email with the data submitted. A Practical PHP Form to Mail.
Web Design Typography
Wow, what a day! A friend just spilled water on my laptop! It seems to be fried but hopefully it will turn back on after I let it dry out overnight, seeing as how all of my homework for the last two weeks is saved on it. I am rushing to try to remake my homepage, put it likely will look somewhat different than the original. Well enough of my ranting, let’s talk a little bit about typography.
The first web information I started to read was actually a chapter on typography in an ebook called Web Style Guide. This entire book seemed to have a lot of good information so hopefully I will have a chance to read the remainder of it as well. Even though it is a little bit old (2002) it had quite a bit of good information about typography in web design. It covers, section-by-section, all of the major typographical variations, including: white space, type size, type face, alignment, line length, emphasis, etc. I highly suggest anyone who has the time reads chapter 5 in this ebook.
Next I read an article called The Anatomy of Web Fonts which deals more with font type and coloring. They discuss what features of a letterform make it a good display font for web and give a few simple rules so that you can pick a font that works well and is easily legible. One other issue brought up in this article is aliased vs. anti-aliased text and the changes it may have on your design.
The third article that I found really informative was on WPDFD called, oddly enough, typography. This article is pretty lengthy but covers a lot of information about the use of type in web design. Seeing as it is 11:58 I really don’t have any more time to cover the particulars of the article so just read it for yourself!
I’m also going to post a link to this reference page that contains a ton of links to articles and sites about web typography.
Inspirational Design Sites
The first site I came across that I enjoyed looking over for research in my project was LightMix Design Studio based out of Washington D.C. I thought their site looked very professional and had a nice feel to it. They used a few shades of gray, white, and orange as the primary colors on their website. I like, and have been planing on incorporating, a “news” section on my site. They have a news section but I think they should have moved it to a separate page, only so to shorten the home page. Under the portfolio button on the main navigation you can review case studies, identity design (logos, branding, etc.), as well as see a lot of other work they are involved in, including interface designing and print. They also included a “testimonials section” which I think is something potential clients would be very interested in
The next sight that caught my attention was LA Design Studio. The sight had some really cool visuals and had some great flash programming. That being said, I think the sight was more built around showing the cool things they could do with flash then anything else. The site is basically a moving landscape of a hill overlooking Los Angeles with a menu on the top right which calls up various flash objects to hover over the landscape. They have a lot of examples of their previous work in print, web design, logos, and photography (I thought being able to drag the pictures in the gallery was pretty cool). But beyond that they do not have more than 3-4 paragraphs of content which I imagine makes SEO difficult for them. Also, after you have been on the site for a while, the landscape turns from day to night. This site had some very cool effects and flash programming, but I don’t think that I would actually design my site this way. Maybe just use something similar to their photo gallery.
The last site that I perused was Gravitate Design Studio. Their sight had a nice simple look to it. It had a very two tone simple white and grey background with hovering frames for the content which allow the eye to flow easily. They include enough content and information about themselves and their previous projects, without getting too wordy or preachy. Their target demographic seems to be small businesses, artists, and non-profit organizations. The graphics are very basic, as well as the colors, which is easy on they eye. Their sight is easy to navigate with contextual menus on the left side. One section that I though was interesting was their “methodology section” in which they take you through the 4 major phases they go through when working with a client. In this section they mention some practices we learned about in Info. Arch. which personally give me confidence that they have a good grasp on web development and user centered design.
Color Comps
I am just going to link to the directory with my 3 color comps here on my blog. If anyone want’s to follow the links and give me feedback on these things I would be grateful, thanks.
Floating elements using CSS
I have been reading a lot about floating elements using CSS. I played with it some on my last homework assignment but everything did not lay out as perfectly as I had hoped in every browser. Some browsers rendered the page how I intended, while others did not. After having Mr. Batchelder help me resolve that issue I decided I should read up on this so that I can be more proficient in floating elements correctly within the constraints of my layout.
The first article I read, Float Layouts on The Autistic Cuckoo, was very informative, even though a few paragraphs got a little confusing causing me to re-read them several times. The last portion about floating columns where he gives an example of how to keep the main content as the center column while still keeping it as one of the first elements in your XHTML markup was hard for me to grasp, but I think if I play with it using his example code I could figure out exactly what he is talking about.
CSS Float Theory: Things You Should Know by SmashingMagazine.com is sort of a Frankenstein’s monster of pieced together information from numerous articles about floating elements using CSS. It also links to all of those articles so if you are looking for a good article on the subject, I would suggest this one as the starting point. Even though they only use snippets of various articles, it makes it easy to understand the broad concept and rules involved in using floats. Alternatively, if you feel like getting into more detail there is always a handy link to read the whole article that is being quoted.
The third article I read didn’t seem to comply with well formed code and web standards. It talked about using hacks and empty divs to trick the CSS floating property into doing what you wanted it to do. But I think using the ‘clear’ property in CSS is probably a much better way to get the results you want from your layout using floating elements. I might be wrong, and it did have some additional useful information, so read it for yourself. Containing Floats.
I am excited to see what else can be done using floats, as well as other forms of CSS, to enhance my web pages layouts.
