Archive for the ‘redesign’ Category

« Older Entries

jQuery window.name transport is out…

Wednesday, October 1st, 2008
JQuery intermediate site

Image by Phillie Casablanca via Flickr

After a week of mostly testing and fine-tuning the code I finally released the windowName transport plugin for jQuery. You can get the plugin here but I suggest you first check the plugin page.

I need help testing

If you have an obscure browser / OS combination that is supported by jQuery I urge you to test the plugin. There are no good test pages yet so my temporary test page will have to do. The test page POSTs the querystring passed to it to a nonlocal domain and should open a JavaScript alert with the same querystring plus php=true.

On a sidenote – I figured out that the page looks better without the background images. So I changed the theme – let me know what you think.

Related articles by Zemanta
Reblog this post [with Zemanta]

Posted in ajax, browsers, design, firefox, ie, interface, javascript, opera, redesign, safari, software, technology | No Comments »

Review: Adria Airways and NLB

Monday, June 16th, 2008

Recently two more big and very frequented Slovenian sites relaunched and I think they too deserve a mention.

Adria Airways

The first page I want to put to the test is the new page of the first and the biggest Slovenian airline. It was recently launched by my ex colleagues at Parsek as the second version to be made there. The first edition was designed and prepared in another agency and Parsek only did the backend while the new version is all Parsek. To be fair the biggest and the most important part — the reservation module — is still made by the french company Amadeus.

The new design tries to incorporate a leaner navigation with less elements even though it became wider, almost reaching the 1000px mark. The front page is much more sales oriented, displaying a lot of useful information. I can’t get past the color scheme that is really too dull. There are quite a few validation errors, the ones in HTML mostly due to non–escaped ampersands, while those in CSS are just sloppy coding without checking the validator.

I was surprised to see that some stuff doesn’t work well with Firefox 3 and Safari 3 even though the first one isn’t released yet (will be tomorrow) and the second one doesn’t have a lot of users in Slovenia. I’d still stick to what Yahoo! has to say in their Graded Browser support table for browser support.

I was positively surprised at how well some inside pages are designed down to the last dot and icon and negatively how bad the pages that “only” present CMS content look. I don’t know whose fault this is and I don’t even care, it doesn’t matter for the end user. I’m sure the guys at Parsek will check these pages out and try to make changes that will make them better. When I first saw the design while I was still at Parsek I wasn’t sure if the title on the right would work but now that I’m surfing the page I actually think it does. There is one problem there though – if you visit this page (screenshot) you’ll see that you can see its title “About us” four times in a very small area. It’s nice to know where you are but isn’t this a little bit too much?

NLB

The next big redesign is the biggest Slovenian bank which redesigned their site after quite a while. I don’t really know what to say about the redesign – the last one was horrendous so this one is easy on the eye. It too got wider and restructured so people can find relevant information easier. The home page lists all the products for residents and businesses so you can access them directly.

If the design got overhauled the backend didn’t — if it did it got it fashion tips from the 90s. Validation returns a lot of errors and — prepare for a shock — the encoding is iso-8859-2. The number of non semantic elements is significant and inline scripts are there too (<SCRIPT language=JavaScript>).

The most interesting thing about the new page is the fact that it now uses “friendly URLs”. And how utterly broken they are. You could also say this page is a textbook case for how wrong things can go when you don’t think about them. So you’ll have two pages, one at /nalozbe-v-vrednostne-papirje and the other at /nalozbe-v-vrednostne-papirje1. I have no idea how that tells you anything about how the content behind these links is different. It would tell you more if the first was prefixed with /residential and the second one with /businesses.

Another funny thing I noticed is how banners are designed to look as if they weren’t images but rather just HTML parts of the page. The reason I noticed is that I was on the Mac while checking the page and since font rendering is different it looks really weird. I think I might have seen the same difference on Vista with ClearType on.

Zemanta Pixie

Posted in blurps, companies, design, flash, fowd, fowdlondon08, futura10, general, html, ie7, leweb3, liffe, microsoft, openid, php, redesign, safari, standards, vista, zlitt | 2 Comments »

Redesigned media

Thursday, May 29th, 2008

A couple of Slovenian newspaper sites redesigned recently (today?). I got the news on Twitter. I’ll try to review what they’ve done1.

Delo

Newspaper vendor, Paddington, London, February 2005Image via WikipediaFirst notified by had, I was eager to see the new design and code. The design is very very wide — a good link to the newspaper that is probably the widest/biggest in Slovenia. At 1024×768 you see all the content, but the banner on the side is missing — I hope they subtract these users when selling ad space (or they should get ToboAds that actually count only the ones that are seen by the user using advanced JavaScript).

The design is boring with only the RSS icons giving it some color. It gives no feedback on links, the font on the front page is too small (11px) and it doesn’t hold its text–resizing well. The content is a bit hard to read with the font size at 12px, width of 600px (50em) and line–height at normal. There doesn’t seem to be any vertical rhythm applied. It’s also very hard to figure out where you are in the structure since some of the navigational elements seem to vary in color for no apparent reason.

The underlying code is disappointing. It’s really something that you would just delete and start over. It suffers from inline styles, divitis, classitis, inline scripts, validation errors (163 for the front page) and overall ugliness. The front page needs 67 requests and 724kB to load in 3.24 seconds (there are a few banners on the site though). Disappointing but expected is the fact that they don’t use Microformats but I was positively surprised that you can use OpenID to log in — I’ve never left a comment on local news sites because you need to register with each one. And I never do.

Mladina

Posted by Tomaž Štolfa it’s actually not available yetavailable now through www.mladina.si but can be accessed directly through www.mladina.si/dnevnik/. It’s a nice page but with a shift in concept — the magazine is a weekly publication while the online edition will publish daily (or probably all the time). It too is wider than the previous version with a width of 1024 leaning on the left side of the browser.

The design is nice and gives good feedback in use. It’s made on a simple 5—column grid with the 5th column being used only in the head and for the banner. The only thing that is quite annoying is the banner at the top that moves the whole page down another 90px for no good reason (at least not for the users?). The content is much easier to read with a 12px font size, 1.5em line–height at 563px width (~47em). It also makes use of few different typeface which adds to the overall experience of surfing. Vertical rhythm in text is achieved through crappy code with paragraphs being spaced with <br /> elements.

The code is nothing to look at. It has 71 validation error on the front page with the first ones starting in the head element (unclosed meta elements). It too sports inline styles and scripts (which are at least wrapped in CDATA) and it too suffers from a heavy infection of divitis. It even has some <center> tags that I haven’t seen for quite some time now. The front page loads in 2.54 seconds for 58 requests and 582kB with all requests except Google Analytics going to the same domain. Microformats are nonexistent and so is OpenID — no need to have registration if you can’t leave comments2.

  1. No need for a disclaimer anymore — I don’t know who designed or coded these pages and I don’t work at their competitors. back
  2. WHAT? Isn’t this supposed to be the most open and future thinking newspaper? back
Zemified

Posted in css, design, html, interface, layout, microformats, openid, posh, redesign, standards, technology, typography | 3 Comments »

Another year gone by

Thursday, April 10th, 2008

A few days ago this blog celebrated its second birthday. It’s been a good year, with links to my article published by such notable authors as Luke Wroblewski and Ethan Marcotte – the same article was translated into Russian. The blog was also included in Planet Microformats.

I’ve written only 61 posts (down from 100 in the first year), gotten 134 comments (down from 155 in the first year) and more than 70.000 spam comments (up from 17.000). I have 56 subscribers according to FeedBurner, which is more than a 100% increase from 25 a year before.

Firefox is the dominant browser with 47%, Internet Explorer lost some market share and is down to 44% with Safari rising to 4% and Opera to 2.5%. Almost 90% of the visitors have Flash 9 installed, an additional 4.5% are stuck at Flash 8. Screens grew a bit with only 27% having 1024×768 or less (32% year before) and less than 2% 800×600 or less. Windows have a share of 85%, Mac OS 10%, Linux 4%.

Top content is still This page contains both secure and nonsecure items, Messing up the interface coming in at a distant second with merely a third of the visits.

Redesign

I’ve had a redesign planned since day 1, but as usual it took quite some time to get here. Since I’m not a design I couldn’t just create a fancy look with everything else left the same. The idea was to shake everything up and try to come out with a layout that would be worth redoing everything. When I posted about what a TV network / news page should have when being redone I was also setting my own targets.

Tableless layout

This goes without saying. All the pages should validate, although there might be some crap left.

Width

I increased the width to 850px with the addition of 140px to the left used only for design purpose, not content. The main content is only 410px wide which means you can easily read this blog on devices like the Nokia n800.

YSlow

Not really that relevant since the page only creates about 15 requests which might even decrease as I compact the JavaScript. There are a bunch of other requests made that are content related – images, Zemanta pixies, favicons…

Microformats

Every page is supposed to be valid hAtom and the About section is an hCard with adr and geo. Links to others are of course XFNed. The about page is planned to be an hResume.

There’s no need to talk about blog compatibility and screensaving for banners. I don’t use OpenID there are no log-ins.

Context sensitive

Markos recently pointed out the fact that not many pages on the internet make use of the possibility to change the page for different users and different context. This, of course, is not an easy job, especially if you’re doing heavy processing – doing this for each user might be a bit to heavy. It is something I think differentiates the internet from other media and should be used to provide a better user experience.

User based

Returning visitors of this page will get special treatment. Since they’re coming back they don’t need to see the About section and they will also not have banners displayed.

Referrer based

People coming from search engines will see their query parsed into words that will be colored for easier findability. They will be able to switch them on and off and be able to repeat the same query on the internal search with the last option available only if the referrer was an external search engine.

Location based

Even though many blog themes have the same sidebar for all the pages (as did the previous one I used) this doesn’t follow the normal architecture rules. The sidebar is normally context specific – in my case a regular user reading a blog post will currently see nothing in it (while others will see the About and the Ads.

Other candy

Grid and baseline

The page is set to a 7 unit grid, with units 60px wide with a 10px gutter in between. It’s also set to a baseline height of 18px that is respected throughout the page. Images and other non-text blocks on the page are corrected with JavaScript to a half of the unit (9px).

Links

The links bar will try to retrieve the favicon of the link – if it succeeds it will use it instead of the default icon.

Maps

If you click on the Google Maps link in the About section they will open as small inline maps with a link to open them in a new window.

Yet to be done

You might have noticed that post categories are nowhere to be found. I didn’t forget them I just found out that I’ve changed my categorizing pattern and had to rethink the display. I also wanted to add the Elsewhere section with links to or even content from other pages where pieces of me reside (Twitter, Flickr, Marela, Pownce, Facebook, LinkedIn, del.icio.us,…). Another thing missing is the Projects and Experiments sections, I’ll tackle these in a separate post sometime in the future…

Zemified

Posted in css, design, general, html, interface, javascript, microformats, redesign, standards, technology, thoughts | 5 Comments »

24ur.com relaunched

Tuesday, April 1st, 2008

What we got:

What we didn’t get:,

  • yslow – >160 requests for >450k – but it takes more time to load, probably due to javascripts in the head
  • microformats – wishful thinking
  • openid – wishful thinking

What I didn’t check but I think it’s safe to say we didn’t get:

  • blogs compatibility
  • screen saver for banners

Another thing we lost in the transition is the TV guide. I don’t know where they lost it but you can get it here.

Zemified

Posted in blurps, css, design, html, javascript, microformats, openid, posh, redesign, standards, technology, thoughts | 4 Comments »

Relaunching…

Friday, March 28th, 2008

the webSource: ShutterstockA big Slovenian media house is announcing a relaunch of the biggest Slovenian web page (according to Alexa). Since they own two TV channels they’re advertising it with a short commercial that shows a glimpse of the new design. Another hint is a very very small, almost unreadable banner on their front page which “reads e-volution / evolution continues / next stage in [4] days”. What I want to know is whether it is to be an evolution in technology. That’s why I’ll list a few things I’d want if I was the client:

Semantic use of HTML (tableless layout)

The current page sports a fat table layout. The time of lame browsers and the need to create such a layout has passed and using semantic HTML for all the elements is the standard now. As a fan of XHTML Strict I’d also opt for that, allowing users to use the page as a source of content.

Width

The current page is 800px wide with a skyscraper banner on the right. I think a wider default with a hint of elasticity (that would make it almost or completely useful on smaller screens) would be a great choice. If elastic is too difficult I’d opt for 960px.

YSlow

The current homepage needs more than 180 request and more than 700kB to download. It takes about 5 seconds to do all this. I’m sure that with a little smarter use of CSS and image sprites these numbers could be much lower. A smart thing would be to move the static content to static.24ur.com so the browser could download all the resources faster. I’d also want the styles to be on the top and the scrips on the bottom. And since they use their own system to deploy banners I would expect them to use WEDJE to deploy them without stopping the site.

Microformats

Since all the content on a certain page is actually a news feed I would want them to use the hAtom microformat, with hCard for people and hCalendar for events and the TV schedule also possible. There’s no need to use propriatary format in the age of interoperability.

Blogs compatibility

I don’t think they should offer blogs, but it would be nice if they had a way to embed their content into blogs commenting on the current events. It would also be great if news posts would allow trackbacks so other people could see who blogged about the news.

Screen saver

I’ve noticed lately that when they have a few heavy banners that it’s important to close the tab the page is in to get the full power out of my computer. This could easily be solved with a screen saver JavaScript that would hide all the banners when a user doesn’t interact with it for some time.

OpenID

With OpenID providers around every corner I really don’t see why anybody would want me to register on their page anymore.

Can you think of anything else?

Related articles

Zemified

Posted in css, design, html, interface, javascript, microformats, openid, redesign, standards, technology, thoughts | 4 Comments »

« Older Entries