ffffrozen - Adam Bezulski's blog

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...

Recently lighboxes (or modal overlays as you want) have gained popularity, mostly because of JS frameworks. They are quite easy to setup and come with some options and predefined styles.

Despite the fact that some developers try to establish debate (or just have their own thoughts) if modal windows are good or bad, I still see the reason for their usage (I am not thinking about lightboxes strictly for images in this case).

Few days ago I stumbled upon the jQuery plugin lightbox_me. After some testing that I did, it has become my favourite plugin for modal windows. Here is why:

• easy to setup
• very lightweight and doesn't have huge impact on the page load time
• comes with variety of options (styling, behavior, AJAX)
• has no predefined styles at all - this is good when you want to add your own styling
• good for the content loaded via AJAX

This plugin is perfect for web applications (or websites) where usage of lightboxes is limited to certain actions or elements (no images or videos). The missing feature is the ability to display content using the iFrame as you can find in the fancybox plugin, but compared to lighbox_me plugin, the fancybox is more complex.

URLs:

• lightbox_me: http://buckwilson.me/lightboxme/
• fancy box (if you need more with your content): http://fancybox.net/home

On one of the design forums someone posted link to website that presents Twitter Fail Whale done using HTML5 and CSS. Here is the opinion that I posted.

I have to say - it looks cool and it also could be another ACID_X test for browsers, how they actually deal with HTML5 and CSS3. Definitely it shows the potential of HTML5 and CSS3.

Would I do something similar in the real project? Probably no, as it has to many points of failure. It means that alternative versions should be prepared (Flash or low level implementation using images, divs and JS frameworks to handle the animation) just to avoid this:

Would I do something similar in my R&D or downtime project? Possibly yes, if I wanted to learn myself, but at this stage I am too lazy not excited about HTML5/CSS yet...due to the reason above.

For better animation and richer effects I would still stick to the flash despite the fact that I am not greatest fan of that technology. That gives very predictable cross-platform behavior.

At the end, it goes down to the target audience (read browsers market).

In today's post you will find nice background images, massive dropdowns and corporate website that doesn't look like corporate one.

Full size image background

Inspired by Iceland

All we have heard about Iceland recently mostly because of volcano and flight disruptions. Anyway, I think that Iceland is a very interesting country and that website seems to prove that. The imagery used as a background across the main and sub sections is stunning. Other interesting features are the half-transparent navigation elements stacked at the top and the bottom of the pages.

MNJ Groupe

Here the simple layout is combined with full background images. The quality of the pictures is not as good as in the example above but still works quite well.

Project details pages are equipped with accordion and image gallery based on the AJAX. What I like is the way how URLs in the gallery pagination are handled - once hyperlink is clicked, the address bar in the browsers gets the update. This is very handy for bookmarking.

Grids and chunky drop-downs

Pool Inquinamento

Very nice usage and indication of the grid (the background image). Actually two of them (almost). There is a vertical grid that divides layout into columns and there is attempt to use the horizontal one. If line height of text elements was adjusted accordingly, text would nicely meet horizontal lines in the background, but despite that site makes good impression. Regarding the text - website uses @font-face as a font embedding technique.

What I also like is the navigation with massive dropdown menus fitted into the grid lines. Clever.

Anne Frank Museum

Well designed - that was my first impression that still lasts. Colours, fonts layout combined together very well. Main navigation is equipped with massive dropdowns enhanced with images.

The most interesting section is the history of Anne Frank where you can find timeline based on the JS content slider. This has been done really well.

Corporate world

AOL Corp

AOL corporate website follows recent AOL logo revamp. Let's forget the logo and take a look at that website - it doesn’t look like a typical boring section. That creative approach including colours, layout and fonts gives the positive impression and you don't have a feeling that you are dealing with corporate giant.

Fonts like DIN or Helvetica are embedded using @font-face. +1 AOL

It has been a year since I started posting post on my blog, but the design is slightly older. The last couple of months were very busy and productive for me and I learned a lot. I have improved my design and development skills focusing myself on the front-end development. I realized that blog needs some improvements.

In the new version of my blog I want to improve the following things. Please find my analysis and thoughts below.

Typography

It always can be better. In my Weekly Inspiration series I have collected few good and inspiring examples of nice typography. I also follow Aisle One and The Grid System and I am sure that I will find something simple and inspiring.

I already have made some improvements to the current version. I have adjusted the font size, line height and spacing between paragraphs and headings giving them more "space to breathe". Originally I used pixels as font measuring unit and changed recently to ems but I think that I will go back to pixels (not sure about that move yet).

Font embedding technique

This is nice area to play with some new interesting solutions. I've been using sIFR as a font embedding solution (Flash dependent) but I don't see the future for that. There are other solutions like Cufon, Typeface, Typkit, even Google have released their own solution. There is also @font-face originally proposed to CSS2 (improved in CSS3) and surprisingly supported by IE since version 5 [sic!]. So far I consider either @font-face or Google Font Api.

Headings

Current implementation of headings doesn't meet SEO guidelines. I used to use H1 heading as logo container (text replaced in CSS with logo) then H2 as section title and so on. How does the current structure look like? Here it is:

• H1 - ffffrozen - Adam Bezulski's blog - text replaced with image using CSS
• H2 - latest entries (or section title) / post title when viewed in details page
• H3 - post title on the index page (or category/tag list page)
• H4-H6 - rest of the headings

The problem with the current implementation is that SEO spiders (read Google spiders) will only look for H1 and H2 headings while rest of them will be ignored (still, the H1 is the most important).
What I have to do is push the elements one or two levels up and remove the logo from the H1 element (you can have only one H1 element on the page).

Post layouts

Changes are needed without a doubt and some of them are related to the new features that I want to bring in the version. My goal is to bring reduce the page height (and weight) and increase the number of information. The question is, how am I going to do that? Quite simple: I want to introduce "featured post" that shows selected amount of the text without comments) while "non-featured" will only display the titles.

Portfolio page

All I can say that the current layout looks neglected (shame for me!) maybe because I was more focused on the dedicated portfolio website (bezulski.com). But this is not an excuse anymore. Blog and portfolio website use the same database so I am able to do changes without a harm. Definitely I want to use bigger images and improve typography within that section as well.

Flickr

This is not going to be flickr badge anymore as it is now. It used to be flickr badge on my portfolio website but recently I have replaced it with the static content equipped with the carousel. I want to use the same approach in the new version.

Changes to backed?

I would say some additional functionality and improvements but not radical. Once I had thoughts about rewriting the project in ASP.NET MVC2 but I will not go that way. I spent too much time to develop the existing solution (n-tier architecture) and I think it is worth maintaining. I can see the advantage of using MVC2 platform and I will use it in my new projects.

 Last week browsing for some inspiration I bookmarked some nice websites. Here they are.

Pixels got bigger

Trikoder

The first thing that I noticed was background with big pixels/tiles. Also interesting is the fade in/fade out effect once those tiles are hovered. That effect is also populated across the whole website.

On the home page there is another interesting functionality for "Selected Work" pane. Previous/next arrow click, triggers the page background change (enlarged screen-grab of the selected project). Overall impression is really good as the website uses non-standard/out of the box layout.

WebMynd

Another website with "enlarged pixels" in the background but this time with quite simple layout. Header is fixed-positioned and it fades out once page gets scrolled down.

Portfolios

David A. Molanphy

Definitely very well designed portfolio. What really stands out is the portfolio section. Is very descriptive and equipped with the vertical easy to use image slider. Presented work looks well and is worth the attention.
The only one minus is the font size of the body text - it could be a little bit larger.

Mohan Balaji

Totally different approach in this portfolio - one page layout in this case. I think that despite the sticky side navigation for the work section, the whole website it is too long. Nevertheless, overall impression is good (I like the colour scheme). What caught my eye is the "about me" section with timeline.

Environment Friendly

DBA

The website is as clean and neutral as products they sell (well, almost). This website has clinically white layout with easy to scan and read information. The product details page features good images and some nice info-graphics.

Now, the bad thing. The checkout process doesn't work - I tried to purchase set of pens few times and each attempt ended with error. Not good if you want to make a serious business.

Taste of the luxury?

Merus Wines

Dark colours and high quality images give the impression that you deal with sophisticated wine. At least that was my impression.

Content on the home page and across the main sections is fitted into vertical content slider based on the jCarouselLite; Cufon is also in use as a font embedding technique. The main navigation is placed at the bottom of the screen (fixed position) and appears once mouse reaches the bottom of the page.
 

 This is it. The tenth Weekly Inspiration post. I never thought that I will maintain that series on (almost) regular basis. In today's entry you will find some wild examples of JavaScript usage and Swiss influenced layout.

Here comes your JavaScript not Flash

Nissan LEAF (US)

When I saw the website for the first I was pretty sure that I deal with flash. Wrong. It is purely based on the JS and SVG. If you wonder how it works underneath, just use the Firebug.
The final effect is just amazing and I bet it took some time and effort to do that.

Is it sunshine?

This weather forecast website is also based on the JS and Google Map. If you wonder what's the current weather in the place that you're interested in, just zoom-in or type location name in the search box (equipped with suggestions). Google map will be overlayed with goog-looking icons.

For me, the most interesting feature is the slider with the chart at the bottom of the screen. Once moved, map is updated. You can also get the embedded version of that website.

Lightmaker

This is really good example what you can do with WordPress and JS Frameworks (MooTools is this case). Accordion effect mixed together with scroll-to functionality give really good impression. And it comes even better with good imagery and background in the header.

Typography, grid and Swiss inspiration

Neography blog

Use of typography based grid is very obvious and here is the proof. This iconic poster was designed by Swiss designer Josef Müller-Brockmann and has influenced many other designers.
For me the calendar at the top and contrastive colours work really well. Typography also benefits from the grid system and all headings use Typekit as font embedding technique.

Overall good impression

Team Excellence

Website is clean and simple and makes really good impression. Content is easy to read and works nice with white and gray colour palette. In terms of visual aspect there is one important thing - no stock imagery. From my experience other consulting companies probably will have websites with images showing shaking hands or well-dressed and smiling people looking at something. Or even worse, pictures of skyscraper or porcelain globes.

There is also CSS3 in use - all headings have CSS text-shadow property.

Exclusive reels

I am not into fishing. my family used to own some ponds but still - I don't like fishing, I never have and never will. And definitely I wouldn't pay more then $2000 for a reel.

Dutch company produces "exclusive" reels and their website gives that impression. Website is really simple - background quality image, obvious navigation (with animated drop-down) and well laid content do the job.

This week's collection of websites for WI has been coincidentally grouped by country of origin. Last week I found some nice websites from Germany, Sweden and Australia. There is also one from US but I will describe it at the end of this entry.

"Zee Germans"

Design made in Germany

The title of the website is self-explanatory and the showcase is broken into categories (web design, gfx design, etc.). Typical to the Germans - Ordnung muss sein - and that has been achieved by grid-based layout. Typography and combined with the darker gray text make the content easy to read.

The most interesting feature is the ajax-based "lazy loading". Once the end of the page is reached, new content appears. Looks like an alternative to paging for me.

Moving Line

What makes me that I like that website is the simple and clean layout incorporated with the contrasting colours. Beige background and black elements with white and light gray content work really well. The details page for projects is equipped with the image carousel and show/hide content.

Mammut Medien

Coincidentally, the last German website it this showcase uses similar colour palette as the previous ones. Beige (or ecru?) background and dark gray content with additional blue. Works fine for me. The typography is also worth attention where chunky headings use Cufon as font replacement technique.

What personally annoys me is the exposure to social medias - some page have to many of those buttons.

The Swedes

Destination Skelleftea

Really nice and clean website could work even better if the language selector was more obvious. It took me while to locate and click that tiny flag for English version. OK, no more ranting.

The best thing about that website is the main navigation related to the activities that you can actually do. Nothing explains more like "See", "Do" or "Travel". Each of the main sections has its own dedicated colour for the heading and the sub-navigation, which is strictly related to the selected section (just see Eat or Travel). The interesting feature is the weather forecast panel that says "right now" for the current weather state.

Thomson Interactive Media

Looks like beige (or ecru) is quite popular. This interactive media company from Skelleftea (^) uses similar colour pallet on their website as described above the German ones. The layout is good organised and usage of the white space makes the content easy to read (at least for me).

What I find interesting is the sticky search form and big slim headings (Cufon as font replacement solution).

From Down Under

Let's move on to the outer location, Oz.

Charles Elena Design

This one-page website has quite unique and good looking layout. Use of nice graphics, colours (white, red, gray and black) and scroll-to (hello jQuery) functionality gives the impression of one consistent flow. What also looks good is the sticky header with the logo and main navigation.

FOX Classic

How to make website for classic movies channel more interesting and cool looking? Get some nice stills from the movie and get them working as full page background slideshow. And don't forget to include the picture of some lovely ladies and bad-asses (like Clint Eastwood smoking cigar).

Stills from the movies or movie related artworks are also included as page background when you view movie details. All combined with dark colours gives you the impression that you deal with something classic.

I'm (not) afraid of Americans

Joyent

The reason why I chose this website is not the layout and design. Can say that website is well-designed and the effort has paid off. The real reason is the interactive info-graphic (see "technology" section) done by Dave Shea (guy needs no introduction if you are into web standards). Normally I would expect flash over there but everything is HTML, PNG and JS-based. Nothing to add - just love it.

In the meantime Dave also found out, that PNG transparency support in IE8 still sucks.

Last week I found some solutions that will made front-end development easier (at least mine).

Google Font API

The first one is the Google Font API (with Google Font Directory). Google have released font embedding technique that allow to use custom fonts on the websites. There are some well established solutions like sIFR, Typekit, Cufon, Typeface and this is another technique to choose from. What is the difference?

The implementation is is very straightforward and only requires the link to the external CSS file provided by Google. The significant difference between existing solutions is the font library, which is limited and provided by Google (currently 18 fonts).

So far I've been using sIFR as a font embedding technique and I am looking forward to switch to Google API. It is way much simpler and easier to use.

• URL: http://code.google.com/intl/en-EN/apis/webfonts/

jQuery Tiny Carousel

This is another content slider based on jQuery. I've been using jCarousel lite so far and this one also looks interesting. The library itself is very small but when compared to jCarousel lite, more HTML markup is required. The configuration is very simple and offers scrolling direction and paging functionality.

• URL: http://www.baijs.nl/tinycarousel/