Designing for: Karova.com
I'm ready to show and tell. The new design for Karova.com is out there. Today I thought I'd talk a little about my design process and what has gone into my thinking for this new site.
I've alluded to it recently, and now after not much blood but one or two tears I'm ready to show and tell. The new design for Karova.com is out there. The new site is geared towards promoting Karova's development framework). Today I thought I'd talk a little about my design process and what has gone into my thinking for this new site.
I designed the original Karova.com site way back in October 2003 and it was one of the first sites which I had implemented with standards and accessibility in mind. With the release of KS2.0 which has been rebuilt from the ground up, I wanted to reflect this change in the new design while maintaining an echo of the previous design and company branding.
Original Karova site design 2003 (JPG format 122Kb)
Saying NO!
to rounded corners (not)
The design of the home page went through several iterations on which I experimented with variations of the header area, column structure and colour palette. I initially wanted large parts of the content areas to overlap the header, but I soon felt that this made the layout rather muddled and opted instead for a more usual grid with elements overlapping the header and menus.
Iterations with design notes (jpg 195Kb)
When starting on the design, a sticky note on my iBook read NO ROUNDED CORNERS
, so determined was I to avoid them. Out went the 'Karova girl' and her See no evil, hear no evil, speak no evil
associations and in came bright colouring, tints and (you guessed it) rounded corners. While my early design ideas had not a rounded corner in sight, as the wireframes made way for graphical comps I wanted to soften the content boxes and so selected rounded corners (together with call-out boxes and colour coding) made a natural return. However, I have attempted to soften them by not making every corner rounded and by linking them to other soft curves.
Rounded corners
While most ideas gave way for those which appear in the final home page design, some were strong enough to be saved and used later in other parts of the site, most notably the horizontal boxes and call-outs which became <fieldset>s and <hx>s on the sign-up page.
I also decided early on that I wanted to achieve a design which featured elements breaking out of their containers in an attempt to create a more organic and less boxy feel. During the build, combining floats for layout with CSS positioning became almost an obsession and I must admit that I am a little surprised that the original design comps transferred into working pages quite so accurately.
XHTML and CSS
It was decided early on that the new site would be designed with a dual approach to browser support. There would be progressive support for newer browsers and no support for Internet Explorer 5.0 on Windows or Macintosh. I devised a browser support palette where users of all our target browsers (Firefox/Gecko, Opera, IE6 and Safari) would receive the same structural template outline, but only users of modern browsers would receive the full design. <div>s and <spans>s would be kept to a minimum and child, adjacent sibling and attribute selectors would also be used to reduce the number of ids and classes acting as styling hooks. Hacks were to be kept to a minimum with our target being only to use them for clearing floats without structural mark-up and to overcome Internet Explorer's lack of support for min/max width/height and transparent PNGs.
One result of this browser retirement can be seen in the content <h2> and initial <p> on article page templates. Here a combination of child and adjacent sibling selectors, plus negative margins and generated content provide modern browsers with the full design.
<h2> and initial <p>
<div id="content_main"> <h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor [ ... ]</p> <p>etc.</p> </div>
div#content_main>h2 {
position : relative;
left : 9em;
top : -30px;
width : 190px;
height : 100px;
margin : 0;
padding : 20px;
background : transparent url(../images/h2-g.png) no-repeat;
font-size : 100%;
font-weight : normal;
text-align : center;
color : #fff; }
div#content_main>h2+p {
margin : -140px 0 20px 20px;
padding : 120px 20px 20px 20px;
background : #c6e291 url(../images/p-t.png) no-repeat; }
div#content_main>h2+p:after {
position : absolute;
width : 465px;
padding: 0;
margin-left: -20px;
margin-bottom : -20px;
display : block;
border : none;
content : url(../images/p-b.png);
line-height : 0.1;
font-size : 1px; }
Of course, if we had chosen to provide full support for Internet Explorer 6, the addition of two id or classes would achieve a similar visual effect (without the rounded corners made possible by generated content) but this would have been at the expense of a little extra mark-up, a compromise which I was not prepared to make.
<div id="content_main"> <h2 class="call_out">Lorem ipsum dolor</h2> <p class="call_out">Lorem ipsum dolor [ ... ]</p> <p>etc.</p> </div>
h2.call_out { ... }
p.call_out { ... }
I am also particularly pleased with the final result of the sign-up page forms where similar decisions were taken. In place of,
<form> <fieldset id="first"> <h3> </h3> </fieldset> <fieldset id="second"> <h3> </h3> </fieldset> </form>
fieldset#first { ... }
fieldset#first h3 { ... }
fieldset#second { ... }
fieldset#second h3 { ... }
we chose,
<form> <fieldset> <h3> </h3> </fieldset> <fieldset> <h3> </h3> </fieldset> </form>
fieldset {
position : relative;
margin-bottom : 10px;
padding : 15px;
border : 4px solid #f6b1ca; }
fieldset+fieldset { border-color : #dcdced; }
fieldset>h3 {
position : absolute;
left : 30px;
top : -60px;
margin : 0;
padding : 20px;
width : 190px;
height : 95px;
background : url(../images/legend-p.png) no-repeat;
font-weight : bold;
text-align : center;
color : #fff;
overflow : hidden; }
fieldset+fieldset>h3 {
background : url(../images/legend-b.png) no-repeat; }
and as with the <h2> and initial <p> on article page templates, relative positioning was used to make the effect for modern browsers.
While the <h3> were not our first choice (we would have preferred to use <legend>), the inability of most browsers to style <legend>s as I wanted lead us to the conclusion that on this occassion there was a need to bend our rules to get the visual effect which I wanted. Sometimes a man's gotta do what a man's gotta do. I do plan to run more <legend> tests in the next few weeks, but time just ran away from me.
PNG fun
The alpha transparency of PNG images is one of the most powerful tools in a designer's toolkit although we are often held back by IE's lack of native support. Transparent PNGs were used across the site in combination with element background colours to reduce the total number of images needed. There are various methods for feeding alternative gifs or jpgs to IE6 but these were kept to a minimum by using them only for the structural template outline. Outside of this, PNGs were hidden from IE by using selectors which IE does not understand and therefore not only hiding the PNGs but the entire style rule.
a[title="Purchase"] {
background : url(../images/nav_purchase.png) no-repeat 0 0; }
and
div#content_main>h2 { background : transparent url(../images/h2-i.png) no-repeat; }
Branding area relies heavily on transparent PNGs
I'd love to hear what you think?
NB: Since writing this column, neither I nor Stuff and Nonsense are affiliated in any way with Karova.
Replies
-
#1 On December 6, 2005 05:57 PM Ben said:
I broke it’
I'm going to assume you know about this, what with the post being so fresh an KS2 being live so recently, but I visited Karova.com in Firefox 1.5, was wowed by the loveliness and tried to load it up in IE. IE promptly took me to the old Karova site’
Then I clicked some of the navigation menu back in Firefox and got ASP.NET errors. On clicking the logo to go back to the home page I got transported to the old site again.
What little I saw looked fabulous though. Fantastic job.
-
#2 On December 6, 2005 06:13 PM Doj said:
One word: awesome. Great job guys!
-
#3 On December 6, 2005 06:34 PM Zach Inglis said:
I like the buttons (the illustrated pencil etc) but theres a few things like the 'KS2.0' that don't keep with the quality of the rest of the site
-
#4 On December 6, 2005 06:52 PM Nick Roper said:
We launched our first KS2.0 site for a new client just over a week ago. It was a really tight schedule (we went live 30 mins before the first ads went out on MTV) but we made it thanks to a great product and fantastic help from all the guys at Karova.
Thanks folks.
-
#5 On December 6, 2005 07:30 PM David Horn said:
The site looks great. I guess what's really confusing me is the link through to the WWF site and WTF it has to do with Bling! I guess if you have to ask you wouldn't understand.
Lovely work though, and a great write up. Love the sign up form.
(About the Karova girl ... have you guys split up? Would it be cool if I called her? Y'know ... just asking)
-
#6 On December 6, 2005 08:16 PM Malarkey said:
@ Ben: I think that was a DNS related error, sorry.
@ Nick: Your cheque is in the post ;) I'm glad you're pleased.
@ David: 'Safer Shopping: From Basics to Bling' is a new site for WWF UK to promote products from varying categories which meet WWF's environmental criteria.
Regarding the Karova girl, we ditched her after finding out she was really a geezer called Derek! (Ed says: Ignore Malarkey, she was a stock model courtesy of Stockbyte and no longer fitted the brand.)
-
#7 On December 6, 2005 08:16 PM Raanan Avidor said:
Great job! One of the best design I saw lately. It looks so colored and round and "organic". I love it.
-
#8 On December 6, 2005 08:32 PM Pete said:
"she was a stock model courtesy of Stockbyte and no longer fitted the brand"
She may be a just stock model to you, but she's someone's daughter and we loved her!
Nice job by the way... but wouldn't it be "better" if the callout boxes expanded with text size increases?
Love KS2, a pitch document went in the post today and hope to be building a store with it soon!
-
#9 On December 6, 2005 08:46 PM Pete said:
Hmm... my mistake.
Some of the callouts expand, some don't. -
#10 On December 6, 2005 09:29 PM Jim said:
Wow! Very nice indeed. One of the best looking shopping cart setups I've ever seen - bold and attractive, minimal and groovy!
-
#11 On December 6, 2005 09:30 PM Daniel Oliver said:
I'm really impressed. It looks great.
I find it really interesting to see some of the techniques you have used to build it as well, although I am somewhat lost with some of the selector shinanagons.
Nice work :)
-
#12 On December 6, 2005 09:46 PM Alex said:
As always Andy it's looking really clean and fresh.
Thanks again for revealing your design & css authoring process.Just a question about the WWF Safer Shopping site: Were the main header photos taken specifically for the project or did you source them from a library? I’m just asking because they are so different from the usually stock imagery.
-
#13 On December 6, 2005 10:49 PM Anup said:
The visuals are great. Nice job.
Web standards wise, this is good stuff.
But accessibility-wise, there is at least one improvement possible:
However, in Firefox (1.5) bump up the font just 3 times (yes, people do indeed browse that size, I have seen it, and do it myself!)
Bits of text gets lost, and in some articles things really do not hang well.
I wonder if in general you could go with em-based dimensions (that has its own challenges no doubt and it can have an impact on some of the images you might use, possibly, but in general you can get a more accessible design from it, I feel. I don't pretend that it is easy to simply swap once you have something in place already, either!)
Don't want to diminish what you already have, mind you! Good job.
-
#14 On December 7, 2005 06:44 AM Henrik Lied said:
Number one priority might just be removing the .aspx in the IRI-scheme? :-)
-
#15 On December 7, 2005 07:43 AM Nick Ropern said:
Seconded...
-
#16 On December 7, 2005 09:06 AM Robert Wellock said:
My honest opinion the contrast is too low on 3 of the navigation bars thus confusing the navigation.
-
#17 On December 7, 2005 09:20 AM misterchris said:
Its ... beautiful ... *tear.
Does it offer friendly URLs ontop of all the other goodies, I wonder?Its certainly something that Ill be recommending to future clients.
-
#18 On December 7, 2005 12:30 PM Malarkey said:
@ Pete: We are experimenting with more 'generated content' to help those <h2> call-out boxes expand further.
@ Alex: The Safer Shopping header images came from Photodisc.
@ Henrik: I'm not sure what you mean. Are you somehow offended by the use of .Net? ;)
@ Robert: I think that there may be a benefit in increasing the contrast in the uppermost navigation bar. Thanks for that.
BTW guys, I'm hoping you haven't had cause to see it, but here is the new site's error page ;)
-
#19 On December 7, 2005 12:45 PM John said:
That has to be the sexiest Purchase Now page I've seen.
Congratultions on being so confident with your colour selections. In a word, positive. -
#20 On December 7, 2005 02:24 PM Ted Drake said:
Oh you tease!
"No Rounded Corners" the headline promised. I am so over rounded corners. Please, dear lordy, my hand for a site without rounded corners. (I sent a comp to a client with rounded corners last week)
But alas, even the Malarkey falls victim to the rounded corner addiction. I will admit, you've done a splendid job using them with care. I especially like the back to top section.
I was expecting something different in IE6. I was going to ask how you explain to clients that it looks great in Firefox, could they switch... But the IE6 carries the design quite well.
Nice work.
-
#21 On December 7, 2005 02:48 PM Jules said:
Very nice Andy!!
I just have a couple of comments about the site.
1) I believe that it is always beneficial to use the :hover pseudo-class on <a> tags for improved usability. This does not mean that I recommend that you add a background colour or change the text colour, just removing the underline on :hover is sufficient.
2) When I scanned the new design, my eye moved across the top of the three columns in the middle before I read the content below them. The result was that I encountered CSS without an <abbr> tag before I encountered CSS with the <abbr > tag. Even though the source order may not agree with that, you might want to mark up both instances of XHTML and CSS with the <abbr> tags.
I also like the increased text size: I am getting old and decrepid (at least my wife tells me that, with a smile on her face) and although I primarily use FF or Opera, both of which make it easy to increase text size, I don't like to be forced to do so. Thanks for increasing the text size (for me).
-
#22 On December 7, 2005 02:55 PM Jules said:
Damn, it removed my markup even though I put spaces between angle brackets and the tag name. Here I go again. (Ed says: Fixed now, thanks Jules)
2) When I scanned the new design, my eye moved across the top of the three columns in the middle before I read the content below them. The result was that I encountered CSS without an abbr tag before I encountered CSS with the abbr tag. Even though the source order may not agree with that, you might want to mark up both instances of XHTML and CSS with the abbr tags.
-
#23 On December 7, 2005 02:56 PM Jules said:
...and
1) I believe that it is always beneficial to use the :hover pseudo-class on a tags for improved usability. This does not mean that I recommend that you add a background colour or change the text colour, just removing the underline on :hover is sufficient.
-
#24 On December 7, 2005 03:08 PM Laura Zucchetti said:
It looks fabulous. I love the clean style that runs through the site. It is very fast loading too. :)
I just have one question... How did you make decide to deal with <abbr>'s. I am in the middle of a site & trying to make sure all the content has abbreviations coded with <abbr>. The problem is, do just add the <abbr> tag on the first instance of the term, or on all of them?
You're site seems to do a mixture of both at the moment. Here (https://www.karova.com/prices.aspx) you have KS2.0 tagged 3 times with the tag, yet on the front page it is marked up once.
The Web Content Accessibility Guidelines (WCAG) 1.0, says:
<blockquote cite="https://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-expand-abbr">4.2 Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]
</blockquote>I did some research on this to see what everyone is doing and it seems that there is a mixture of standards out there.
Any opinion?
-
#25 On December 7, 2005 03:12 PM Laura Zucchetti said:
Opps.
It seems it removed my abbr remarks too... -
#26 On December 7, 2005 03:29 PM Mike WS said:
I second what Anup said. Being able to break the design with 3 keypresses is a disaster and should have easily been spotted and should have been fixed before going live. I think this is an example of the designer assuming how users are going to view the site, if not actually coercing them to view it in a particular way.
As a proponent of accessibility, the notion that some users have poor eyesight and do want large text should be high on your list or maybe I'm just lucky in having a client who is visually impaired which makes me very aware of it.@Jules. Do you really like the way Opera handles text resizing? I think the Zoom feature is a disgrace.
-
#27 On December 7, 2005 04:56 PM Matt Wilcox said:
Thanks for the kind comments, and I agree that Andy did a fantastic job designing this one. I'm only making a quick reply, and leaving the rest for Andy to field.
Laura : It's a good question. Personally I feel that the ideal of marking up an abbreviation only on the first occurrence is sensible - it stops screen readers from constantly reading out the long-hand, which would get annoying quickly if there were many repetitions on the page. That is the approach we decided to take, though (as you've pointed out), we slipped up on a couple there. We've fixed the problem now, thanks.
As always it's a decision that involves a balancing act. You want things to be as clear and understandable as possible, but you don't want to annoy any of your users. Whether you mark them all up or not depends on the context and the likely audience. You might notice that we've left the KS2.0 abbr marked-up in the sidebar, even though it's often defined in the main document. We think that's sensible because we can't be sure which the user will read first, and the compromise of it being read out twice in a screen reader was judged to be acceptable.
-
#28 On December 7, 2005 06:56 PM Sachin said:
Hey guys!!
Watch this what I got when I clicked the https://www.karova.com/Default.aspx?aspxerrorpath=/prices.aspx link.
(Ed says: Thanks Sachin, this has been passed to support.)
-
#29 On December 7, 2005 07:08 PM Giorgio Martini said:
Preamble: not so silly a question as it might seem...
For what reason (if there is one) is this 'unimportant' image not anti-aliased? (The text, obviously.)
-
#30 On December 7, 2005 08:03 PM mrjay said:
Talking of contrast, white text on pale yellow, as in the 'Purchase Now!' buttons is a bit mean. At least one instance where resizing text falls apart on the 'more about karova' and 'support' pages. Digging the way you've avoided those pitfalls on IE though.
Still, accessible e-commerce is a bit woot. Have you shown it to Disney?
-
#31 On December 7, 2005 09:05 PM Jules said:
@Mike WS: I am not entirely what you are refering to Mike other than the Opera zoom also zooms images (which seems to be the only difference I am aware of compared with other browser's implementation of zoom/text resizing). Zooming text is fine, zooming images, I don't have a problem with and, really, for people who really need zooming/resizing, increasing the size of images really is beneficial, especially when there are graphic text images on a page.
Also, I appreciate the fact that the scroll-button direction for zooming in Opera is more intuitive: Ctrl-scroll-up to increase and Ctrl-scroll-down to decrease (the opposite of FF and IE, I don't know about Safari).
To be completely honest, call my wife and tell her to tell me to wear my glasses more often but for the most part, I don't need them.
-
#32 On December 8, 2005 06:25 PM Marc Jones said:
Well, the 'old' site confused the heck out of me - partly due to the usage of the girl (partly because I must be a bit dense), I think it personalised it when it needed to look more like a solution rather than a solved problem (if you follow it looked like a site using the product rather than an ad for it).
I have a client looking for an e-commerce site that has had me in a cold sweat - no longer. Karova to the rescue.
Emailed an interest, Jay from Karova (named, my droogies, I hope after the Karova Milk Bar in Clockwork Orange...) rang within minutes and I think I am looking like a customer (rather than a puzzled designer wondering if his awesomely-talented but flaky-as-hell-when-it-comes-to-commitment code-ape mates were going to come to my rescue).
The control panel QT walkthrough would be most welcome. Also links to "sites using KS2" would be neat as would a few "user manual" type pages - ie I 'get' the product but need to certain it works with me and doesn't make me work with it.
Can't stop - I have a tour to take... viddy well!
-
#33 On December 8, 2005 08:45 PM Malarkey said:
@ Mark: Well thank-you. I'm sure that Jay will be very pleased to hear that.
Just so that you know, 'Karova' is the Russian word for 'cow' ;)
-
#34 On December 9, 2005 10:09 AM The Jones Boy said:
Aha - that'll be why Burgess called the milkbar the "Karova". ;-)
And whilst I am here, Jay was very helpful and gave me great confidence in the company. (that okay Jay? cheque in the post? ;) )
-
#35 On December 9, 2005 12:08 PM Jay said:
Thanks very much Marc, we look forward to working with you.
-
#36 On December 11, 2005 09:58 PM Simon R Jones said:
Lovely colourful site. Seems a nice and straightforward explanation of your software.
I dunno if it's just me with my dodgy eyes (I am slightly colour-blind with red/greens) but the white text on yellow on the homepage is a little difficult to read. Since it's also used for the 'purchase now' button I thought you should know.
-
#37 On December 14, 2005 07:38 PM Tom said:
Looks great, juts a few niggles really:
In 1024 using FF, clicking "Top" will cause the horizontal scroll to appear for a second.
FAQ page needs a proper contact link next to the sidebar "Contact us" and also a link to "who we are".
I've only just noticed the example store on the main page, perhaps you could feature some more sites that use the software as I was interested to see how it works in the real world.
Perhaps the main page icons should be clickable?
I think the support page is a bit naff, I don't want more links to buy the software I'm here for support.
You also missing proper page title and proper URL's ;)
-
#38 On December 15, 2005 06:39 AM Moca said:
Brilliant!!!
This is such a nice fresh look, so inspiring. I must admit I am a bit depressed trying to catch up with all the standard rules ...The way your design evolved was fantastic. Such small changes that make such a huge difference.
-
#39 On March 17, 2006 10:51 PM Malarkey said:
NB: Since writing this column, neither I nor Stuff and Nonsense are affiliated in any way with Karova.