I’m going there together with three of my co-workers and you can follow our epic JavaScript adventures at http://creunaatfullfrontal.tumblr.com.

Please do!

/Ida

Ps. Will of course post a full summary of the conference once I’m safely back home again…

These articles aren’t about trying to force people into something that will steal time and hurt the overall design of their projects. My intention with these articles, as I mentioned in my comment, is to raise some sort of awareness of accessibility among designers. I’m of the strong opinion that the web should be open, free and accessible to as many people as possible regardless of equipment or physical state. I do not agree with people who think the web should only be accessible if you got the latest in technology or a perfect health. Of course it’s not always possible to accommodate for everyone. But having accessibility in mind doesn’t cost anything. I would also like to point out that the tools I link to in these articles are simple test-tools that requires a maximum of minutes in test time.

What about colors?

So back to the topic. There are two things I would like to point out regarding colors. First: I love color. No that’s not it. First: (second try). All colors doesn’t look the same on all devices and screens. This is important to remember. Secondly: There are some combination of colors that some people have trouble to different between. Yes, I’m talking about variations of color blindness. Between 7 – 10% of all males are affected by the red-green type. Because of this it’s necessary to make sure that the most important elements on your web site is easy to distinguish. Elements to check may be navigation, buttons that leads to different kind of actions and other important information.

How do I test my colors?

There are several cool tools out there. I will mention a few here.

1. One really cool tool available for Mac is Sim Daltonism. With it you can simulate different kinds of color blindness and look at your design in a way a person with color blindness would.
2. Coblis – Color Blindness Simulator is an online tool that lets you upload an image to check for problems.
3. Colorfilter is another online tool that lets you test a website. I don’t really know how useful like this is since when there is a live web site it’s usually too late or extremely hard to adjust things.
4. Send your design to friends. Yes, I know. This is not a tool. But consider sending your design to some friends. If possible friends with color problems and ask for their opinion. If nothing else they might be able to track down problems in colors due to differences in screens and devices.

If you feel an urgent need to find out more about color blindness the blog “Grey Means Go” offers some nice reads.

That’s it for now.
Have fun designing with colors!

/Ida

What?

Ok, it’s HTML5. And yea, it’s the new buzz word. And yup, this book is about that cool new thing. So let me tell you what you’ll find in this book. You will find out a bit about the history behind HTML5. You will learn a bit about what’s included. And what’s not included. No CSS3. Of course. Yes, I know CSS3 is cool too but you need to pick up another book for that. CSS3 and HTML have never and probably never will be the same thing.

Who should read?

Look at the title again. See that word? Designers. Exactly. If you are a web designer trying to improve your knowledge in frontend and get the hang on what’s new and exciting this book is for you. I would also dare to say that this book is not unfit for anyone working with the web. Really. The language is smart and not hard on you. Good words and the tone is delightful. (Always wanted to use that word.)

Who shouldn’t read?

If you have closely followed what’s been happening on the web during the last six years I would say that this book got no news for you. The same goes for people who have read every article in HTML5doctor, diveintoHTML5 and have feasted on the specs of WHATWG and W3C. This book didn’t gave me any revolutionary news. I guess I’m too geeky with my feeds. (If this did sound like I’m a cool enlighted web dev that’s on top things… well… well… then you can think of me as a cool enlighted web dev who is on top of things. ) Even so this book is enjoyable. If not for mere reason than boosting the ego and feeling like you actually know something.

Aight. Me be out.
Not feeling comfortable about boosting my ego in public.

/Ida

Ps. If you don’t care to read/buy this book you might enjoy this talk by the author Jeremy Keith

Why this a11y stuff?

”Did you test this design?” That’s a question I want to ask sometimes when I get a psd-file for a new web site. Sometimes I do ask. Sometimes I go ahead and make some tests myself. What tests? Well there are many tests you can do to make sure that your design is right. I felt like I couldn’t cover them all in one post. So instead I decided to make an article series. This post is the first one and it’s all about contrast.

Why is contrast important?

First of all, not everyone have your falcon eyes. Yes really. People do have bad eyes, color blindness or other impairments.
Second, not everyone is sitting on your 27” iMac. They might be on a crappy old screen and no, it’s no ok to tell them to get a Mac.

How do I test for contrast?

According to WCAG 2.0: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)”

Well what’s that ratio stuff? I’m not good with calculating myself so I will not try to go into any deep explanations. But there are some good tools out there to help us.

1. Color Contrast Analyser – A program that you install on your computer. Both Windows and Mac. (YSlow legend Steve Faulkner was involved in this one. Just saying…)
2. Color Contrast Check – A tool made and hosed by designer and developer Jonathan Snooks (quite famous guy as well…)
3. Contrast Checker – Another web based checker.

Do you test for contrast? Do you know other tools?
Let me know!

This was a11y* for designers numero uno and I’m out.

/Ida

*a11y is an abbreviation of the word accessibility where 11 is the number of letters that was left out of the complete word

The great start

I think most of us, and I say us as in us people who spend more time in front of computers than in front of real people, remember when it all started. The big awesome presentation at Google I/O . I heard rumors about people crying and celebrating with cookies and ice cream. It was an epic moment.
I saw the whole presentation myself and yes, it was awesome. I know I rushed to sign up for a test account and then I waited and waited and well… waited. Got frustrated and starting tweeting things like ”Ey! Gimme a wave-invite! *getting desperate*” Not that Google would listen but you never know.
After some time I got my wave-invite. Late. I started using it. I forced other people to use it. I quickly found a plugin that would give me notifications of updates on my waves. I noticed other people starting to use it. Then I noticed how they stopped using it. How it was forgotten. And now Google stopped development.

Was it a failure?

People say that Google will loose credibilty. People say that Google gave out invites too late. People say that it was a poorly designed overengineerd application ahead of it’s time. Well, yea. That’s what people say. Personally I would like to thank Google. I got motivated. I think a lot of other people also got motivated. And I think that is what most people who put judgement of Google (and predict the death of Buzz) have missed. Google inspires people. Noone knows to what extent.

No, it shouldn’t have been undone

I don’t regret the Wave thing. Doesn’t matter that it didn’t replace email. Doesn’t matter that millions of people didn’t get addicted to it. I think it was a great Google moment. Sure, people can argue and all but I, as a web developer, was proud when they gave that presentation. To speak frankly it actually is people working with web development that moves the web forward. That keeps improving the web. If nothing else I think Google inspired these people in a positive way to make greater things. I will always think of Google Wave as a great application.

/Ida

The old days

It was on these forums that the experts hung out. I was always amazed over the amount of answers I got there and one day I wanted to be a person who gave answers as well. I always tried to see if there was some small question that I could maybe help out with but usually I hardly understood the problem good enough to even give a hint to a possible solution.
Times changed. I went to school to become a pro in the area and when activity got low I stopped hanging out on the forums. Instead I started to go to friends or colleagues for feedback.

A new place for the cool people

A couple of months back I heard of something called Forrst. My rss-feeds were buzzing about it and appearantly it seemed to be a very cool place to hang out on for developers and designers. That is if you were cool as well. It was invitation only. I filled out the application form but thought that since I’m not Chris Coyier on CSS-tricks or Ryan Carson from Carsonified my chances were zero. I was simply not cool enough. Dang it!
I gave up. No invite was coming. Then I started to follow the buzz on Twitter. Turns out people were having invites to give away to us less fortunate. (I still thought it was all about coolness…) I started to answering these people and after a while I got the following tweet:
“@kolombiken I like your portfolio, send me your email address and I’ll give you an invite.”
Do I need to tell you I was happy?

You should apply

Forrst was, is, exactly as I imagined it to be and more. So many talented and passionate people all in one place. You are able to upload snaps of your design or code. Ask questions, share links and the best part: get lots of feedback! It was just like in the old days on my forums but with a much better interface.
So let me just tell you this: If you are a designer or developer or both and you have a true passion for the web. Forrst’s the place to be! Fill out their application form today.

Uhm yea, right, sending in applications doesn’t work? Well, turns out I was wrong on that one. Some weeks after I was invited I got an email in my inbox. It was an official invite to join Forrst.

/Ida

Ps. For you Forrsters I’m kolombiken.

So what’s this post about? Well, just telling you what’s going on.
It would be super-cool if some of our readers could give us some input on this.
Is there something that’s frustrating here? Something that could be better? Something missing? Any suggestions on things that you think we should work on are greatly appreciated.

In short: feedback bitte!

*Tilted head with puppy-eyes begging for comments*

/Ida

Ps. The header image is revealing a tiny bit on what’s up…

Or wait… there’s a solution for this. And no, the solution is not to make one hundred gradient-box-images of different sizes. It’s not even to slice up the box in pieces and put it together using the CSS background-image property.
This is how to do it.

1. Create border-image

Create a small gradient image in you fav image program. (Like Photoshop). Image should be the size of your border times three. In my example 2×3 = 6px. I.e. 6px x 6px. Apply a gradient and crop out a little hole in the middle. Save the image as a png with transparency.
Note that the image below is zoomed in 1600%.

2. Apply CSS

Apply the following CSS to the element you want to be gradient-bordered.

.your-element{
/* the first border is for that graceful degradation
in "bad" browsers */
border: 5px solid #60bec3;
-webkit-border-image: url(border.png) 2 2 2 2 stretch;
-moz-border-image: url(border.png) 2 2 2 2 stretch;
border-image: url(border.png) 2 2 2 2 stretch;
}


3. Finished!

Tada! Now it might look like below.

Or like this if we have a little more text.

FYI the following has been tested in Firefox 3.6.4, Opera 10.53, Google Chrome 5.0.375.70 and Safari 5.0.

Feel free to experient with making the image with rounded corners/bigger/smaller/gradient inside/outside. And yea, don’t forget to show it off and post a link of the masterpiece below.

That’s it for now.
Quick, dirty, getting the job done…

/Ida

Awesome people, not so awesome web sites

I’ve met people who are awesome when it comes to creating stuff on the web. At the same time their own page includes nothing more than an email… if they have a site that is. I’m including myself here. I’m not at all completely happy about the state of my own web site at the moment. An update has been on my todo-list for way too long but stuff comes in between. Stuff equals client work in my case. And I think that is what happens to most of us.
Ok, people, I can hear you mumbling. Of course there are exceptions. There are those close to über-humans who manage to do it all. Having an updated awesome portfolio/blog/about me-site while at the same time being awesome at work. And you know what? It seems like they have the time to have an irl-life as well. Yes, really.

To have or not to have a site

I have been thinking a lot lately about whether it’s important for us web developers to have an updated and good web site. The conclusion I have come to is that it depends. For me who has my own company it’s, naturally, important. At least if I want to keep getting new clients. Which I do. For someone who have a steady job that they have had for ages it might not be that important. Or?

Keeping something with your own name on

Some weeks ago I read about this guy who lost weight by tweeting. Every day he told “the whole world” how much he had lost/gained. Apparently it was a good method cause he was too embarrassed to gain so he ended up losing quite a bit. I think web developers can use the same method to keep in shape. Uhm… don’t get me wrong. I’m not talking body weight here. What I mean is keeping your skills top notch. By having a web site/blog or something similar you are showing the world your skills. There is something out there with your name on it. Might be good if you keep it fresh. Might be real bad if you let it get outdated. Just like it might be a real bad idea for a personal gym coach to put on a lot of weight.

Keeping the web healthy and growing

To take it one step further. If we all kept working on our skills I think the web could continue to be as cool and exciting as I think it is right now. I think having something on the web with your name on is one way of doing that. To try hard every day to not be a child of the shomaker might be a way to stop the web from getting outdated, old and something that stops to develop. I mean really how many shoemakers are there in your city? Exactly.

This is just my random thoughts on the subject. I would really love the hear your view. So please feel free to comment on this.
Happy healthy web!

/Ida

In a perfect world

Anyway, back to topic. Compared to most Art Directors and Interactive Designers people working on the backend usually have quite a lot of knowledge when it comes to HTML. They know most of the tags in use and they can often style a web site even if it’s not their job. The problem is that many of them aren’t that good at choosing the right markup that is fit for the content and of course, it’s not their job. Or at least it shouldn’t be their job. I’m having the strong opinion that every team bigger than three people working on a web site should consist of at least one frontend developer. That frontend developer should take care of the job and provide the best markup. Oh, sweet dream of a perfect world.

When backend is getting dirty with frontend

But there are times when for various reasons there is no room for a frontend developer. There might also be times when the markup provided by the frontend developer doesn’t fit the framework. Sometimes the people working with the backend need to do quick fixes that include markup. A lot of times this can result in markup that is closely connected to the visual appearance of the site. For example a label needed to be provided to a new input field. The label need to be above the input field so the person on the backend quickly put some text into a div cause he knows form experience that a div is a block element and the input field will surely get it’s own row.. wait lets put the input fields into a div as well. Now fine and dandy let’s move on. Yes, I realize that I’m generalising and that most people I met are smarter than this and they do think more than this but hey! I’m trying to make a point here… My point is that most backend people are having a hard time trying to keep the markup apart from the visual appearance. So my one sentence lesson is:

”Stop thinking about the visual appearance when you’re writing markup”

Not perfect but better

I personally think the world would be a better place if more backend people started to follow this. Of course I realize that because you don’t know everything about clearing of floated elements, positions and negative margins and other mumbo-jumbo css-talk you might need to add that extra div. But please, and this is a prayer from my deep and pure frontend heart, don’t start by thinking of how it looks. Start by thinking what feels appropriate. A label should be a label and a paragraph should be a paragraph. If more people on the backend just stopped caring about the look we wouldn’t have som many crap-markup-generating framework out there. Just saying…

No offense to nobody.
I love you.
I love the web.
Peace Out!

/Ida