Design Focus

Friday Focus 10/29/10: Irregular Shapes

This week on Friday Focus, we’re looking at designs with edges and figures that you don’t see everyday. Instead of the usual rectangles, rounded corners, and circles, why not try these kooky shapes?

Designs of the Week

South Metro Connect

It’s always a good idea to echo your logo’s silhouette in the design. I also like how everything is layered one top of the other and stepping out of what would otherwise be boundaries.

Wentings Cycle & Mountain Shop

I think some of the content areas need a little more distinction, but how snazzy looking is that subscribe box—see what a single slash down a rectangle can do?

Tu Amigo en Granada

Content area distinction, check. Is the shape too repetitive though, and does it make the too-straight edge photo slideshow a little out of place?


Lovin’ every slanted edge here. Despite predominant use of green here, great idea to color the winter sport icons blue.

Radim Kurka

Great way to convey speed, action, excitement. Also, thin arrows repeat all over the design.

Site Optimizer

Another design inspired by the logo. It would have been nice, though, if there were more color in other parts of the site.

Social Media Weekly

DesignCreate An Animated Gif Banner
“This technique is very useful for any serious marketers of any industry who need create animated banners for ad networks, it’s also good fun.”

DesignGreat Questions Lead to Great Design
“Without constraints a designer cannot operate, but if you don’t ask the right questions, small issues can lead to big problems down the line. Here’s a typical set of questions I use to sift out the constraints within a design project.”



7 Handy Cheat Sheets To Help You Code Your Own WordPress Theme

After countless of design and inspiration list you have finally come up with your own website design. But it is still sitting in Photoshop waiting to be coded. Coding a WordPress theme for the first time can appear a daunting task and even if you have done it before there is a lot of tag and code to remember.

Personally when coding a WordPress theme I’m always googling or searching the WordPress codex for solutions. This made me realize that others have the same issues and maybe even beyond WordPress only, with HTML, CSS, PHP and jQuery.

So I looked around and selected the best and most updated cheat sheets I could find to help you code your own WordPress theme. I aimed mostly for web page and PDF versions; Copy and Paste goodness that you don’t get with image versions.

HTML5 & CSS3 Compatibilty Chart

HTML5 & CSS3 Compatibility Chart

Find me by IP has a very good chart covering everything about HTML5 & CSS3, they keep track of all visitors browser data and they offer you the same service, just send others a link supplied by Find me by IP and you’ll get all information of their browser.

HTML5/CSS3 Cheat Sheet


You have decided to code your new theme with HTML5 and CSS3, but lets admit it a lot of the syntax and selectors are just to complicated to commit by memory. Box-shadow, text-shadow, lets not even talk about gradients. This cheat sheets will save you a lot of time.

XHTML and CSS Cheat Sheet


Don’t want to go hardcore HTML5 and CSS3 yet? These clear and clean XHTML and CSS Cheat Sheets cover everything just in case you have forgotten something.

WordPress 3.0 Cheat Sheet (All Short Codes)

WordPress 3 Cheat Sheet

The mother-load of all cheat sheets, all tags and shortcodes. This very clear overview links back each item to the WordPress Codex, saving you time from searching in the Codex and heaving to choose which result to pick.

WordPress Theme Development Check List – PDF Version

WordPress Theme Checklist

This checklist is very important, you have to name your stylesheet “style.css”, other pages also have a required name. If you want to release your theme for others to use it is important that you have covered all HTML attributes, such as lists, headers, block-quotes, etc.

PHP Cheat Sheet


if you have basic knowledge of PHP and want to mod your page and post entries result a bit this cheat sheet will come in handy.

jQuery 1.4.2 Visual Cheat Sheet


Feeling even more brave or worse, no plug-in for what you need? This jQuery cheat sheet will help you if you need to implement some jQuery codes that need some modifications.


Design Focus

Friday Focus 10/22/10: Beautiful Data

Pie charts and graphs have never looked sexier with their integration into these websites. It’s beautiful data visualizations on this week’s Friday Focus.

Designs of the Week


This could look a little light for some but I think it’s got enough contrast and keeps the jumble of numbers and figures pristine. The notecard style boxes looks great, and it’s also the logo of the site.

Swedish Podge 2010

Pure eyecandy. The only way this site could get any better is if the charts were interactive.


The gray against the white text is hard to read, but it’s effective with the rainbow graphs.

Bermon Painter

A little disappointed that even the text is part of the image, but it’s clear that more designers are translating summaries of their resumes and skill sets into graphs like this.

Coffee by Week, 2009

Barely designed, but the concept of using pictures to illustrate the bar graph is great.

Joey Lomanto

Another rainbow chart, but looks more decorative than a real graph, which isn’t really an issue if that’s the goal anyway.


Similar look, similarly decorative, but great inspiration for developing a particular style in data visualization.

Social Media Weekly

DesignWelcome to the Era of Creative Meritocracy
“Without creative meritocracy, we suffer because our talent and hard work aren’t enough to land the job. Clients suffer because they receive inferior work. Moreover, our industries and society suffer from mediocrity.”

CSSWhy we don’t have a parent selector
“On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven’t worked on a browser engine, I have my theories.”

HTML, JavaScript Semantic Markup or Death? Part I
“Despite the title, this post is actually mostly about JavaScript, or more specifically, the relationship between JavaScript and HTML.”


Code, Design

12 Old and New CSS Menu Techniques

A navigation menu, something unmissable in all websites, one of the most important factor besides content. You can have a simple navigation or a very intricate one, design and code wise. Once I learned some key navigation techniques I went on to learn how to work around WordPress generated navigation to still be able to use dropdown menus without extra plug-ins. In most cases I rather hardcode the navigation, especially if they require more specific HTML code.

Now that CSS has become mainstream a lot of tutorial focus more on advanced techniques assuming you already know the basics. Same thing goes for books, I’m a book person and I have some of the latest CSS books and more and more writers start their introduction saying that they assume you have basic and working knowledge about CSS.

Not everyone can learn and understand coding right away, myself I am good at CSS and XHTML but with PHP it took some long hours and it still does. My skills becomes rusty very fast if I don’t code regularly. This is where old tutorials come in handy, they might date back a few years but for getting back to basics or if you just started out they are the best tutorials. Most of them have a lot of user comments full of tips, adjustments and bug fixes, so plenty of resources.

I selected 12 navigation techniques from very intricate to simple ones, old and new ones. They are build with CSS, CSS3, jQuery, Javascript and in some cases graphics. Dig in and find out what you have forgotten or what you didn’t know before and freshen up your navigation coding skills!

Create an apple style menu and improve it via jQuery

CSS Menu

A flyout menu with breadcrumb trail

CSS Menu

Advanced CSS Menu

CSS Menu

Javascritpt Dock Fisheye Menu

CSS Menu

Sweet AJAX Tabs With jQuery 1.4 & CSS3

CSS Menu

Create a Slick Tabbed Content Area using CSS & jQuery

CSS Menu

CSS Overlapping Tabs Menu

CSS Menu

CSS Sprite Navigation Tutorial

CSS Menu

Awesome Cufonized Fly-out Menu with jQuery and CSS3

CSS Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

CSS Menu

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

CSS Menu

CSS3 Minimalistic Navigation Menu

CSS Menu



15 Beautiful Minimalistic Single Page Sites

I have a thing for minimalistic websites, because they don’t require intricate graphics and yet they are harder to create then a non minimalistic websites. It’s very difficult to create less and still have a beautiful page. If I could finally sit down and teach myself to use a decent grid I can create the ultimate page to my taste; grid based and minimalistic.

I recently made a single page site myself and it took me way longer then a multi-paged website. Having the right background, color and font takes time and serious consideration. Now that last one is true for every kind of design but with a minimalistic page there isn’t a lot to focus on or distract. Now we all have opinions on what makes a website minimalistic, the line on that one isn’t an exact science. Web design is still art and art was never an exact science.

When you really want to focus on content, minimalism is one of the best ways in my opinion, meaning that there aren’t other factors on the page that take away from the key content. With that on mind I selected 15 single page websites that are beautiful and well done. I hope these will serve as an inspiration for you and inspire you to try create a single page website.

Alessandro Cavallo

Single page site

Fabiano Meneghetti

Single page site

Edit Studio

Single page site


Single page site

Giant Creative

Single page site


Single page site


Single page site

Dan Tobolic

Single page site

Mike Ambs

Single page site

Matt Cooper

Single page site

Ben Lind

Single page site

Peter Pearson

Single page site

Dan Scotton

Single page site

Peter Viszt

Single page site


Design Focus

Friday Focus 10/15/10: Book Sites

Check out how these designs brought printed books to life online on this week’s Friday Focus.

Designs of the Week

Speak Human

Love the chair illustration on the book appearing in the header. It’s also a good idea to include faces of the people giving testimonials and to make sure they look great in those pictures.

Making Money is Killing Your Business

The Order Now button is a little too light to be the focal point of this page, even if the red arrow should draw your eye to it. I do like the subtlety of the gradients though. Also, the book could be a little higher; it looks like the logo is missing in the top left area.

Love Leadership Book

The background effect feels a little dated (Mac OS X wallpaper) although I think the vivid colors work well.

Rockstar Business

It’s interesting to find the logo at the top right instead of the usual left, or even center. The teasers at the bottom is a great idea although I would have preferred them to appear higher on the page.

Think Unstuck

The design feels a little generic considering the subject of the book. I like the big bold text and intro though, as well as the bright Buy Now button.

The Wisdom of Bees

You don’t have to put a literal image of the book on the website, you can integrate the book cover design like this, even add a touch of animation.

Hardboiled Web Design

All I have to say is: CSS animations and SVG for the win!

Social Media Weekly

AccessibilityThe accesskey attribute – do we still need it?
“The accesskey’s uptake within web development has been almost non-existent for three main reasons; differing shortcut values, browser and screenreader conflicts and discoverability.”

HTML5Facebook: Using HTML5 Today
“We are excited about HTML5 and wanted to share with you some of the things we’re already using it for!”


Design Focus

Friday Focus 10/08/10: Event Websites

Possibly one of the most exciting website genres out there, we’re focusing on event sites this week on Friday Focus.

Designs of the Week


The photo slideshow effect here works really well. The background bamboo pattern is also a nice idea.

New Adventures in Web Design conference

The highlight of this design are the interactive shapes that are not only built with CSS3 effects, but tell stories about the different principles of design.

Tahoe Tech Talk 2010

Another site that has subtle animations, but also time-sensitive design. When implementing a one-page site it’s important to remember that scrolling from one section to another is important, so a back to top button that appears only when you’ve left the top section gives a more striking notice than a button that’s constantly there. The large headings and and photos are great as well.

2010 Online News Association Conference

This one’s a little modest compared to the others we’ve seen, but still nicely organized and even cheerful (read: not boring). Always a good idea to format dates calendar-style and have an “important dates” to remember section.

Tulsa State Fair

Love the irregularly shaped menu items and other buttons. I wish the large banner switched to show different attractions at the state fair though, and not just have them appear in the footer.

Festival Internacional de Canción Itinerante

I love how the introductory text is styled, not to mention the colors. Relatively simple design but no detail was missed here.

Barrel + BARC | 24 Hour Challenge

A little bit of the split and centered approach here. The date stamps are a nice touch, and the details of the project/event are nicely mapped out in one table.

BrewFest Green Bay 2010

Great idea to hide the tall header and keep the menu as you scroll down (it doesn’t have to be all or nothing). Some sections are a little too text heavy, but it’s the toasts section that could have been styled to be more meaningful looking.

La De Da New Years Festival

Very nicely designed website. Every button and heading has its own little icon too. Good idea to include sample tracks of the artists playing at the festival.

Bakersfield Oktoberfest

The intro blurb below the header isn’t quite perfect, but everything’s easy to find and read.

Future of Web Design

This year’s FOWD conference website keeps the bold look with a little realignment. The information link is a simple graphic right alongside a summary by the numbers. Not sure what the list of years in the footer is doing in the timeline, but using images from NASA is a great move.

Social Media Weekly

SEOSEO for the Average Joe
“From about 10 lists I found, I gathered only the points that we would need and would make sense to the average person looking to ensure their SEO is up to snuff.”

CSSHardboiled CSS3 Media Queries
“Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.”



Top 12 WordPress themes and plug-ins for mobile devices

Now that tablets are becoming mainstream and smartphones are getting better displays and faster processors more and more people are going to be browsing online with their mobile devices. If there was a time to make your website mobile ready it would be now.

If your website runs on WordPress it is as simple as selecting a theme or plug-in that will transform your website for mobile devices. Most themes and plug-ins will automatically detect if a user is browsing from a computer or mobile device and automatically serve the right layout.

More →


Design Focus

Friday Focus 10/01/10: Old Style Illustrations

Happy October and Friday Focus! This week we’re looking at designs that incorporate illustrations you see in old books, which give a quirky yet nostalgic effect.

Designs of the Week

Spring: Supporting Local Biodiversity

I like how even the logo is distressed; a nice confined design.

Simon Collison

In embracing an old style look you’ll probably adopt an old style manner of copywriting as well, or at least a quirky one that contrasts against the serious black and white pictures.


With all the interest in poster-style web typography these days, I can only wish the introductory text on this page weren’t an just image.

Great Bible Tales

The site hasn’t launched yet but you can glean from this screen that the design is mostly modern and the illustration stays in the background. I hope that’s not the case when it launches because there’s much potential there.

LivingDesign by Asif R Naqvi

This is a fascinatingly ornate design. I’m most delighted by the search, subscribe, Twitter, and Facebook graphics on the sidebar. Makes you want everything else, like the archives list, to have the same touch. The use of sans serif for the post text also kind of breaks that feel a bit.


There are a couple ofrules that this design seems to break: no descriptions for the menu icons (not even tooltip text) and center aligned body text. Perhaps the site owner actually wanted it that way, but still.


Not many illustrations here, so they don’t feel that well-integrated. But the animation on the logo, both in the header and footer, is a nifty touch.

10K Apart

Sometimes you wonder why a design uses a particular illustration. In this case, you’ll get it once you reach the footer. What I really like here is the almost-missable effect below the buttons and images.

Bean Exchange

The border below the header is as refined as the designs on dollar bills. The patterns are not what you see everyday or on stock image sites. The bottom border of beans, however, isn’t as well done; I think it could be a little taller and denser so it looks more appetizing.

Parish Atlanta

No illustration spared here. It’s not too clear which ones you can click on, a usual problem with this look, and some areas can be styled even further, but the site makes you want to keep scrolling.

Social Media Weekly

UIUI Pattern Ideas: List with Functions
“Last week I asked people to participate in a group design project on a specific design pattern: a list with functions.”

CSSAn (Almost) Complete Guide to CSS3 Multi-column Layouts
“One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.”

HTMLHTML5: The Facts And The Myths
“…A lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, JavaScript expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.”

CSSclearfix Reloaded + overflow:hidden Demystified
“This short article is about enhancing the first method and shedding some light on the real meaning of the second.”

CSSKeeping code clean with content