The Web Browser Choice is according to the European Commission a deal between The European Commission and Microsoft. The European Commission believes that Microsoft has taken advantage of their predominant position on the European market by providing Internet Explorer as the standard browser on Windows.

Therefore, Microsoft users that use XP, Vista and Windows 7 and has choosen Internet Explorer as their standard web browser will after a windows-update, be provided with a browser choice screen where they can decide that they want to use another browser than Internet Explorer if they want to.

As a web developer I really like this decision, since it can get us further away from IE6 and make unaware Internet users more aware of different browsers. I’m not sure how much effect this will have, I guess most users will wonder, what is this? Do I dare to click on this or will my computer explode if I do so?! I know a few persons that will have this reaction…

Event though I like it I don’t really like the idea that the European Commission can tell Microsoft they have to do this, even though they have a point. It’s not that you actually can’t use another browser than Explorer on Windows. There’s nothing that’s stopping you to install whatever browser you’d like on your windows machine. Why shouldn’t Microsoft be allowed to ship Internet Explorer with their OS? Why don’t the European Commission tell Apple to also provide this web browser choice window-thing?

Maybe we’re just not there yet or what do you think?

/Simon

As a professional designer, I think 737 px is a perfect width

Usually there are two ways to go when designing a website. Flexible or fixed width. A lot of people like fixed width since it makes it easier to control the look and feel. But if you choose a fixed width it doesn’t mean any width is as good as the other. You normally optimize for a certain resolution. This based on what you know about your visitors and their screens. So just any number, especially a number not divisible with hardly anything, like uhm… seven…, is a bad number. Common numbers today is 960, 980 but widths around a 1000 px like 1010 or even 1080 is increasing in popularity.

Using layer style is a nice way of getting a perfect colour

This is quite annoying. Opening a psd-file and using the color picker to get the colour of a plain element should, in my humble opinion, give you the right hex/rgb code. But if the designer has decided to use layer styles to get the right tone the color picker doesn’t work. Annoying!

I mean maybe it’s not right but you get what I mean, right…?

Using a certain width or margin in your design should mean that it’s what you want. If I’m working with a design with eight pixels padding on the left side I’m thinking the designer wanted eight pixels. But unfortunately this doesn’t seem to always be the case. I have come a across quite a few designers who think it’s ok to put approximate numbers in their designs thinking that the developer will in some magic way ”get it”.

What? Is there a difference between a website and a book?

A website is interactive. That means that depending on what the user do the look and feel of the site can and should change. That’s why it’s important to point out in the design how a link, button etc. is going to act when the user hovers or clicks. Put it in your design. Don’t make me ask you about it.

Screen captured text is cool enough

Same reason as it’s not cool to send the design as a jpeg. I might be a great frontend developer but it’s not fun having to guess font and font-size. Don’t put any screen captured elements in your design. This also goes for pictures who might end up looking really nasty in the end.

The client are not allowed to write more than 234 letters in this box

What do you mean not allowed? Again. There is a difference between a web site and a book. A good web design should not break because the client put in ”too much text”. And your design should show an example of that scenario.
Variation is a key. Let’s say we have an element which contains ”data”. The data might be text, images and links. A good design show different kind of ways this data might be displayed. Only text. Text and images. Only several images. Only a list of links. Little content. Lots of content. A real website does not consists of the same text repeated ten times.

Accessibility is only for geeky frontend people

I hate having to point out to people that this colour is real bad when it comes to contrast or this button is too small to be clicked by a person with shaky hands. Include accessibility from the beginning. And if you are insecure when it comes to contrast here’s a link: Color Contrast Comparision

Well, it’s already approved by the client so…

A lot of times when a design land on my table it’s ”finished” as in “it has already been approved by the client”. If I point out things like problems with contrast the designer just shake their heads and say “yea, maybe you are right but it’s too late now.”
In one way I do understand them. Some designers really have a hard time getting an approval from the client so of course they don’t like the frontend developer trying to make them change things. But seriously come on! It should not be too late.
And actually I have a perfect solution to this. I would like to suggest that every designer send their design to the developer for approval before sending it to the client. I really think this would help a lot when it comes to avoiding unpleasant surprises.

Final words. Communication is the freakin key people…

/Ida

Fast forward to 1998 when Jakob graduated from Berghs School of Communication and sets up the “Graceland Sthlm” advertising agency with a couple of friends. Over the span of two years the agency grew from 2 to 16 people, won some awards and worked with quite a few high profile clients.

After a merge in 2000 Jakob split and sold his shares, moved on to a smaller ad agency before going freelance in 2001.

You have just released an art book, tell us about it!

A few years ago I released an art book called “Color Blast vol 1″, a collection of illustrations I had done up til then. It was a chance for me to do a project where I called all the shots myself. No clients with requests and no limitations at all. It was such a kick to do that! Even doing the first book I knew that I’d like to do more in the future. This year I finally did.

The second volume is even fancier than the first one. 68 pages (compared to 52) and with a dustcover that looks great. It’s printed with a partial holographic foil which really makes the colors pop. I had been dreaming of using that kind of foil for a very long time, and for this project I finally did. Was really hard to find a printer who was willing and able to do it though, quite a lot of detective work involved.

The book is released in a very small edition of 500 signed and numbered copies, and they’re available through my website.

Are there any books beside Color Blast that you’d like to recommend?

There are lots of great books in the same genre (i.e. independently published art books in small editions). There’s also a really good book store called Stuart Ng Books. It has a terrible site, but a very good selection of books. Chris Sanders, who designed Lilo & Stitch, has three sketchbooks out that are gorgeous. The books of James Jean are also very nice. But the one I’ve been the most impressed with lately is a book by Kevin Dart. It’s called Seductive Espionage: The World of Yuki 7, and it’s such a brilliant concept and it’s perfectly executed.

I’m also a big fan of the Juxtapoz and Hi-Fructose magazines, they’re so perfectly tuned into me that I even like the ads in them.

What is the biggest difference between designing for web and designing for print?

For me it’s the fixed format in print. The biggest challenge for me is always to use the size of the screen in a good way. Or rather, the different sizes of screens. Since a website is being visited by so many different people, and seen on so many different screen sizes.

What does the future of web design look like?

I’d like to see (and do) stuff using the Z-depth, and not only the X-width and the Y-height of the screen. I think we could (and should) do some great stuff in Z-depth.

Do you have any recommendation for people from the print world beginning with web design?

Try to get comfortable with not having a fixed format to work with, and try to do something fun with the big RGB color space. CMYK is very limited in comparison.

What is the most interesting case you’ve had?

The MTV Japan Video Awards was one of the most rewarding projects I’ve worked on. I was asked to help out with some character design and turnarounds for a campaign that the Dutch ad agency “Kessels Kramer” were working on for the Japanese MTV. I did quite a lot of construction design for this big mascot that would be sculpted in clay in China.

It was also modeled and animated in 3d by a Swedish production company called “Fido“. And I did a bunch of poster illustrations that were beautifully designed by my fellow Art Director Nils-Petter Lövgren who worked at “Kessels Kramer”. The best thing about this project was that we were all these people, spread around the globe, and that we all brought our expertise to the table, and made each others stuff so much better than it would have been on it’s own. We were ”plussing” each other.

Can you tell us about your relationship with Hellboy?

I’ve been a big comics fan for as long as I can remember, and in 1989 there was a Batman comic called “Gotham By Gaslight” that I fell instantly in love with. It looked so good! A few years later I discovered “Hellboy“, and it turned out it was done by the same guy, Mike Mignola. Ever since then, I’ve been keeping my eyes on any- and everything he’s been doing.

In 2001, over the Christmas holidays I made some Playmobil customs, where I turned regular Playmobil Police officers into Hellboy and his friends. They turned out pretty cute and I posted them over at the Hellboy forum where other geeks like myself use to hang out. The photos were very well recieved and to my big surprise I also got an email from the Mignolas where they asked me if I’d be willing to make a set for them, as a commission. Needless to say, I was.

So I spent a lot of time making Hellboy and his fellow agents, and also his enemies from the first graphic novel. 10 different characters in total. In the summer of 2002 I took the custom made box and went to San Diego Comic Con (where Mignola was) and presented the set to him. He was very happy to see them and I had a great day. People were coming up to me asking about the figures and saying how much they liked them and how they thought someone should get them into production. Even now I get a few emails a year from people who have questions about the figures.

How do you tackle creative blocks?

I sleep badly and try to force my way through them. Leafing through books and websites can help too. But I don’t believe in waiting for inspiration. I mean, there’s usually a deadline.

Where do you find your inspiration?

In books and music. I don’t know how many illustrations that have been inspired by lyrics from songs I like. Good lyrics usually make images appear in my head.

Do you listen to music while working?

I do, all the time. As soon as I get to the office I put something on. When I leave the office I plug my headphones in and when I get home I usually put the same playlist on there.

What kind of music?

Lately I’ve been listening a lot to Owl City and PlayRadioPlay. They both come from my longing of a new album from Postal Service.

Is there any kind of artform that you’d like to explore more?

Yes, 3D. Not necessarily to do it myself, but I’d love to be involved in more projects where I design stuff that’s turned into physical (or digital) 3D. The stuff I’ve done so far have been really fun to work on.

Do you want to know how the web developer will grade your work and how you can improve the end-result of the entire project and cut costs? Read on.

Background

As many of you know, when you convert a design into a web site, the developer needs to be able to separate almost everything in your design into pieces. Like show and hide things, merge stuff there and here and so on. This has to be done to be able to extract the graphical elements that the web developer will use in the markup/css. This is, for instance, one of the main reasons why web developers don’t like to get the design as .jpegs. Stop sending us .jpegs!

If the .psd (or whatever it is you’ve made your design in) is logically divided into grouped layers with descriptive names (such as header, footer, search form, btn-background) etc where you easily can show and hide groups and layers and swap between your two-column and one-column layout with just a click or two this can make a huge impact on the final result.

What can happen if i fail?

If you don’t succeed with this it can, for example, lead to the following unwanted things:

a) When most developers budget their work they reckon that the design is easy to work with. If you’ve made a poor job the developer will need to spend more time on converting your design which will increase the total cost of your project. If you’re on a tight schedule (which you most often are) the launch of the website will be postponed. Which in turn will lead to a disappointed customer.

b) The end result. How your design actually will look and behave like in a browser. If the end result differs to much from your design the customer will be disappointed.

c) Your reputation as web designer amongst web agencies. If web agencies think you know how to design for the web they’ll want to continue working with you. If not, they might seek help elsewhere. Every webdesigner should have common knowledge of how to build a website. If not you’re just guessing how to do things and people will start screaming “Fake! He’s a fake!” when they meet you out on the town on a friday-night.

I’ve come across a wide variety of designs and there’s a lot of examples of what you shouldn’t do.

Example #1

Sometimes you get a .psd where the layers has no structure or logic whatsoever. All layers have been named Layer 1, Layer 2 and so on and they haven’t even been placed in layered comps. That is just crazy and the web developer will rip his/her hair off trying to figure out where to find what and say “WTF? Has the designer gone bonkers?!”

Example #2

One other example is when you get this .psd with a lot of layered comps but the actual structure of the layers is all spread out. You can swap between different views by using the layered comps but as soon as you need to hide a layer or something you have no idea of where to look. This is also crazy. Don’t do this!

What should I do?

So we’ve talked a lot about how you shouldn’t do but you might say, “Well, how should I do?”

My personal opinion is that you should use your common sense. Ask yourself the question “How should I do this to make it easy to understand and easy to work with for others?” If you structure your layers into logical sections you won’t need layered comps. I don’t say you shouldn’t use them, there are a situations where they come-in-handy, but think of them as a supplement.

It should be mentioned that many designers does a great job and has great skills when it comes to do this.

If you have any other ideas or think I’m crazy, please comment!

/Simon

Noone should have missed all the hysteria about the iPad which has practically been spamming every corner of the internet. I just assume you all know what I’m talking about here. (If you have been living under a moss-covered rock then catch up. )
Ok, the thing isn’t available on the market yet. Boooring. But what is available is a lot of funny jokes. (yay!) So, uhm, I just couldn’t help myself. Had to post some…

There, I fixed it

First we have the “there, I fixed it“-joke. Not so funny. Steve God Jobs with some duct duck taped iPods. I was like ha… eh?

Source: http://devdaily.com

Cuteness

Secondly, the cute joke. I mean who doesn’t go “Aww” every time a Super Mario Muschroom pops up. And it’s simple math: iPod + Mushroom = iPad

Source: http://www.showbizgossips.com

Embarassing

I guess people felt forced to drop jokes like this one when they first heard the name.

Source: http://www.buzzfeed.com

More embarassment

A bit fancier package though. I wonder what drives people to spend hours in photoshop creating stuff like this? (Maybe the same that drives me to post their work here.)
Source: http://twitpic.com/1047tl

Extremely Embarassing

Ok, I’m officially not of the same gender as the people in this video. Period.

Comedians overjoyed with greatfulness

I guess they usually have to work and struggle to get their jokes?

Source: CollegeHumor.

Stages of Grief

Well, I guess I never should have post this…

Source: http://www.buzzfeed.com

So I guess we can leave the jokes for now.
Have a nice week people of the internetz!

/Ida

ColorBox

• jQuery 1.3 and up
• Size: Less than 9KB
• My personal favourite. Very light weight, Utilizes jQuery and has a very well formed CSS.
• Get ColorBox

ShadowBox

• Works Standalone but supports both jQuery or MooTools
• Size: 1,2 Mb (full package)
• Works with both MooTools, jQuery and by itself. It is very configurable and has a well documented API. Unfortunately this ubiquity shows on the file size.
• Get ShadowBox

Slimbox 2

• Library: jQuery
• Size: 4 Kb
• As seen above, extremely light weight. It also has a little sister running MooTools for those in favor of that, also at 4kb.
• Get SlimBox 2

FancyBox

• Library: jQuery
• Size: 366 Kb
• For all you fancy pants mac people. Nice easing effects and transitions
• Get FancyBox

FaceBox

• Library: jQuery 1.2.1 and up
• Size: 7.1KB
• If you ever need a face bookish modal box it doesn’t get much better than this.
• Get FaceBox

There are obviously a lot more JavaScript modal boxes out there but these are our favourites. You may also consider writing your own modal box. The benefits are that your modal box will be custom tailored for the project and you get exactly the behavior you’re after. On the down side it can be a bit time consuming.

Do you have a favourite? Tell us in the comments!

Why would I need to convert?

• You are tired of using entities for foreign characters. Hate using things like this ŵ (← very common character… uhm… )
• You are going to merge your web site with another website. (Which has a different encoding.)
• You want to write in more languages. (I’m talking about languages as in the languages people speak NOT programming languages.)
• When generating emails and sending data you have problems with weird signs.
• You are mad because ISO-8859-1 doesn’t contain an euro sign (€). (Isn’t that quite funny? I mean it’s encoding especially suited for the west of europe. Yea, yea € I know. But still.)

There are more reasons. Feel free to add those in the comments.

The biggest reasons “back in the days” to use ISO-8859-1 was that it had slightly better support in older user agents. Well those old agents are pretty much gone by now. Who still uses Netscape 4? Hands up! Anyone? Well, that’s what I thought.
All in all UTF-8 is, in the long run, more fit for the future.

Don’t go to hell

So what do I mean by “Encoding Hell”. Well those who has been there know what I mean. It’s when you just switch encoding without properly converting your data and you end up with letters looking sÃ¥ här (that’s the word “så här” meaning “like this” in swedish.) I got this nasty letters by opening a file with UTF-8 encoding in my text editor using ISO-8859-1. And guess what? Opening with the right encoding doesn’t switch the letters back. They are stuck looking nasty. I’m in hell!

Well this was only one file and sure you can change the letters manually or by using some fancy search/replace-command. But think about if you made this mistake with hundreds or thousands of files? Not nice. Big hell!

Do it right from the beginning

The best thing is to avoid Encoding Hell all together. Choose the right encoding from start and you are safe.
But if you must change. First thing. Be careful! If you are careful you will save time. Make up a converting-encoding-plan first so you know exactly what you are doing. Just don’t start testing. My advice is to always start with a backup. Backup everything you want to convert. If you have a database connected to your webpages don’t forget to back up that one as well.

Converting your files

Don’t even think of converting your files by using your text editor. It usually turns out nasty. There are tools to help us out with this. You can use the terminal/the command prompt to convert things. Me, myself, I have tried out “Encoding Master” which I think is simply brilliant. Easy to understand and it converted everything very nicely. It’s also supported by both PC and Mac.
Don’t forget to add/change the encoding in the headers of the webpages too.
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

Converting your database

Be careful here. Don’t start adding UTF-8 encoded data into your old database. Make sure it’s converted and pretty first. Otherwise you might end up with a messy mix and bang! You are back in hell!
To change the encoding of your database you must change the encoding of everything. The database itself. Every table in the database and every column that includes some sort of text-value. I’m talking about data of type: char, varchar, tinytext, text, mediumtext and longtext.
Since I lately been working with PHP and MySQL the following will apply to them. If you are working in other languages and other databases you probably need to do some further research to see what is the right methods to use.

To change the databse itself use the following query:
ALTER DATABASE my_database charset=utf8;
To change a table use :
ALTER TABLE my_table charset=utf8;
To change a column in a table use:
ALTER TABLE my_table MODIFY my_column TEXT CHARACTER SET utf8;

Make sure everything in there uses the character set utf8 and collation utf8_unicode_ci. Ok?

Encoding in PHP

If you are coding in PHP you might have problems with the MySQL and PHP talking UTF-8 language. Solution to this which worked for me was to send the following query:
SET NAMES 'utf8' COLLATE 'utf8_unicode_ci'; This must be done right after connecting to the database.

From Simon comes this handy tip to those of you who are using MySQLI together with UTF-8:
(With error-handling included as a bonus…)

$mysqli = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD,
DB_DATABASE);
if(mysqli_connect_error()){
throw new Exception('Connection failed
due to the following error: '.$error);
}
if (!$mysqli->set_charset("utf8")){
printf("Error loading character set utf8: %s\n",
$mysqli->error);
}

It could also be a good idea to add the code below to the beginning of the PHP-files.
mb_language('uni');
mb_internal_encoding('UTF-8');

Last but not Least…

Always research carefully before changing your encoding. Especially if you are a converting-virgin and are changing the encoding for the first time. Never rely solely on one tutorial. Not even this one which, I need to admit, is not covering everything. This is pretty general info. Hey, you can write a book about encoding and the struggles with converting. So remember to look around. Ask people. Start with a backup. Always. And, again, be careful!

Happy Encoding!

/Ida

Be Proud!

We are craftsmen and we take great pride in our work. And we should, even though we may only be a couple of small pixels in a big jpeg (or a stone in a cathedral if you will), cause our profession involves a lot of hard work and responsibility. I remember writing funny limericks or scrawling down funny pictures of work mates inside of walls when I was was working as a construction worker. The thought that, one day someone is going to rebuild this place and discover my witty scribbles inside a wall, amuses me.

In Handcrafted CSS, Dan Cederholm demonstrates how he leaves his mark on his creations (an ASCII beer in the bottom of his code). We should all have a witty tag to leave inside our code cause some day your code may be refactored. And doesn’t knowing, that someone is not only going to see your code but also a piece of your personality, make you all fuzzy inside?

For inspiration, click view source on SimpleBits and look up the beer tag right before the tag and/or visit this thread on stack overflow.

Down sides

There are some down sides of being in our profession as well. For example, you are really good at insulating buildings and you have insulated many buildings without any complaints, but one day you mess up, you use the wrong type of insulation and you get complaints from cold residents. So the only time you get feedback is when something goes wrong. I’m sure we all have had similar experiences in web projects and one of the things that makes up for this (for me at least) is being able to point at something and say ”I helped to build that” weather it be your grandmothers retirement home or a buddies twitter application.

A word of advise when you do mess up though is to not go the Microsoft way and say your supposed to wear to pair of socks in that building. Instead stand for your mishaps and offer ways to correct it.

Metaphors

I have to plug the books which inspired me to write this post. Both of them have very cool metaphor examples and my favorite right now is one from The Pragmatic Programmer. It’s called The broken window theory. In short this theory says that if you leave a broken window in a building it will give the residents a sense of abandonment and one broken window leads to another and people start littering and graffitiing the building. And finally the building will be totally tarnished.

This is very applicable on code to. If you leave bugs, bad naming conventions or temporary solutions etc unaddressed, you will soon end up knee deep in software rot. But if you keep your code clean and neat without any broken windows, no one is going to want to be the one that breaks a good rut.

// Johan

Past (that is the old year of 2009)

• We have two new writers (Johan and Ida)
• We are now on Twitter ( @swedishfika )
• We had a peek of more than 3000 pageviews on July 20
• Our most popular post this year was
  1. IE6, Let US Deal With All This Hate!
  2. Need To Test Your Website In IE6 It’s Easy With IETester
  3. W3C Valid HTML ≠ Good HTML

Future (that is the brand new year of 2010)

• Our goal for this year is to write at least one post per week. We have joined Project52
• Our New Year’s resolution is to try to keep that “Project 52″-commitment and get together for beer and rant more often.
• There is a new design in the pipeline which will be rolled out some time within the year.

Help us with our resolutions

We would be happy to get some input in what to post during this year. We feel pretty inspired right now. But who knows when the writing drought will hit us and we will sit with empty heads in front of our keyboards? So what is interesting to people? Interviews? Tutorials? More philosophic web-articles? Competitions?
Feel free to leave a comment below. The first ten suggestions will be rewarded with either a Spotify-invite or an invite to Google Wave. Don’t forget to write what you would like.

While waiting…

While you wait for all this awesome stuff to happen remember to follow us for updates on twitter

Happy New Year everyone!

/ Simon, Ida, Alex and Johan

My first impression of his new book “Crush it!” was not very imposing. It was thin, the pages where ruff and the cover was kinda shrill, felt like the kind of book you buy from “life coach”-ranters.

The opening sounds like sales talk from TV-shop and got me really put off. At that point I was really disappointed and sceptic about the whole thing. I saw a comment somewhere saying that “the book was dictated and that shows” while the first part is very true the latter I do not agree with at all. As you continue reading the salesy tonality dims down and you can almost hear his creaky voice through the pages.

For a 15 year old the obvious way to make you’re self heard is through what “old people” call social media. They don’t care what banners say, they care what their peers say. Media agencies seem to ignore that fact and continue to pump out flash banners untargeted and in every direction they can. What they need to realize is that that market is dying as the “young generation” turn in to a more mature one. Even if this book is not intended to be a “social marketing guide” this is exactly what it is and a lot more. Gary is not one of those self proclaimed Social Media gurus. Ok, maybe he is, but he knows what he is talking about and makes some very good points even though his honesty and straightforwardness can come across a little harsh and salesy. This takes a little while to get used to.

The book is stuffed with exemples on how to turn your interest and passion into your living. Many of them real life exemples and some very fictional but the bottom line is that, as Gary would’ve put it:
“There is no reason in this day and age to do shit you hate. You can lose as much money being happy as hell.”

He talks a lot about honesty and transparency on which I agree very much but there are also parts I don’t agree on. For example, he says “do what you’re DNA say you’re good at”, in my opinion you need to do stuff you’re not good at in order to figure out what you are good at.

All in all I think this was a very good book with a little bit of a wake up punch in it. Read it with a bit of scepticism (as you should with everything!) and take only what you felt was good from it.

Gary really understands that dialogue is > than monologue even though he is a master of both. When I tweeted out I was reading the book I got an enthusiastic “yes!!!!” back from him.

// Johan