Tag Archives: webdesign

On My Portfolio Website

Posted on by
1

Current Portfolio Layout (as of February 12)

If you’re not the least bit interested in web design and development, you can probably skip this post. It’s basically going to be a jumping point for the redesign of my portfolio site (the main site on this domain).

So, it’s that time of the year again– the time where I start applying for jobs and spending hours writing cover letters and tweaking my resume (this may change too… more on that later). Although there are some interesting prospects on the horizon already, one major step for any multimedia student applying for jobs is to re-do or revamp their portfolio for submission. Last year, I was actually late (I re-did my site while I was employed at the time, not before getting the job), but it ended up not mattering too much for that job anyway. This year, if I want any sort of design or multimedia job which is actually relevant to my program, the renovation of my portfolio is of the utmost importance.

Now, web standards have been changing a LOT over the last few years. HTML5 finally appeared, jQuery has become commonplace, the CCS3 spec has been steadily advancing towards full cross-browser adoption, mobile internet devices have taken over the world, social media is everywhere. So what does this mean for my redesign? It means I have to finally change my method of working on websites. It was all nice and easy when most people had 1024×768 desktop or laptop computers on which they did most of their internet browsing. Nowadays, if your website takes longer than 2.1 seconds to load completely on an iPhone’s tiny display, you’re screwed (I made that number up, by the way). So, keeping this in mind, here are the problems with my current website:

1. Horizontal scrolling below 800px. This is especially annoying when I’ve “snapped” my window to the left or right on my Windows 7 laptop, and have to scroll sideways. For years, and perhaps even decades, one of the top rules of web design has always been- “never make your visitor scroll sideways!” Not only is it annoying, but the layout also breaks rather badly when one does scroll sideways. Whoops.

2. Plain. There’s no personality in the design, really. There’s plenty of personality in the content, because I tried for that deliberately, but for some reason, the design looks very uninspired. Mind you, it is quite nice and neat and clean, but it can be those without being bland.

3. No mobile optimization. This is a direct result of my not owning a smartphone, but that’s really no excuse. Now that it is fairly easy to customize one’s layout for mobile devices and netbooks, there’s no reason I can’t do that and save people a lot of scrolling on mobile devices.

4. Weird PHP page structure. I do try and minimize my URLs as much as possible, but they are neither memorable nor nicely linked.

5. Social media “dabbling”. I have links to my LinkedIn, Flickr, etc., but they are afterthoughts, not design features.

6. Layout disconnect between the main site and the blog (this site). They don’t even look like they belong to the same person.

7. No room for additional information about my bigger projects (or ones I am very proud of).

I’m sure there’s more, but this is what’s currently coming to mind. How am I going to fix these in the redesign? Like this:

- Main layout and navigation 650px or less (or whatever doesn’t make me scroll sideways when I’ve got my window “snapped”)
- Better design– more colour, better typography, no more Courier New as a body font– but still preserving the simplicity and clarity
- Mobile stylesheet(s)
- URL rewriting to make them shorter and memorable **I just tried this out on the existing site, and it worked! Excellent :)
- Feeds from one or more social media sources (I’m thinking Flickr)– or at least, have them featured more prominently
- Redesign of the blog layout to match the portfolio layout
- “Featured Projects” section or area

This is what I’d like to accomplish. I know that given enough time, I can make it work– the key is, can I make it work given that I really don’t have much time at all? We’ll see.

On the DIG London Website

Posted on by
Reply

I received a link to this interactive gaming conference this morning, and while it actually looks quite interesting (and I may consider going), they’ve got one of the worst website designs I’ve seen in a while. Take a look at this (visit the website for the full-size version):

I realize that the audience for this conference probably doesn’t care about website design, but they WILL care when they realize that the information from last year still has not been replaced and they can’t find what they’re looking for. Game design is still design– there’s really no excuse for this website to look like this. So, in the interest of fairness, let’s analyze the good and the bad… maybe there’s some good stuff underneath the 2000-esque design.

 

The Good:
- Navigation-based breadcrumb trail– you always know which page you’re currently on, as the link in the navigation is bolded and has a ‘>>’ symbol behind it.

- Text-based, simple navigation

- White (or light) content background makes body text very readable

- Use of XHTML, jQuery.

- Modern, clean banner up top.

- Centred layout, fits 1024 x 768 resolution without horizontal scrolling

The Bad (partial list):
- Tables-based layout (use divs and CSS– tables are for tabular data, and are a huge pain anyway).

- Very inconsistent alignment (pick one and stick with it!).

- Inconsistent fonts/font colours/line spacing/etc. (same as above).

- Use of images for text headers (like the ‘Some of our great speakers…’ text. Use plain text– it’s more SEO-friendly).

- The big banner has the new dates of the conference, but the ‘Speakers’ and ‘Sessions’ links still show the old content from last year (take this down, and maybe put it in an ‘Archives’ section, otherwise it’s very confusing).

- Black background on the Twitter feed widget is very hard on the eyes… and what’s with that neon green text? (Use consistent colours across the website).

- EXTREMELY crowded and cluttered home page– there is no focal point, and the information in the middle is lost amid all of the surrounding logos/images/stuff (clean it up! Those logos do not need to be so big, and do not need to enclose the content like a sandwich).

- The email and print symbols look like they could have been pulled from an old DOS system… which works for some, but not for a gaming conference website. (And the alt text on the email symbol includes the word ‘eMail’… who still capitalizes the ‘m’ in email?! This is 2010, not 1999). Speaking of… why is there a link to email right next to the ‘Contact Us’ link? They don’t both need to be there.

- The image which links to the blog in the left column gives no indication it is the site’s blog, other than the Blogger symbol (a text link in the navigation would be better)

- And why is the DIG logo different colours in different places? And who can read the ‘Thanks to our 2009 speakers!’ header-image without getting a headache? And why is ‘Keynote’ capitalized in some places and not others? And what’s with all of the dashed lines separating the columns (and why are they all different colours)? And… and… and…

Sigh. Maybe I’ll use this website as a case study, and mockup a version of what I would like it to look like. Or maybe I won’t be able to stare at it that long. Either way, hopefully DIG cleans up their website before the conference this November… I might be more inclined to attend if they do.

On Internet Explorer 6

Posted on by
2

Why, why, WHY do people still use this browser?! It’s old, terrible, outdated, simplistic, inefficient, and the list goes on. Unfortunately, it seems to be a “company standard” in a large number of large corporations, simply because they have old software dependencies which somehow require IE6, and they can’t be bothered/don’t want to spend money to upgrade anything. 

I received a bit of a shock today when I saw my blog stats and they told me that roughly 53% of my visitors use IE6. Really?! (And then I realized that most of the spam bots which hammer at this blog are probably run off of an old computer which runs IE6). But seriously! What if those ”visitors” weren’t spam bots? What if I truly had a substantial audience using this sorry excuse for a web browser? 

There have been multiple funerals held for IE6 in the webdesign world. Some sites now say that they’ve completely dropped support for IE6, just because it’s such a HUGE pain to design/develop for. But what if 50% of ALL web traffic came from IE6 browsers? I think that this alone would cut the current number of webdesigners/developers in half. IE6 is one messed up browser; it barely supports CSS2, and relies on hacks to keep everything working smoothly. And for the month-and-a-half I was using it at work, I wanted to rip it apart, line by line, on a daily basis.

Conclusion: Stop using IE6 and help webdesigners/developers regain/retain at least a small part of their sanity.

P.S: I have no idea where I found the image, but I don’t intend to infringe anyone’s copyright by using it, so please don’t sue me if it’s yours (if it’s yours, contact me or leave a comment, and I’ll credit you):