web design

Zoomii.com – The “Real” Online Bookstore

Via this CyberNet News post I got to Zoomii.com. There is a saying about all new being well forgotten old. And that’s exactly what Zoomii.com is about.

There is something magical about walking through a bookshop – touching books, flipping pages. Especially, when you don’t know exactly what are you looking for. Amazon has sort of taken it away. You get in, get your stuff, maybe grab something that is recommended nearby, and leave. Zoomii.com combines the best of both worlds. You can still get stuff from Amazon shop at Amazon prices, but instead of visiting a rather cumbersome interface of their site, you can browse through a familiar bookshelf area.

The combination of a good design with intuitive interface makes it almost a “Wow!” site fo me. It took me exactly three seconds to figure out how to use it. And even if I wasn’t tech savvy, there is a little friendly popup that appears when entering the site, which tells briefly how to navigate around. The control panel on the left is small, and has only the things that I care about – navigation, category selector, and information about my cart. Brilliant.

The only thing that I wish Zoomii.com had that it doesn’t have (or at least I couldn’t find) is the option of choosing which Amazon shop to buy from. If I could buy directly from Amazon.co.uk, it would be a 10 of 10 web site. Hope, they will add this option later.

Sites like this should be taught to web designers and developers. This is how the web should be – clean, simple, efficient, and intuitive.

PSD slicing service recommendation

This is a follow-up to my recent post “MostSliced.com summary – picking PSD slicing company“.

Once the choices for the PSD slicing service were established, I did the next step – actual order. I started from the top of my list, which happened to be xHTML Master. I sent them the order through the form on their web site and got a pretty fast response apologizing for the fact that they were too busy to undertake my order. No problem. Good that they notified me in a timely manner. So, I went to the next choice – PSD Slicing. Again, submitted the design and went into the waiting mode.

Pretty soon I received an email letting me know that the order is OK and that they can start on Monday (next working day) and finish it by Wednesday (two pages, with one of them being a rather complex design). The timing was well within my limits. I sent them 50% of the down-payment and started waiting again. Today, on Tuesday, around lunch time, I got my order back, fully done and finished.

First of all, of course, I was a bit surprised with the speed. I thought it would take them more. When I checked the results I was even more surprised. In short: outstanding job! The images were cut properly, some in PNG, some in GIF, some in JPG – properly chosen each time. The xHTML was small and clean, validated perfectly with XHTML 1.0 Strict (not even Transitional!). DIVs, proper CSS, nicely indented. CSS was also done nicely – small, simple, and straight-forward. Fully valid. Also, the whole codebase is pretty semantic and, as a bonus, validates with web accessibility standard (Section 508). To say that I was really impressed with the result was to say nothing at all. I was stunned for a few minutes. It’s been a really long time since I saw anything so beautiful.

It was so good that I couldn’t believe it. So I thought maybe it will break in one of the major browsers. Then my attention was caught by something else in that email message that they sent me. It was a link to BrowserShots.org , which is the web service that can show you how your web site looks in a whole lot of browsers. PSD Slicing provided me with the link to the screenshots of their results in all major browsers that I cared about!

After checking that code back and forth, the only suggestion I could come up with is … comments. They aren’t required or anything, since the whole CSS and xHTML files are very small (something around 6-10 KBytes), but still it would have been nice to have some comments, especially in CSS.

Am I satisfied with their service? You bet I am. Will I ever recommend it? Yes, of course. I’m doing it already. Is it worth the money (around $120/page)? Yes! [insert more questions here and answer them “yes”]

MostSliced.com summary – picking PSD slicing company

Everybody who ever made a web site, knows that design is hard. Making something outstanding and unique, but at the same time classy and easy to use, requires a professional designer. Everybody who ever made a web site knows that almost all web design is done in Adobe Photoshop, and that after the actual design is done, there comes an often lengthy and painful stage of slicing the design into its web variant – a conversion of Adobe Photoshop .PSD file into HTML, CSS, and web optimized images.

Apparently, slicing up a design is not a tough job it all. It’s slicing it up properly that makes all the difference. Anybody who has Adobe Photoshop installed can slice up a design. Photoshop can do most of the job for you anyway. But it takes a real professional do it properly. Don’t believe me? Let’s see. Have you ever sliced up a design? If so, feel free to answer the following questions in the comments:

How complex was the design?
How much time did it take you to slice it?
In how many browsers did you check the results?
Did you try to validate the HTML and CSS?
Did you spent any time making the result load faster – optimize images and code for slow connections?
How about accessibility – can people with disabilities, people using special software like screen readers, make any sense of the pages that you created?
Was there any SEO (search engine optimization) – semantic coding – in your work?
What about the comments in the markup and styles? Did you left any? Will other people be able to modify your results easily?
Did you have any considerations regarding technical nuances of the job – DIVs vs. tables, fixed width vs. fluid, scalable fonts vs fixed sized ones, etc?
Did you have to shape your slicing results into a theme for some CMS software, like WordPress or Drupal?
Have you enjoyed the process? Would you like to do it again?
How much would you pay not to do it again? Ever again?

If slicing up designs is not your bread and butter, you’ll pretty soon arrive to the conclusion that you need someone else to do it. One of the solutions is to outsource this job to one of the PSD slicing companies. There are quite a few of them out there – some are better, some are worse, some new, some old, and some we know nothing about.

But which company to choose? How to pick the one that will do the magic for you without screwing a thing or two in the process? Well, of course, there is always fear, uncertainty, and doubt involved, but if we are to put these aside, how can we proceed?

Finding a company to outsource PSD slicing was something I’ve been asked to do on more than one occasion over the past few weeks. Finally, I got over my busy schedule and unlimited laziness and came up with something.

There is a web site called MostSliced.com . It is a directory of PSD slicing companies with some brief information about each, user submitted reviews, ratings, and what not. It’s not a huge directory – it only features 20+ companies. It’s not a very user friendly web site. But it’s a good place to start.

Before making any decisions, it’s good to figure out the requirements for the best match. Here are the things I had in mind while learning about these companies – your mileage may vary of course:

How fast can they do the job?
How flexible they are in their technical expertise – cross-browser compatibility, W3C standards compliance, SEO, accessibility, code commenting, etc?
How many people have ever used their services and how many of those got satisfied?
What were the weak points from those users who weren’t satisfied?
How expensive are they?

I quickly realized that I need to group MostSliced.com listing into a table, add my own rating, and see which companies are doing the best. So, I fired up my Google Spreadsheet and did exactly that. I’ve published the table for anyone to see, but if for some reason you can’t access it, feel free to use an image below (click it for a larger version).

Things that you see in that table are:

Company name.
Company URL.
Price. This is a price in US Dollars for the first page, as reported by MostSliced.com .
Time. This is the time in days that the company will need to slice up your design.
Reviews. This is the number of reviews for this company posted at MostSliced.com for the moment of creating the table.
Reviews rating. This the average rating of the company given by all reviews at MostSliced.com.
Combined rating. This is the rating that I came up with. It is calculated like so: combined rating = ((Reviews / 2) * (Reviews rating / 10) / (Price * Time)) * 1000. The idea is the following: half of the ratings are submitted by the companies themselves or by their very biased users. So we’ll just use the other half. We’ll decrease the review rating range from between 0 and 10 to between 0 and 1. Then we’ll multiple this rating by the number of the reviews the company has. The result of this multiplication we’ll divide by a product of time and price. The slower they are, or the more expensive, the lower their rating will be. The more reviews they have, and the more positive their reviews are, the higher their rating goes. And just to make the rating numbers into some sensible numbers, multiply the result by 1,000.

To make things a little bit easier to digest, I added some colors. White and gray backgrounds are just for stripes, to make it easier to read. The best values for each column are highlighted in green. The worst values are highlighted in red. The values in between are highlighted in yellow. The final table is sorted by the Combined Rating, so that the best companies to choose from are at the top. According to these findings, the top three best companies to give our trust to are:

As I said, your mileage may vary. Things that you should keep in mind are:

There are more companies out there than those that are listed in MostSliced.com .
There are other factors to take into consideration which weren’t even mentioned here – for example, the timezone the company is in, languages they can communicate with, payment conditions, etc.
I am pretty bad at anything that needs any calculations. Seriously.

I will most likely continue with the research in this area. Or maybe I will just go ahead and try a few of them out. But in either case, if you have any suggestions or ideas in these matters, please let me know.

Googley Design Principles

Very much in line with the image explaining simplicity of user interfaces, comes the list of Googley Design Principles:

1. Focus on people—their lives, their work, their dreams.
2. Every millisecond counts.
3. Simplicity is powerful.
4. Engage beginners and attract experts.
5. Dare to innovate.
6. Design for the world.
7. Plan for today’s and tomorrow’s business.
8. Delight the eye without distracting the mind.
9. Be worthy of people’s trust.
10. Add a human touch.

Anyone doing any sort of user interface work should learn these by heard and repeat them as every morning mantra.