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.
RSS feeds and Google Chrome
I am not sure if anyone else uses, or has used, Google’s new Chrome browser. I downloaded it recently to try it out and have liked it for the most part. The problem I just encountered with it is when trying to subscribe to an RSS feed. Everytime I click on an RSS link it directs me to a page that has, I guess we’ll call it “naked”, RSS coding. So mostly a page that looks like gibberish. I ended up having to manually add all of the feeds to my reader by copying the URL which I thought was retarded. I was just seeing if anyone knew why this was happening or not. I guess I am gonna go back to using Firefox full-time.
Previous Work
Hey guys, sorry about the late posting. I was at a friends house last night who didn’t have Internet access and I was trying to play it safe and not drive in the ice.
I enjoyed reading about the various projects that Simple Bits had been involved in. They have worked with some major companies! That would definitely be a great resume for any design firm, hopefully I can achieve even half of those clients in my future as a web designer. The only thing that I wish they had added would be client feedback or testimonials. It would be great to hear what ESPN or Google had to say about working with them.
On the Happy Cogs site I really enjoyed the case history about their Kongregate design process. The speed in which they were able to conceptualize and develop the site from scratch was awesome. I also liked the section about flexibility, as users and designers came on board things about the site design had to be fluid and change along with them to accommodate.
Hicks Design was a fun site to look over. I thought that his logo designs were really fun and smart. I thought it was pretty cool how they had worked alongside Stuff and Nonsense to design the Really Worried site. I also really liked the layout of his site, it was really simple, aesthetically pleasing, and easy to navigate.
I do wish that there had been client feedback or testimonials on all of these sites, but I still immensely enjoyed reading up on the previous work these design firms had been involved in. I think it helps us in understanding how to approach a new design project, as well as reminding us that people and potential clients will also find previous works interesting and helpful when choosing a web design firm. I think it will be an integral part of my portfolio site.
Site Planning Aids the Design Process
About a year and a half ago I got involved in putting together a website for a church as part of some community service requirements. Upon beginning the project I asked a few basic questions, the majority of them based on how they would like the website to look and so on. I did touch on a few areas about what the goals of the website were, and no one seemed to know.
Looking back now I realize that I should have pressed the issue further or taken Karen Morrill-McClure’s advice from the blog Creating a Site Plan. The only problem was, at the time I started working on this web site I had no idea what Information Architecture was and had certainly not heard of, or read, anything about her.
To say the least the implementation of the website was a disaster. We had no goals for the site, so therefore I had no direction in the site’s design. I coded some pages aimlessly changing approaches and design ideas daily until I realized that I was getting nowhere. Even though I finally settled on a design and built 8 or 9 pages based on it, it was still far from a working site. There was no content since there was no goal for the site, and a page without content is absolutely worthless. Since my “client” did not know why or what they needed a site for, and I didn’t know a tactic for extracting that information from them, the web site was never 100% complete.
Just so that I could return a finished product to them, I copied content from a few of their brochures to put up on the pages and called it quits with a final, “If you decide that you would like anything else to go up on this site after you have had a chance to look it over, please feel free to give me a call.”
After taking Information Architecture and reading this article I realize now that I should never have even begun to work on a site without a solid set of goals and a plan in mind. This is absolutely the most important part of a design project, because without it you can get turned around and lost in a project before you even know it. Having a plan before-hand gives you something on paper, something tangible, that you are working towards. As well as some guidelines to work off of when you come upon a design related decision. Even though it seems like boring work and may feel like it’s taking up too much of your time, it will certainly save time and expense in the long run.
I had not thought of the story of the church website quagmire in a long time, maybe it was just one of those life experiences you would just rather block out. After thinking about it while writing this I decided to stop by the website and see how it was doing but the URL is no longer working. I guess there probably was never much of a need for the website to start with, which is something that I would have known from the beginning if I had taken the proper steps during the research and planning phase. Oh well, you live and you learn.
HTML vs. XHTML vs. CSS
I first looked at a website called W3 Schools which is a website I sometimes go to when I am needing some help with code or just trying to learn something new. They actually had an article called XHTML vs. HTML which explains that XHTML is actually very similar to the HTML 4.01 standard. If you are already planning on using the HTML 4.01 standard for your coding then there are only a few changes that need to be made to your code. The main differences in coding with XHTML are: your elements have to be properly nested, everything must be in lowercase, all elements must be closed (i.e. <a href =”www.wordpress.com”>wordpress</a>) and documents must have one root element, which I think means that they have to be within a parent element, typically it would be something like “<html>… entire document …</html>” where everything in between would be a sub-element. There are some additional differences which are documented by W3.org in this article.
Cascading Style Sheets, or CSS, was developed to help clean up HTML code. Previous to CSS all visual formatting was written in the same markup language as the content which caused problems with messy code. CSS was developed to take over the layout role and separatethe code for content from the code for the page style. “Cascading” refers to a calculation of priorities by predefined rules so that the end result, the web page layout the viewer sees, is predictablefrom one browser to the next. CSS coding can be included in the <head> elements of HTML document itself, if it only refers to the style of that specific page, or in a separate CSSfile which is referenced in the HTML code, allowing the same style to be used for multiple pages. CSSZengardenshows examples of what can be done using CSS. By clicking on different stylings on the left side of the page you can change the layout of the page while the content remains the same.
CSS and other web standards are important for the usability and compatibility of the web. Without out web standards we would still only be able to view certain pages correctly using a certain browser. Webstandards.org is a coalition that ensure web standards are implemented globally. Using tests like the Acid3 test to ensure browser interoperability and working with the major software companies to encourage the use of web standards in their software releases. As future web designers we need to stay in-tune with these standards to ensure the maximum compatibilty of our web design projects.
P.S. to Blogcasting
I was going to add a video to this blog so that I could play with the vod/blogcasting side of blogging. I ran into a problem with the fact that the standard (read free) version of Quicktime does not allow you to record video or audio. Has anyone come across shareware or freeware software that they could recommend for that? If not I will just try a few and see which one I like using.
