Archive for the ‘web design’ Category
Tuesday, March 16th 2010
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.

But why can’t they just call the test version IE9 preview or something logical. Internet Explorer Platform Preview
??
Tags: CSS
Posted in browsers, Internet Explorer, Mozilla Firefox, web design | 1 Comment »
Thursday, May 14th 2009
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.
Posted in Eskilstuna, Internet Explorer, Mozilla Firefox, web design | 1 Comment »
Thursday, May 7th 2009
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.
Tags: CSS
Posted in Internet Explorer, web design | 3 Comments »
Thursday, May 7th 2009
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:

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.
Tags: Apple Safari, CSS
Posted in Mozilla Firefox, web design | 3 Comments »
Thursday, May 7th 2009
This is just a test to see if large photos actually are visible if you’re not logged in to Flickr.

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.
Posted in web design | 2 Comments »
Wednesday, May 6th 2009
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.
Posted in web design | Comments Off on Blog Redesign?
Wednesday, April 22nd 2009
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.
Tags: Apple Safari
Posted in Mozilla Firefox, web design | Comments Off on New Font
Tuesday, September 16th 2008
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.
Posted in browsers, Internet Explorer, web design | 5 Comments »
Tuesday, September 16th 2008
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+:

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:

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.
Tags: CSS
Posted in web design | 4 Comments »
Sunday, April 6th 2008
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.
Posted in web design | Comments Off on Blog Design Tweak
Sunday, March 30th 2008
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:

… 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:

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.
Tags: CSS
Posted in web design | Comments Off on New Blog Design
Thursday, December 20th 2007
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.)
Tags: CSS
Posted in browsers, Internet Explorer, web design | Comments Off on IE8 will pass the Acid 2 test
Tuesday, May 22nd 2007
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:

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.
Posted in web design | Comments Off on Redesigning Rarewares.org: Part Deux
Saturday, March 10th 2007
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.

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.
Posted in web design | Comments Off on Redesigning Rarewares
Saturday, October 21st 2006
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.
Tags: CSS, Mozilla
Posted in browsers, Internet Explorer, Mozilla Firefox, web design | Comments Off on CSS3 Teasers
Sunday, July 30th 2006
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?
Tags: CSS, Opera
Posted in browsers, web design | Comments Off on Serious Layout Bug in Opera
Monday, February 20th 2006
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.)
Tags: CSS, Mozilla
Posted in browsers, Mozilla Firefox, web design | Comments Off on See-Through CSS Colours in Firefox 3
Wednesday, February 8th 2006
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.
Posted in Uncategorized, web design | Comments Off on New Colour Schemes
Monday, February 6th 2006
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…
Posted in Uncategorized, web design | Comments Off on Blake Ross’s Web 1.0 Website