Webdesign isn’t a simple thing to do, there are browses which may or may not support the web standard which you’re using to take into account. Layouts and fonts might just render slightly differently, some tags might not be supported, and so on. The following is a short review of 5 websites that have a good design on all fronts, visually, conceptually, and technologically.
Digg.com
Well-known to the tech and IT crowd, digg.com is a place for users to submit things which they deem interesting. If a lot of users think something is great, then it’ll get more attention on digg, and as a result, other people will discover the site. This allows the little guy with a brilliant idea to actually gain status and public attention on the web.
Sporting mainly a 3-column layout, he site is very easy on the eyes, and allows you to dig down to the kind of topics which you are interested in very easily. The only thing distracting is the sheer volume of advertisement, but due to it’s simple visual style, this doesn’t change the usability of the site.
Digg is created entirely in xhtml 1.0, build entirely using a css/div layout, and uses some simple ajax to do its thing in a user-friendly fashion.
The Apple Online Store
Another Xhtml website with a css/div layout, the Apple store uses a 5-column approach, and succeeds. The outer left and right columns function as sidebars with links to relevant content, the main product lineup on the left, accessories and 3rd party products on the right.
A mostly subtle colorscheme is used, with contrast added to the most essential information, allowing shoppers to quickly navigate to their product of choice and anything related to it. Apple has opted to use the inner three columns for a tabbed interface at the top, allowing them to put a large amount of information at the focal point of the website.
As usual, apple is very successful at taking existing technologies and applying them in a way that just feels natural. The end result is that other sites and designers are heavily copying bits and pieces, which I view as a good thing.
CSS Zen Garden
The CSS Zen garden deserves a mention in any web design and technology-related discussion. It serves a simple purpose: to show the possibilities of webdesign using pure css layouts. Dozens of web designers have sent in their stylesheets, and the result is an impressive showing of just what you can achieve using a div/css layout. visitors can change the entire look and feel of the site on the fly, and are encouraged to take a look under the hood, at the stylesheet, to look at, and learn from.
Due to the dynamic appearance of the zen garden, it’s really impossible to say wether or not the site is using a 2, 3, or maybe 5 column layout, since that’s all up to the designer of the stylesheet’s imagination. One thing is for sure; the zen garden is at the forefront of proper web design, and shows aspiring designers a number of ways to properly do their job and make the web a better place.
Iconresource.net
Icon resource is a pay-for tutorial website that conveys proper icon design by freelance macintosh interface/icon designer Sebastiaan de With. The site sports a clean look with light colors that go easy on the eyes. The site uses some ajax, and embedded video and primarily stands out on the good visual design aspect. Still, I wanted to give this one a mention in my list because of the well-designed layout, visuals, and attention to detail.
Flickr.com
Another more familiar website, Flickr is a photo sharing website for vacation shots, semi-professionals, and pro photographers alike. It sports a very low contrast, very light color scheme, with some blue and pink elements sticking out. This keeps the focus on the images and makes the site itself fade to the background when watching pictures. You stop noticing the site and only see the content. The layout is a very spacious, clean, and simple one, without any advertisements and leveraging modern web technologies such as javascript and in the background OpenID/YahooID to stay out the users’ way. It’s simple, and does only one thing, but does it well.
For week 4, I was pretty confident I’d be able to do the javascript assignment quickly. Having never really used JS, but being relatively experienced with C++, I felt at home with it instantly due to the the identical syntax, so the only thing I had to learn were some minor differences between the languages and the document object model, which turned out to be quite some work still, but only took me a short while to figure out with the internet to reference. All in all, I think it took me about an hour and a half to have the bug-free assignment done and I’m very pleased with that. the DOM is still a bit scary, but was easier to play with than I though it would be.
You can basically set the name and id tags of a div or a other tag, and address html elements, or groups of elements using those using getElementById or getElementByName which return objects for you to work with. the only real difference between JS and C/++ was with function declarations/implementations where you don’t need to specify a return type, nor do you need to specify the variable types, or even use the var statement for function arguments.
I’ll give an example:
First one is a function in JS
1
2
3
4
5
6
7
8
|
function PopulateOptions(options, max)
{
var i;
for(i = 0; i < max; i++)
{
AddOption(options, i);
}
}
|
and the same function rewritten in C/++
1
2
3
4
5
6
7
8
|
void PopulateOptions(OptionsList* options, int max)
{
int i;
for(i = 0; i < max; i++)
{
AddOption(options, i);
}
}
|
As you can see, nothing dramatic, pretty easy to understand and read!
Once again, pretty easy homework to do ; ]
Tags: ajax, javascript, xhtml
Embedding Media on a webpage
the homework for this week was to research the (x)html object tag. Truth be told, I’ve never had an in-depth look into this thing, or any way to embed multimedia into an (x)html page. But as it turns out, it’s quite a horrible thing to do. Reason being that on Internet explorer browsers, the object tag is used, while on mozilla/netscape based browsers, embed is used for the same purpose. the W3C also mentioned partial support for the object tag on it’s website, and as we all know, partial browser support is always nice for a web developer to have to deal with… not.
So adobe recommends putting an embed tag inside an object tag to ensure that all browsers actually do what you’d expect them to do, which seems like a fair approach, as long as it doesnt break the xhtml standard on my sites.
So then I decided to look around on some websites myself, and see how they solved the problem, and what i found out was: they didn’t. Some use object, some use embed, but never a combination, and usually a very ugly ‘fix’ is put in place, like putting the html for the embed inside of a div src attribute, and it’s to no-ones surprise that none of these sites are actually using valid xhtml, or even html, and from what I can see, they purely rely on the browser to fix the html for them, which is really the most horrible thing you could ever do as a web designer. For now I like the youtube approach best, which I’ve pasted in a quote below. I can’t wait for html5 and xhtml2 to take over with their proper multimedia support tags, and get rid of the object soup.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="340" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/SYxte83ISuc&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<!-- embed tag here is for cross-browser compatability -->
<embed type="application/x-shockwave-flash" width="500" height="340" src="http://www.youtube.com/v/SYxte83ISuc&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Pushing the web to the edge
Another part of the assignment is to find a number of websites, or web-applications if you want to be all fancy-pants about it.
So I’ve looked around for a bit, and came up with my top 5 of boundry-pushing sites that I could come up with, any some comments on why they are.
Photoshop.com
In an attempt to keep people from pirating Adobe’s own creative suite just for simple image editing, Adobe has created an online version of photoshop which lets you do basic edits and transformations in your browser, free of charge. Utilizing flash, Photoshop’s web cousin gives the user just enough tools to prevent them from pirating, but not nearly close enough tools for the pro, or semi-pro user. A full-blown online image manipulation application pushes the boundaries of what you’d expect to do in a browser, using it as a tool, not as a viewer, any longer.
Jaycut.com
What photoshop.com does for photos, Jaycut does for home video editing.
Giving the user all the tools they could possibly need, Jaycut allows for video editing similar to Apples’ iMovie, or Microsofts’ Windows Moviemaker, but online, accessible anywhere where there is a browser with Adobe Flash support. Video editing in the browser: very much pushing the limits of what you expect to be able to do on the internet.
Google Docs
Docs is an online replacement for Microsoft Office, OpenOffice, and other word processing applications. It moves creating, saving, sharing, and collaborating on documents entirely into ‘the cloud’, where you can optionally save a copy to your local computer in a number of common formats, including word document. Though not entirely in real-time, it also allows you to work on the same document with multiple people at the same time. As a response to google docs, Micosoft has started development of their own online office suite, but only offers it as a bonus feature of it’s existing software (still requiring you to pay for it).
RPX/OpenID
While technically not a useful website when used alone, OpenID and RPX allow for instant login on a large variety of other websites, without requiring the user to create yet another online account. The services uses modern web technologies like flash and ajax to work it’s magic, and supports users logging in with Windows Live ID, Yahoo, Blogger, Facebook, Twitter, OpenID, AOL, MySPace, Wordpress and the list goes on and on. Users can log in on any of these websites using a single account, which they most likely already have, lowering the threshold of engaging with an online community or service. OpenID is an open standard/platform, is owned by no-one, and gaining traction on the web since it’s fairly easy to add to existing websites.
In short, RPX with OpenID aims to be a single login for the internet, and is being increasingly successful in it.
Tags: embed, html, object, standards, web, xhtml
second lecture, more basic info that I knew back in 2005. I had some trouble with dreamweaver, setting things up, but sorted it out within 20 minutes or so. Also set up my ftp client, and Coda (www.panic.com/coda), which I think might just become my favorite web development editor. Never had a need to use such a tool before, but it does seem to be handy right now, and loads cheaper than dreamweaver (as in, i can actually afford to buy it legally).
Ken saw my site from last week today, wanted to talk about me going through the stuff faster and reminded me about the exemptions. I guess I forgot that there was some time reserved to sort those things out for people who already have the skills. I’m thinking this would be a nice idea to free up some time and focus a bit more on the other lectures, but we’ll see just how much of CT I can skip. I don’t know javascript, but since I know C/C++, this should be fairly easy.
Check out my amazing website though! [/sarcasm] (opens in a new window/tab)
A pretty boring lecture, probably interesting to quite a large part of the class, and I’ve heard about people pulling all-nighters already over this stuff, but to me this is just way too easy.
Was supposed to make a simple website using html, but that’s ancient, so I decided to make a tableless css layout with some nice subtle colours. And I’ve been able to do the whole thing during the lecture. Got bored at some point and decided to just relax for the rest of the lecture. I like Ken as a lecturer though, he can explain stuff in a way that conveys the most important information to people to those for who this is new.
I haven’t actually seen a whole lot of people with webdesign experience just yet, and to top it off, there was this guy sitting behind me who was complaining that typing html was too much work. Obviously he had absolutely no clue what so ever what the full-blown IGAD courses are like. A&T has been pretty easy going so far.
I’m still going to the lectures though, maybe there is some useful information in the later lectures, I mean, I’m self-taught, so theres quite the possiblity that I’ve missed some handy techniques or whatnot.