ffffrozen - Adam Bezulski's blog

This post is sponsored by full screen and tasty background images. Let's start with the tasty one.

La Papa Pizza

I love Italian food - this is one of the my favorite food. And I was quite pleased with the imagery of pizzas, breads, pastas and other meals. Those images are simply brilliant and presentation on the igneous background works well - specially for pizzas and breads (looks like everything was inside of the oven).

There is a nice implementation of the custom content scrolling - you can navigate by using the custom scrollbar or by clicking one of the items in the drop-down menu. Works smooth also with the mouse wheel.
Let's hope that the delivered product looks as good as pictured and tastes even better.

Axel Schoenert Architects Associes

It looks like full screen background images and slideshows are trendy and used a lot (or sometimes abused) but in this case that scenario makes sense, specially, if it is about the architecture.

Full screen background is also used on project details page with sliding panel containing description and images list. All it is nicely combined with half-transparent elements of the layout. And one more thing - this not a full Flash website.

AyerViernes

This is another example of the website that gives the impression of the being done in the Flash - full screen layout and sliding animated content. But it is HTML, CSS and JavaScript.

This web site uses single layout concept and I find few interesting things over there. The first thing that I noticed was the pattern applied to the images which makes them looking interesting.

The second thing is the usage of the AJAX. Despite the fact that this is single page layout, the content is loaded using AJAX calls once user clicks item from main or sub-navigation. Also, the URL in the address bar is updated, so user is able to bookmark page/section.

Few days ago I stumbled upon Adam Sidwell's illustrations called "52 Bad Dudes". The collection features nice illustration of some really bad ass characters from the movies. Among those illustrations you can find Tyler Durden, Anton Chigurh and some others.

Adam sells them as a limited prints, so as a fan of the Fight Club I could not resist and I've bought this one:

Remaining limited prints are available here, but there are only few left.

Another week passed so it's time for the next Weekly Inspiration post. This post I will start with the content of the website, bot with the website itself (which is simple and neat anyway).

Boarding Pass/Fail

If you have ever taken an air journey you received your boarding pass that tells you what is your flight number, departure gate etc. Usually reading that piece of paper is not the greatest user experience. Those boarding passes are difficult to read and cause confusion. I caught myself few times reading my pass few times. What is also interesting that the airport employees mark important facts with pens. After the journey all you want to do is just throw away this piece of paper - it's not worth to keep it as a memento of your journey.

No wonder that designer Tyler Thompson decided to publish his take on Delta Airlines. First of all you can see his rant which is somehow amusing, then some his and other people's ideas, how the boarding pass should like. I have to say that presented concepts look creative; they are good looking and most importantly - user friendly. Personally, I prefer Tyler's last design (with huge text for gate number) and Davin Yoon's wallet sized pass.

midd.ag

Let's go back to the web design. Dutch agency midd.ag have nice and simple web site - simple and clean layout with originally looking header. Main navigation contains nice graphic solution when one of the items gets "selected state". Tag line underneath the navigation is related to the selected item. Such a shame that's an image - not an HTML text.

For me, the most interesting approach is the usage of the blackboard as part of the layout. It looks really well and features hand-written font face which doesn't look creepy. And it is not Comic Sans.

Hundred10

I stumbled upon that web site while ago but for some reason I decided to include it to this post. The web site itself is fairly simple and easy to navigate. No fancy fireworks with small exception for main navigation and animated content (hello jQuery).

What I really like are the infographics that describe the company, creation process and how much time is spent for each stage of creation.

It's been a while since I wrote last post. At the end of the month I am moving out from my apartment so I am kept busy looking for new place. But in the meantime I also keep looking for interesting websites, so here they are...

Relogik

Relogik is the showcase of the product designer Damjan Stankovic and that web site follows the same principles used in his projects. It is simple and functional.

Obviously the most interesting part is the product details page that features high quality renderings in the header and description text alongside with images. What also looks nice is the pagination functionality placed at the top and at the bottom of the page. Some product concepts are really interesting and I wish I had some of them, specially USBee and Letout Outlet Wall Socket.

Cooper

The first impression of the page is that something might be broken. It is because the web site uses single page layout and combines horizontal and vertical scrolling. The main navigation (with fixed position) triggers horizontal scrolling while sub-navigation triggers vertical one (apart from blog which uses the classic approach).

It might be looking chaotic but users are able to switch to the standard browsing, which is good in terms of UX and usability.

Steinway & Sons

Known piano manufacturers have their web site recently redesigned by Jesse Bennett-Chamberlain that runs 31Three. The new website looks stunning and you can see a lot of attention to the details. Personally, I like the colour scheme and the typography (font embedding done using @font-face). Also, the drop-down menus look impressive with half-transparent border.

Last week I received my copy of HTML5 for Web Designers written by Irish web developer Jeremy Keith. There is a some confusion going around the latest version of HTML and that book definitely helps clear it. The changes and new features are clearly explained and I can confirm the quote below:

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

It is also good graphical experience done by Jason Santa Maria. Book costs $18 and is available on Book Apart.

As a fan of proper continental beer (and also non-continental Guinness) I couldn't stop laughing when I was told this:

- What sex in a canoe and Budweiser (the American one) have in common?
- Well, they're both f**king close to water!

It's Tuesday and it is time for the Fourteenth Weekly Inspiration post. There won't be any other posts for a while. It is time for me to take some holidays.

Left-aligned and scalable background

Hire me Copenhagen

This is original approach to the personal portfolio, specially if someone wants to live and work in Copenhagen. Narrow layout moved to the left, exposes scalable picture of Copenhagen. Sub-pages including portfolio section look nice, also Guys is excellent in making the tea! How nice. Worth checking is CV in PDF - quite nice and graphical approach.

Richard Spierings

Portfolio of Dutch director also presents similar approach - narrow layout aligned to the left and scalable background image. Here, background image has special treatment with applied dither. For some reason the background image reminds me the scene from the first Matrix.

Extra behavior for main navigation

Bixal

There are two reason why I chose this website. The first one is the colours palette with colorful background image that has fixed position. The second reason is the main navigation that is binded to the carousel on the landing page. This is nice example how main navigation can be attached to the other than "click" events.

Perspective and grid

Neiman Group

Funny aituation about that website - I've had bookmarked this website long while ago, but for some reason I have never presented it. That situation changed the background image (which is swapped on different occasions). I really like cold and pure elements of architecture. That shot of the concrete gives nice impression of perspective and that's the reason it was brought to my attention (again ;)).

The main navigation and footer indicate the usage of the grid which gets is obvious on the sub-pages and even more on the page that presents the people behind the agency (on contact page as well).

I am not picky and mean person but I thought that this is worth mentioning.

I was browsing some web galleries where I stumbled upon one website from Poland. Colour palette for some reason looked for me interesting so I decided to check that website. When I opened the site I saw something that probably shouldn’t have happened: undefined, undefined in few places. It looks like font embedding technique failed. Worth mentioning is that I use Chrome as my default browser (on Mac).

It is clear that someone (or in general: the web design company) didn't do proper browser testing or deliberately removed Chrome from supported browsers. I checked the website in Firefox but there was no issue. Surprisingly, website looked fine in Safari, so it means that some differences may occur between Chrome and Safari despite the fact, that both browsers use same rendering engine (Webkit).

To fill me in, I checked the website on Windows (PC) to see what happens there. In Chrome - same result - undefined in few places, no such a thing in Firefox or IE8, but additionally IE8 threw in some JavaScript errors.

So what does it mean? Proper browser testing is a necessity. Specially nowadays, where IE and even Firefox loose popularity in favour of Chrome. I wouldn't be surprised if something similar happened in IE6 and that could be justified - IE6 is outdated, everyone hate it and wish it was dead. Ignoring modern browser looks just wrong to me.

Screen grabs below:

Chrome:

Firefox:

As usual, for the last couple of days I've been looking for the website that could bring in some inspiration. Coincidentally collected website present clean, simple and sometimes minimal approach. All pleasant to the eye and simple to use.

Content matters

Plusmoins

White background, black text and blue headings combined into nice grid layout (see the CSS) which is consistent across the whole website. That combination reminds me delicious website (just my impression). The only one fanciest element is the content slider on the landing page.

Atlantic Southeast Airlines

Another website that is content oriented. Grid based layout combines red, gray and black content on the white background for the contrast. The whole package is well designed. Good looking headings use Cufon as font embedding technique.

Waner & Szakall

The website of that law office really stands out compared to other website within that industry. Single page website gives all the necessary information in a clear and pleasant way. Narrow layout works nice with images and typography solutions.

Show me your work

Chance Graham

The first thing what caught my eye was the colour scheme. For some reason I like the combination of dark/dirty yellow with black and shades of gray. This portfolio website is not rich in the content as the previous one, but Work section is quite descriptive. The interesting solution is the navigation placed above the screen grabs that allows jump between images. Simplicity works.

Hans Albu Sanmiguel

What we have here is very clean, simple and yet creative approach. There are few elements that attracted my attention. First - the animation of the birds - quite neat and also not disturbing flash animation. Second - the main and sub navigation breakdown. Both are aligned vertically. Content pages with nice, original imagery and fancy headings look really well. Headings also use Cufon as a font embedding technique.

For me the most interesting section is the portfolio which can be filtered using third level navigation. That section nicely combines AJAX, scroll-to functionality and images carousel (done with MooTools). Sehr gut.

jQuery madness

This is the coolest website before launch checklist I have ever seen. I has predefined fields with iPhone-like check box, you can disable field if not applicable (N/A) and add a comment. What also is nice, that some extra fields can be added if necessary. Fancy input fields use CSS3 properties like border-radius and box-shadow (this is webkit actually). Animated background is based also on CSS (webkit again). CTRL+D ;)

Today I spent one hour trying to figure out why I wasn't getting the right response from the AJAX call using jQuery. There were no JS errors, fake repository once called directly was giving me the response/data back but not using the AJAX.

Looking at the documentation, I tried different methods to resolve the issue, but without success. Finally my boss figured out what was wrong and it was the lamest mistake that I could possibly make. As usual, devil is in the details.

In my JS code I had:

$.ajax({
       URL: $url,
       success: function(data){...

instead of

$.ajax({
       url: $url,
       success: function(data){...

URL vs. url makes a difference. JS is case sensitive...