Archive for the ‘web design’ Category

Tuesday, March 16th 2010

Internet Explorer 9 on the way

It looks like Internet Explorer 9 will have quite a few nice new features for web designers and developers!

Microsoft are demonstrating some of the new browser’s capabilities here. They include rounded borders, CSS3 Selectors, JavaScript speed to match Firefox 3.6 and many more things.

I must say I’m quite impressed, although I haven’t actually downloaded and installed the preview yet.

Screen Shot of Internet Explorer 9 demo site

But why can’t they just call the test version IE9 preview or something logical. Internet Explorer Platform Preview??

Thursday, May 14th 2009

The Need for Speed

At the end of March, we launched a new version of our website at Eskilstuna-Kuriren, ekuriren.se. We replaced our ancient content manger with a new, modern, flexible system known as Polopoly. Polopoly is developed in Sweden and used by many of the large Swedish news sites.

The launch went smoothly, but soon we started getting e-mail upon e-mail from users about speed problems. After a while it turned out that many Internet Explorer users were having huge problems both loading the page and scrolling the page.

Apparently, when loading the website in Internet Explorer it can sometimes make the whole computer slow down to a halt, forcing a hard reboot. If you manage to load the page, it can scroll painfully slowly.

Obviously, this mainly shows that the site hasn’t been properly tested. A huge majority of our visitors use Internet Explorer. Or at least they used to. Perhaps the percentage has gone down now, from people simply giving up on us. It truly amazes me how the developers still haven’t properly managed to sort out the performance issues. They have supposedly been working on this from day one, which is almost two months back now.

While I still haven’t actually heard a precise technical explanation of what the problem is, this experience shows in a very tangible way how big a difference there is between Internet Explorer and the more modern browsers when it comes to speed. Whether it is the scripting engine or the rendering engine or something else that is causing the problems for Internet Explorer users I don’t know.

What I do know is that we simply haven’t had a single complaint about performance from Firefox or Safari users.

Here’s to hoping that the site admins get the issues sorted as soon as possible and that all browsers will be able to display our news site without the user suffering serious illnesses from frustration.

Thursday, May 7th 2009

IE8 Sorted

After finishing my slight redesign here I found that IE8 made a complete mess of it. Turned out of course that I had forgotten to change the doctype into something other than XHTML Strict, which IE still doesn’t understand.

I went with the nice, simple HTML 5 doctype, which seems to be the best option:

<!DOCTYPE html>

That was all that was necessary and now, miraculously, my blog looks … decent in IE8! Looks like it has finally understood my max-width rules as well! Amazing stuff.

Thursday, May 7th 2009

New Design Done

Well, this is the new modified design. Nice and tight and snug! Obviously the font size in the left column isn’t web 2.0 compliant, but you can’t get everything.

For comparison, here’s a screenshot of what it used to look like:

Screenshot of my old blog design.

So what has changed? To start with I removed a couple of things from the right column and moved what was left to the left column. Then I made the left column quite a bit tighter to allow for 1024 px images in my posts. I tried to use a sans-serif in the left column but the combination looked really weird.

I decided to revert my choice to use a downloaded font, for two reasons: A, i find Georgia is actually prettier than Dustismo and B, I don’t really like how Firefox 3.5 (beta) deals with downloaded fonts at the moment.

Firefox will display the page with the fall-back font first, and then redraw the page when the @font-face font is downloaded. This behaviour is annoying when viewing the page – Safari does this much better. Safari simply waits with displaying the text until the font is downloaded.

While I was fiddling with the design I decided to remove the alternate stylesheets for a slight simplicity win.

I have considered implementing columns in my posts, but I’ll need to think that through properly first.

Edit: Argh!! Internet Explorer 8, supposedly CSS 2 compliant, messes the design up completely. I’ll have to look into that some other time.

Thursday, May 7th 2009

Test post

This is just a test to see if large photos actually are visible if you’re not logged in to Flickr.

22913-22915 - HDR

Edit: My blog may look more or less weird while I mess around with the design. Sadly I have no good way of working on it offline.

Wednesday, May 6th 2009

Blog Redesign?

I’m thinking of perhaps redesigning or at least re-arranging this blog a bit. I want to try to make one side column instead of two, mainly to allow 1024px photos in my posts. This is 2009 and it feels just a bit 2004 to have what feels like 500px thumbnails. (On a side-note: Why hasn’t Flickr increased the default photo size yet? Surely they must do at some point?)

I’ll make sure the new design fits on a 1280px wide screen though. That’s what I have myself and obviously the world will just have to adjust if they have anything less.

Wednesday, April 22nd 2009

New Font

I decided to play around with web fonts and came across dafont.com. They have a great selection of high quality free fonts.

I found Dustismo Roman which I’ve now decided to use on this blog. Anyone using the upcoming Firefox 3.5 or Safari 3.1 will be able to see it. Everyone else will see Georgia, which also is a nice font.

By using @font-face rules in your CSS code, you can use any font you like! I.e. you aren’t limited to the system fonts that are common to Mac and Windows. Read more about web fonts here.

Monday, February 16th 2009

Unbelievable

Microsoft have done it again.

Did anyone really think they had turned good?

Tuesday, September 16th 2008

IE8 and max-width

Internet Explorer 8 beta 2 is behaving pretty strange when it comes to max-width. (And min-width?) It seems to cope with it sometimes, and sometimes not.

It passes the Acid2 test (which tests both min/max width/height). It also seems to cope perfectly well with this test page.

So why doesn’t it cope with the max-width rule I have in the CSS of this blog? I haven’t managed to work it out anyway. IE8 b2 doesn’t obey my rule that says paragraphs should be a maximum of 30 em units wide.

I have tried debugging the behaviour by changing various factors in the stylesheets but nothing seems to help. If anyone happens to know about this bug, please leave a comment.

Edit: I finally found the reason for max-width not working. This blog used the XHTML strict doctype which IE8 doesn’t understand. Now I have changed it for the HTML 5 doctype and it works beautifully.

Tuesday, September 16th 2008

Fun with CSS

A few days ago I sat down and played around a bit with CSS text-shadows on my blog.

Here’s what I ended up with. It will be visible if you’re using Safari 3+, Opera 9.5+ or Firefox 3.1+:

Screenshot of my blogs title in Firefox 3.1 alpha 2

Here’s the code I used to get this effect:

text-shadow: 0 0 0.45em #fff;

… Which can be interpreted as… Create a shadow 0 distance to the right and 0 distance below the text. Blur it 0.45 m lengths and make it white.

Now, if this had been 1998, I would have applied several shadows (yes, that’s possible too, for some crazy reason) to all the text. It would have looked cool, for about six seconds, at which point you would begin to feel sick.

Since this is 2008 and I’d prefer to keep the few readers I have, I’ll just leave it at the white glow effect on the title.

Writing this post, I also decided to ditch the semi-transparent PNG image I have used for the hovered links. Instead I replaced it with a semi-transparent CSS3 colour:

background-color: rgba(255,255,255,0.30);

… Which means … Make the background colour white, but make it only 30% visible.

This is what the title looks like in Safari 3 and Firefox 3 when hovered:

Screenshot of my blog title hovered

No images, just some simple CSS code, er, baby! (Well, the N in the background is still an image, I’ll maybe get to changing that some day as well.)

You can read more about transparent colours here. And about text shadows here.

Edit: Well, as you may have worked out, I have also set a border radius for the light hover background:

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;

Since the standard isn’t finalized, the browsers have their own prefixes for this setting.

Rounded corners look best in Firefox 3 (smooth!) but also work in Safari 3. Read more here.

Sunday, April 6th 2008

Blog Design Tweak

I just removed the the borders around the sidebars to make things a little cleaner. I realized they felt a little out of place somehow.

Sunday, March 30th 2008

New Blog Design

If you’ve been here before you might have noticed the new design. I got inspired yesterday and thought I should have one if those hip dark wallpaper pattern inspired blog designs.

If you still see my old default design, the Tech Blue, just click Dark Pattern at the top of the page.

I started off by finding a suitable pattern for the background. I found this one:

Black and white pattern background

at theinspirationgallery.com, inverted it and used curves to make the pattern a dark grey.

To increase the readability I added a see-through (40 % opaque) black to the main section using the following CSS3 declaration:

#main {background-color: rgba(0, 0, 0, 0.4);}

This is what it should look like:

Screenshot of David Naylor's new dark blog design.

So far, only Firefox 3 and Safari 3 have support for semi-transparent colours (RGBA/HSLA), but I think the text is fairly readable even if you don’t get the darker background. Hopefully the number of Firefox 3 users will increase to about 20 % when it is released this summer, thanks to the auto-update feature of Firefox 2.

I’ve also changed the font to Lucida Sans Unicode (Lucida Grande on the mac), inspired by John Lilly’s blog. I decided to use it for both titles and text.

And here’s what a quote looks like:

I may not have gone where I intended to go, but I think I have ended up where I needed to be.

Douglas Adams

Overall I’m really pleased with the new look. Do shout if you find any annoying bugs.

Thursday, December 20th 2007

IE8 will pass the Acid 2 test

This is seriously good news for everyone who is planning on making a website in the coming 10 or so years.

What does it mean? Well, here are a few things:

  • The IE team must have started working on IE8 roughly at the same time as they started work on IE7.
  • Finally, IE will support CSS min- and max-widths. (Which I use on this blog to regulate the width of this main column.)
  • Loads less IE layout bugs: Web designers and web developers will be happier at work in the coming decade.

However, there is a big however. The IE team speaks of some kind of switch to make IE8 work in IE8 Standards Mode. Let’s just hope they didn’t choose a non-standard way for websites to request standards mode… (I.e. I hope they’re going to stick with the transitional vs. strict doctypes for quirks mode vs. standards mode.)

Tuesday, May 22nd 2007

Redesigning Rarewares.org: Part Deux

The Rarewares redesign is almost done now.

Roberto was hoping to push the new site yesterday, but then he realized he (or Michael) hadn’t transferred the contents of the Debian pages yet.

He settled on my turquoise and orange colour scheme, so this is what the site will look like:

Screenshot of new Rarewares site

A little different, but quite easy on the eye I think. And, I guess, different is good. Obviously, both Roberto and I think less is more and more is less.

If you’re using Firefox or Opera, you can see the nominated colour schemes I made by clicking [View] > [Page style]. (Or something like that… I’ve got the Swedish version installed here.)

Edit: The roll-out menus still behave rather weird in Internet Explorer 6, but I guess that’ll give everyone a good reason to upgrade to something a bit newer or better. I was trying to make them work perfectly in all browsers, but in the end I gave up and did what I always do: Reward those with new browsers and avoid killing yourself over people with old ones.

Saturday, March 10th 2007

Redesigning Rarewares

I’m working with Roberto de Amorim on a redesign of rarewares.org. Rarewares is a great website with all thinkable music encoders and decoders.

For instance, if you want the latest and greatest versions of Oggenc or Lame, rarewares is the place to go. If you don’t know what Oggenc or Lame are, I’d consider that a sign of sanity. Anyway, they are what you use to compress music to Oggs or MP3s.

Cropped screenshot of the preliminary redesign or rarewares.org.

The main reason for the redesign is that the rare wares aren’t quite so rare any more. The download pages are getting very long and crowded, so Roberto wants to divide them into different sub categories.

I’ve put a preliminary version of the new front page on my server. We’re thinking of trying a different colour scheme, and possibly a few other changes, before we make all the content pages.

Saturday, October 21st 2006

CSS3 Teasers

Some of these CSS3 previews show just how far behind Internet Explorer is when it comes to the latest and greatest in CSS3. Nice features such as HSLA colours are already being implemented by other browsers!

HSLA colours are a very nice thing indeed. Instead of defining a colour as Red, Green and Blue, web designers of the future will be able to choose Hue, Saturation and Lightness, as well as Alpha, an opacity value.

That means it will be much easier to guess-pick colours when you’re coding. Also, making a colour semitransparent will be a very nice possibility for backgrounds. (No more semitransparent 1px png graphics!)

Then we have rounded borders, which is already being used around the web, since it degrades nicely (into square corners).

Another promising feature of CSS3 is columns. Currently, only Mozilla browsers (Firefox 1.5+) support this in any way. The idea is that you will be able to set a column width as well as spacing, and the browser will calculate how many columns to fit across the screen. Alternatively, you can define how many columns you want, and the browser will adjust their width to fit the space provided. A List Apart has a very nice article on the subject.

If you’re really intersted, have a look at what the W3C are working on right now, the different modules and their specs. CSS3 is still work in progress, so only a couple of the modules are even close to the recommended status. (I.e. implement now! status.

Sunday, July 30th 2006

Serious Layout Bug in Opera

After redesigning my photography website today, I noticed that Opera 9 has a fairly serious rendering bug:

I don’t understand what I’ve done to make it do that… The CSS for H1 is here:

h1 { font: 220% Georgia, “Gill Sans MT”, “Trebuchet MS”; margin: 0.5em; letter-spacing: 0.25em }

h1 a { border-radius: 0.5em; -moz-border-radius: 0.5em; padding: 0.2em 0.4em; background: #eee; opacity: 0.5 }

h1 a:hover { opacity: 0.65 }

Maybe Opera applies

h1 * { display: random }

by default?

Monday, February 20th 2006

See-Through CSS Colours in Firefox 3

The bug for rgba and hsla css colours has just been fixed on the Firefox trunk. That means it will be released with Firefox 3, in about a years time.

Can’t wait till we can start playing around with semi-transparent colours… Also, the hsl colour model is very nice – making it possible to think in hue, saturation and lightness when choosing colours. Very nice 🙂

It’s just a shame that Firefox 3 is so far away.

Edit: Fixed an error. (Had written brightness instead of lightness.)

Wednesday, February 8th 2006

New Colour Schemes

I’ve made a different set of alternative colour themes now. The old ones were rather hard on the eyes. Hopefully these new ones are better. If you don’t get any colour at all when you’re reading this, clicking one of the links at the top should fix it.

Monday, February 6th 2006

Blake Ross’s Web 1.0 Website

I just found a real gem. It’s the personal website of Blake Ross, aged… hmm – 18. (The website states that Netscape 7.1 has been released, which means that it must at least have been updated sometime since June 2003. Blake was born in June 1985.) That basically means that it has to be a joke. I hope it is. It must be. And a pretty sick one at that. If you read this, Blake, could you give some clarity on this insanity? 🙂

I must be the first person to have listened through the whole embedded midi track…