Design Focus

Friday Focus 04/29/11: The Parallax Effect

This week on Friday Focus we feature what is probably the most famous non-Flash animated effect employed in websites today.

Designs of the Week


Love the running theme of the rainbow spirographs not only in the heading but in the icons. Interestingly the parallax effect disappears in inner pages, probably to avoid tiring the visitors out, although I personally don’t mind.


I really have no complaints about this one-page site, just the use of Cufon instead of straight-up web fonts.

Tobias Bæck

Love the bright colors and and slanting shapes, and the animation that appears when hovering on links—which is usually tacky but in this case it works.

Esteban Muñoz

Note that in this design, the parallax happens in the footer, as you move your mouse in that zone, and not as you scroll from one section to another.

Nike Better World

One of the best implementations of parallax out there. There are cues for which section of the page you’re in, uncovered layer by layer, and each heading is linked to the next via dotted lines.

Dean Muller

Here’s another parallax that doesn’t happen on scroll and those connecting lines.

I do surf better

Another popular technique: slideshows within slideshows. Here I think some of the background circles are a little too big.

Hobo Lobo of Hamelin

Not fond of how there are both horizonal and vertical scrollbars, but the animations and illustrations are quite impressive, especially the ones that activate when they’re in focus.

Web is Beautiful

The parallax isn’t even the most fascinating feature of this design. The circular motif is certainly another hit trend and this site runs away with that idea.

Social Media Weekly

CSSCSS Stress Testing and Performance Profiling
” I realized fairly quickly that CSS was to blame. Disabling JavaScript had no effect, but disabling all CSS instantly fixed performance.”

CSSSetting CSS3 Border-Radius with Slash Syntax
“Because the standard way of declaring the border-radius values (discussed above) has become so widespread, you may not be aware of an alternative syntax for this property.”

HTMLThe HTML5 Switch
“Really though, you don’t have to rebuild everything, not use everything in HTML5 for it to be worthwhile switching your doctype now.”



Top 7 PHP Frameworks

Planning for developing a PHP web application nowadays also includes choosing the right framework. PHP frameworks have become increasingly popular and rightfully so. They can save huge amount of time with coding. Some of them are easy to learn and use, even if you don’t master OOP programming.

Using a framework also takes care of important things like security and easy update of your own code and all other packages. Some frameworks have a huge and active user base and community, making it easy to look for help and solutions if you get stuck.

PHP latest version, 5.3.5 brought many changes which made some of the framework malfunction. Most of them now do support PHP 5.3.5 while others have rewritten their whole code base.

I selected 7 of the most used frameworks and listed them here with key features and some accompanying weblog entries by people with user experience.

My personal preference from past experience is CodeIgniter, but the brand new released FUEL sounds very promising.



Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the best ideas of other frameworks with a fresh start.

Some key features:

  • module and HMVC support built-in
  • full package support built-in
  • has more out-of-the-box functionality

FuelPHP for CodeIgniter Developers A weblog entry from a former CodeIgniter user about FUEL.


CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.

Some key features:

  • MVC based
  • Top notch user guide and documentation


CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Some key features:

  • MVC based
  • Helpers for HTML, Forms, Pagination, AJAX, Javascript, XML, RSS and more

CodeIgniter vs CakePHP An old yet still worth to read weblog entry.


Kohana is an elegant HMVC PHP5 framework that provides a rich set of components for building web applications.

Some key features:

  • Very fast
  • HMVC based

Kohana 3 & CodeIgniter 2


Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase.

Some key features:

  • Makes use of commonly available API’s like, Google, Flickr, Amazon, etc.
  • Enterprise ready


Symfony is a web application framework for PHP projects.

Some key features:

  • ORM (Object-relational mapping)


Yii comes with rich features: MVC, DAO/ActiveRecord, I18N/L10N, caching, authentication and role-based access control, scaffolding, testing, etc. It can reduce your development time significantly.

Some key features:

  • Skinning and theming
  • Database Access Objects (DAO), Query Builder, Active Record, DB Migration



Dutch Web Design Inspiration

The web design community is mostly dominated by U.S. based web design companies and designers. It does make sense considering that English is the first language of the world. Designers from other countries may prefer to join communities in their own language, which keeps them from a larger crowd.

I decided to list a couple of websites by Dutch web design companies. The purpose is not to list the best designs but to give a feel of what goes on in other countries. I also noted which websites was made by which company, you can check their sites to see their complete portfolios. That’s when Google translate comes in handy.

More →


Design Focus

Friday Focus 04/22/11: Designs for Designers

This week’s Friday Focus is a little meta: a combination of useful guides and tools geared towards designers and developers all wrapped in inspiring designs.

Designs of the Week

Photoshop Etiquette

Interface imitation clearly at work here, but note how the famous checkered pattern is blurred a little to make the foreground more readable. Nice integration of share buttons into the “toolbar”.

Comic Sans Criminal

While the site looks elegant and minimal, I’m getting more and more allergic to text typeset in all-caps, narrow fonts as much as I do with ones set in Comic Sans.

Vector Mill

Not a bit of detail left unturned here. Love how the Twitter and Facebook buttons are integrated as stamps on the foot of the crate.

5 Steps to HTML5

I like the progress bar-style approach to the site, the only thing that feels off is moving a step backward uses the same animation as moving forward.

Web monitoring with Stella

I feel like the vintage touch that’s become popular lately also facilitates wit in copy and other user experience areas. Just look at the logo!

The Lost Type Co-op

Simple and striking enough; I hope to see more fonts offerings here.

Explorations in Typography

Not only is this site a great tool, but it’s a great idea for promoting the book it’s based on.

Code School

I love the combination of the old school watercolor paintings of the countryside combined with fairly modern interface touches.

Social Media Weekly

CSSFaking float: center with Pseudo Elements

CSS39 Ridiculous Things To Do With CSS3 Box Shadows

CSSCSS3 Patterns Gallery

CSSSafe CSS Defaults


Code, Design

Facebook Page Design and Tutorials

Since the introduction of the ‘Like’ button the use of Facebook pages by companies, brands, etc. has increased immensely. Facebook has a limit on amount of friends one can have and if you surpase that amount you need to to switch your account to a page. With pages you can add your personal design inside the Facebook frame. A websites within a website if you will.

I listed a couple of brands, music stars and other companies who make good use of the Facebook page. My favorite one of the list is Dell. Nice design and pretty interactive. These pages can give you an idea what all is possible with Facebook Pages.

The next list contains a couple of tutorials to help you grasp how to adjust your Facebook page. I was taken aback how few tutorials there are out there considering how popular Facebook Pages are. Not only with big names but they are also used by schools, sport clubs, small bands, etc.

I selected the most recent one, although there aren’t any updated ones since Facebook changed their pages layout. Hopefully though these tutorials will help you along.

Facebook Fan Page Design Inspirations


Facebook Pages Design


Facebook Pages Design

Lenny Kravitz

Facebook Pages Design


Facebook Pages Design


Facebook Pages Design


Facebook Pages Design


Facebook Pages Design


Facebook Pages Design

Nike Football

Facebook Pages Design

Facebook Fan Page Creation Tutorials

A Facebook Fan Page Tutorial

Video tutorials

Facebook fanpage static fbml code and tutorial

FBML code example

Facebook Fan Page Photos Tutorial

Also shows how to take full profit of Facebook’s new way to display profile photos.

How to Create Custom Facebook Pages

A ten step tutorial with text and videos.

Video Tutorial on New Facebook Fan Page Layout

Learn what’s new in the Facebook fan page layout. A video and a text summary of the highlights.


Design Focus

Friday Focus 04/15/11: Moving Backgrounds

This week on Friday Focus, we’re looking at some sites that employ subtle, unobtrusive animation in their backgrounds.

Designs of the Week

Facio Design

I like the mix of textures going on here, from the scan lines to the paper backgrounds to the pixel waves. Too bad the moving clouds don’t happen on every page.

Go Live!

Excellent illustrations and cheerful vibe. Interesting choice to put the navigation items at the top right rather than the usual top left. I kinda wish the “launch video” could keep playing as the launched site loaded!

Sophie Hardach

The map/nautical theme is getting more and more popular. The best part of this site has to be the contact form, particularly the way you submit by affixing a stamp to the postcard.

Social Media Weekly

CSSSimplify Your CSS With the any() Selector
“This structural nesting makes it considerably more complex to target groups of tags in CSS.”

TypographyWhatFont Bookmarklet
“You can easily get font information about the text you are hovering on.”

ProgrammingWhat skills do self-taught programmers commonly lack?
“Or, to put it another way: What should a self-taught programmer study to get up to speed with his/her formally-educated peers?”

DesignThe Cicada Principle and Why It Matters to Web Designers
“When you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular intervals, it really breaks the illusion of organic randomness. Maybe we borrow some ideas from cicadas to break that pattern?”


Code, Webapps

Web Development Browser Extensions

Now a days browser vendors are competing with each other on who has the most and fastest version update. With CSS now a standard technique, the competition is also on on who supports the most selectors and uses the best syntax. Have you seen the gradient syntax? Safari 4 really made an art of it, luckily they came to their senses in Safari 5.1:

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);

Code by CSS Tricks

Now that CSS has become so extensive and fully implemented, web browsers extensions are unmissable if you regularly work with HTML and CSS. Extensions have become a standard in most developers their browsers, that there are even more niche ones like for JSON, jQuery and SQLite.

I collected the most used web developer extensions for all 5 main browsers. I’m not an Opera or Internet Explorer user, so I might have missed a good one. Firefox is my main browser and Chrome secondary. I don’t use Safari either, only for testing. I would love to make Chrome my main browser, but I can’t find a nice theme for it, like GrApple which I use with Firefox.

Whether you work with code everyday or not, these extensions are a must in your browser, they’ll save you some headache along the way.

Firefox 4

Firefox 4 Web Developer Extensions

Web Developer



It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. It captures Flash too!

SQLite Manager


View Source Chart


Simple color picker plug-in for Firebug.

Safari 5

Safari Web Developer Extensions


This is an extension to validate your (X)HTML, CSS and RSS feed with the Unified W3C Validator (Unicorn).

User CSS

User CSS is a Safari 5 extension that will easily enable you to override stylesheets for any web page for anything—from changing fonts, colors to hiding ads and more!

Safari Developer

Safari Developer implements features like window resizing, element highlighting, stylesheet disabling, markup validation (and much more).


Chrome Web Developer Extensions

Web Developer

Firebug Lite

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.4 multi-line scripts in the context of the current web page.

Eye Dropper

Resolution Test


Opera Web Developer Extensions

Firebug Lite Button


HTML5 Outliner


Formats and highlights JSON data loaded from file or server.

Internet Explorer

Internet Explorer Web Developer Extensions

Internet Explorer Developer Toolbar

Web Accessibility Toolbar

Firebug Lite


Design Focus

Friday Focus 04/08/11: Robotic Revolution

This week on Friday Focus, robots are taking over Devlounge!

Designs of the Week

Mr. Roboto

Love the coloring but I’m not sure why the robot has to disappear in the inner pages, it becomes more obvious that there’s something missing. The contact form uses a circular button (reminiscent of real life pushbuttons).


Everything fits and lines up nicely, I just wish the signup form looked more like the design (at least some bit of the color palette).


This one, on the other hand, has an extremely captivating signup form on top of an already lovely design. The process flowchart is succinct but still informative.


The robot have great personality but that doesn’t seem to translate into other aspects of the design.


The grouping of the icons and placement of the buttons just work. Everything blends in neatly.


Robot-focused designs seem to call for bold fonts and relatively bright colors. Although I think the text on the inner pages look underdesigned.

Web Visionary Awards

Making a huge robot as the design for a long, one-page site is a great idea, you’ll probably want to zoom out to see the whole thing.

Social Media Weekly

TypographyType on your email
“Newsletters that drop in my inbox rarely excite me. Those that do come from type foundries. Not only is the carefully crafted composition of new, updated and popular fonts fun eye candy, it’s also a great way to keep modern typefaces top of mind.”

JavaScriptHow to get all the browsers playing ball
“What if you could include a single JavaScript library, and it automatically detected the state of the browser support for the latest technology, and where the browser is lacking, the JavaScript library plugs the missing gaps.”

Product DesignProduct design at GitHub
“When I talk about product design I’m referring to the process by which you decide what your product does and does not do. I happen to think we do a pretty good job of this at GitHub, and I’d like to give you a bit of an insight into our process and hopefully shed some light on why it works so well.”

TypographyA Crash Course in Typography: Paragraphs and Special Characters
“Body copy makes up the majority of many websites. Headlines and other bits of typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer.”


Design Focus

Friday Focus 04/01/11: Help Japan

It may be April Fools’ today but we’re completely serious about turning the spotlight on worldwide causes dedicated towards Japan relief. Get inspired by these beautiful and thoughtful websites.

Designs of the Week

Love for Japan

Beautiful textures and illustrations everywhere for that warm, comforting feeling. I like the subtle translucency and the way the shadows blend in.

NOLA Japan Quake Fund

Relatively simple setup here, but striking and effective.

Great Tohoku earthquake

A Swiss design approach combined with a focus on infographics and geometric forms.

Empowering Japan

Another minimal site with one big red button for maximum impact.

#365bundle: $5 for awesome design stuff & 100% goes to the Red Cross in Japan.

Using red (because of Japan and the message of urgency and aid) and yellow, textures, and uppercase letters seems to be a running theme. Here it’s a contrast between light grungy, textured elements and something modern.

Cause For Design

There’s a nice big red sun in the background although it only works well for wide screens.

Japan and Pacific Relief T-shirt Challenge

I like the negative space in the header. Everything’s grayed out except for the colorful Threadless buttons and the shirt designs.

Social Media Weekly

CSSCSSPrefixer & prefixMyCSS

CSSThe CSS3 Flexible Box Layout Module (flexbox)

User ExperienceWeb Forms that Don’t Make People Angry

CSSHow to avoid common CSS3 mistakes

MobileMobile Form Design Strategies

AccessibilityWhy we should support users with no Javascript

CSStext-align: centaur;