Anyone who has been involved in a job or profession that requires some level of servicing a client will know that customers can be hard to work with sometimes. In this infographic from the online publication Top Web Design Schools, the “difficult customer” is dissected and explained. It’s a handy little infographic that will prove useful to any web designer who is preparing himself for the eventuality of meeting a difficult client. With the information contained in the infographic, it will hopefully give web designers an idea of what to expect and thus better prepare for such clients.

From: Top Web Design Schools

In creating a corporate website design, novice and experienced alike make mistakes. Listed below are few of the dos and don’ts for corporate website design.

Website Page Structure

In structuring your corporate website, do not just place boxes everywhere. Boxes of different sizes that are not lined up properly will actually grab the attention of your visitors because it simply creates a whirlwind of craziness. What you need to do is to keep your page properly structured. You can follow the structure and balance of a great magazine or newspaper as they have the grid systems in a structure and format that are easy to follow.

Color Scheme

The right color scheme alone will help your website look more professional representing the company behind the elegant design. Consider your prospected visitors and the niche that you are going to compete in, and choose colors accordingly. Brighter color schemes, e.g. CMYK (cyan, magenta, yellow, and key/black) color model would work with entertainment sites, while financial or medical sites look better with lighter and more open color schemes. Palettes for sites with e-commerce platforms will also differ from those offering services rather than products.

A good idea might be to study the effects that colors are known to produce and select the ones fitting your theme accordingly.

With all that in mind, avoid overdoing your website with more than 20 different colors. It will not only make your website look unprofessional but is likely to annoy your readers, too. Make sure to have chosen colors that blend and do not clash.

Company Logo

Branding requires a good corporate logo that you can incorporate to your website. Designing a logo is crucial. If you already have chosen a company name, you can search for your competitors’ company logos to get an idea of what is already in the market and make use of their good (and bad) ideas.

Keep your logo simple and straight. Make sure that it communicates and clearly states your company’s message and identity. You can get some idea from known brands like FedEx, Disney, Starbucks, Virgin, Toyota, ABC, Coca Cola, and more.

Fonts and Sizes

If you have observed, every company or brand has its own unique font for their logo, slogan as well as content on their websites. Make sure you have selected a font that will affect the reading experience of your visitors. You can use a different font and size for your title and another for your content. You can even make a step further and have your own custom font designed for you to make sure that it corresponds perfectly to your needs.

Avoid using over five different fonts in 10 different sizes. It will not only make your site look ugly, but it will also ruin your visitor’s reading experience.

Website Content and Copywriting

Though not exactly in the realm of web design, this is another crucial component of any website that wants to be successful. Make sure that you focus on your website content and place only what is important. For example, if you are designing a website for a company that sells a certain product then make sure that the product is the focus on the website’s homepage. There must be a space on the page that calls to action for the specific product you want to outline. Avoid placing irrelevant ads across your page. Having nice pictures on your website is great, but too many of them comblined with excessive advertisements can make your visitors stay away and never come back.

Make sure you fill your page with copy using words that are short, simple and straight to the point. You can hire an expert if you are not good at writing copy. Choose the right words for your sign-up buttons, page headings, navigation items, and see that they not only look good, but also call to action.

Avoid keyword stuffing in your website. You cannot outsmart Google and your readers are not dumb at all to have it unnoticed. Your site will not only look and read worse than it could but you will definitely be penalized. Keep your website content writing flow naturally and mention keywords in areas needed and in places where they fit.

Conclusion

Designing a website is not only all about SEO and keywords. Make sure you have made excellent choices of color combination, font, and content as these will represent your company. Learn from your competitors’ mistakes and use the limitless Internet resources to your advantage.

Olivia blogs for PsPrint, an online printing company specializing in custom sticker printing among other popular services. Follow PsPrint on Twitter and Facebook

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Coca-Cola + McDonald's 2011 Stewardship Report

The combination of hand-drawn illustrations and photos and the parallax animations that “lift off” each object drives home the charm and quirk of this design. The backgrounds are very bright so the small text is a little difficult to read at times but other than that, a fun little ride.

Dangers of Fracking

Some sites like to do their storytelling with different slides per screenful but in this case it’s one long connected trail, from roads going through factories all the way to underground tunnels. And aside from the usual navigation marker, you’ll see icons pop up and stay at the top of the screen as a summary of the facts you’ve scrolled through so far.

6 Steps to Responsible Paper Purchasing

This one’s also colorful but on a warmer, more “organic” palette. Aside from the large graphics, the different paper textures at work, it’s the typography that gets the message across effectively, with every screenful easy to read.

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Social Media Weekly

Accessibility – Skip links and standards?
“Q: Are there any standards associated with skip links? A: Yes!”

HTML5 – The best of <time>s
“Avid HTML5 watchers will know that the <time> element was dropped from HTML, then re-instated, with more New! Improved! semantics.”

CSS – CSS Specificity
“Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity.”

Debugging, User Experience – Support Details
“Tech support management.”

Accessibility, User Experience – Did we lose track of the big picture?
“Let’s think Responsible Design before anything else.”

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Medis Kök & Bar

Always a good idea to grab inspiration from your logo and and translate it directly into your design. Here you have a sumptuous photo slideshow on the homepage, but inside it’s all color blocking, with each page title in its own column, and the body copy to the left. It’s only unfortunate that background images had to be used instead of real text, and again, too much all caps.

Camp Luxe

It looks like color coding and icon-based navigation go hand in hand in this trend. Lots of boxed in elements here, but still looks very light and breezy. I particularly like the background pattern made up of the icons you find in the navigation, but arranged in a way that’s both luxe and cozy at the same time.

Favolla Comunicação

I like the paper-based forest in the background and the icon designs that mesh so well with the logo. What puts me off a little, however, is the uneven alignment of the boxes and the justified text.

Orestis Webdevelopment

Once again, another icon-focused design, but in this case they’re quite abstract and futuristic looking. The use of very colorful hues is just right and not overwhelming at all.

Maria Helena Cunha

Two more familiar trends here: triangles and the use of CMYK as the color palette. I find the text to the left a little too cramped and dark, and considering each block is pretty lengthy there should have been at least some hover effect that lit them up similar to the one you see to the portfolio on the other half of the page.

Dataveyes

I like how each section literally uses one bold color in its background. The visualizations and and other hover effects are also lovely. Some blocks are cut off though, as if the height isn’t calculated properly, and the typesetting is a little rough.

The Work Cycle

Another CMYK (plus green) color scheme here. One good idea I noticed is the hover on each image puts on a slight tint based on the section it’s in. It’s a little confusing, though, that the four colors are used for both locations and the top navigation as seen in the circles above.

Social Media Weekly

Copywriting, User Experience - Not Lorem Ipsum
“We want clients and designers alike to think about their design and how it will work with the web copy, we want you think about how numbers, symbols and bullet points will look.”

Typography – Our Favorite Typefaces of 2011
“The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most.”

Business – Why I don’t do “mates rates” projects
“It’s almost a certainty that at some point in your career, you’ll be asked by a friend or member of your family to work on a project and feel you should only take a nominal “mates rates” fee. Try not to.”

Typography, Accessibility, Semantics – A better way to use icon fonts
“What do you think about this issue? Is speak:none the Holy Grail of icon fonts? Or could we use SVGs to archive similar things?”

Get solid WordPress themes, plugins, and web design training from iThemes.

Designs of the Week

vlog.it

Every video is displayed in one of the three concentric wheels turning in opposite directions against one another. Clicking on the image loads a lightbox, one of two black-and-white transition animations, and plays the video. You can pick from either Vimeo or YouTube, as these are the designer’s liked/favorited ones on each site. This concept is quite the feat and a bit intensive of some computers, but that’s how experimental websites roll (pun intended). I guess my only comment would be that when you’re not doing anything on the site, i.e. the static state, it’s not animated, and you miss the movement between the welcoming animation and the ones that appear when you do clicks.

Alpis Design

Not visible here but: the logo sports a stylized teardrop/lowercase ‘a’ shape pointing to the lower left, and this form is echoed in the navigation at its right, every link corner except the bottom left is rounded. Aside from the large images in the portfolio section which resize with the layout accordingly, there’s this secion which contains large circular icons that turn when you hover on them.

Ralph Van Rentergem

Lots of strong imagery in this one-pager; for a baby announcement site it’s very mature with lots of browns and rough textures and its overall imported coffee theme, mixed with this carousel and a rocketship a couple of screenfuls below. Another thing I noticed here is that the anchor links use period (.) instead of the usual hashes (#), which is quite surprising.

Youandigraphics

There’s another animation going on in this site and it’s one of a pointing hand pressing a button behind an array of stripes. There are only two images laid on top of the other (the stripes and the hand graphic) but a simple horizontal movement creates the optical illusion of something more. Now, these section headings have several more layers of shapes piled on, rotating in different directions and speeds when you scroll past. All fun ideas and the only concern I have is semantics in the markup.

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Social Media Weekly

CSS, JavaScript – Making Love To WebKit
“This idea started with an accidental discovery: if you put a CSS perspective on a scrollable <DIV>, then 3D elements inside that <DIV> will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.”

CSS – CSS1K
“A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS.”

User Experience – Five skills you need to make AB testing work
“Multivariate and split testing can be crucial for sales conversions but how do you get the most out of it?”

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

That is why you see more websites dedicated to information and exportation of rare and common teas popping up all over the place.

If you are thinking of creating your own – or you are just an enormous tea fanatic – you will love these examples of gorgeous sites dedicated to the beverage.

1. Yogi Products

Rather well known for its aromatic tea blends, Yogi Products has a unique and simple site that comes off as quite elegant. The background is similar to a parchment design, with a rich and bright color that brings to mind the tea itself. The graphic of a steaming cup of tea gives something more to look at, and the simple links keep it user friendly.

2. Celestial Seasonings

Another popular tea company, Celestial Seasonings uses an interesting grid design along with a slideshow to introduce the user to its new and most-bought products. Most of their pictures have a cartoon background, along with images of plants and flowers. You can find the company’s different tea lines up top, such as Sleepy Time and Energy Shots.

3. Zen Tara Tea

The look of tea is beautiful in and of itself; the colors, the sorting of the loose leaves, the plants and flowers in the mix. Zen Tara lets this natural beauty speak for itself. It has a thumbnail with each tea type, a slideshow at the top and relevant links at the header of the page. There is also a blog with latest posts in the side margins.

4. Tazo Tea

I love the interactive nature of Tazo’s site. The homepage features an open book. That leads to the rest of the site, which has interesting links, graphics and even a switch that “controls the Internet”. It is lighthearted and fun, as well as informative.

5. Adagio Teas

Adagio has a site that changes with seasons to relate to whatever event might be happening during that time. Recently it has had their Christmas design up. It shows a large candy cane, to represent its peppermint Christmas line. But my favorite part is the consistent presentation of cups of tea at the top sending the user to the product page for each type.

6. PG Tips

Is there anything better than a monkey puppet with a British accent introducing you to a product? I didn’t think so. This site has the latest commercial from the company featuring its mascot, with an otherwise very simple design. Most of it is on a white background, which is uncommon with professional sites these days. It looks very clean and efficient, but the content makes it much warmer, rather than sterile.

7. Joy’s Teaspoon

Another site that uses pictures of loose tea leaves, this one also has a gorgeous slideshow at the top that shows natural photography like rolling green hills, a steaming cup of tea and more. The link system is a little sloppy, but it all just manages to come off as more rugged and down to earth, rather than the polished look you might have come to expect.

8. Russian Tea

The most formal and classy tea website you will find, the Russian Tea Co. has put together a royal design. There is a front page with information on tea drinking in Russia under a banner and coat of arms. From there, you can find its products and more information on drinking, brewing and more. There is a Russian and an English version.

9. Mighty Leaf

Clean grids always make for good sites, but they need a little extra detail to make them interesting. This site uses illustrations in the header that change with the seasons to spice is up a bit. In the center are full color ads on a slideshow that let you know about the latest sales and new products.

10. Samovar

A full background picture rotates as you watch, with all links at the top of the page and nothing to break the photos of tea leaves, cups of the beverage and cafes. You should be sure to check out its Real Ritual Blog and Tea Porn pages, which are interesting and fun.

What are some of your favorite tea websites? Let us know in the comments.

Sonia Tracy is the content editor for PsPrint, an online printing company, which you can follow on Twitter and Facebook.

Designs of the Week

BBQWar

Having a one-column site champions focus. Blogs often get cluttered with unnecessary information (I’m not even talking about ads) so here’s it nice see that’s not the case. Dashed lines repeat everywhere, and so do the raw treatment to the graphics, from the bulls in the background to the rough borders running form top to bottom (neat idea to use tire tracks too).

SeaChange

The right column illustrations appear in full color upon hover. I like the idea of cutouts in the “paper” to signify separate sections of text. You can also see flecks both in the background and foreground.

The Design Cubicle

There’s also a bit of paper metaphors going on here, from the texture to the illusion of folds. I like all the tiny little patterns used on this page, both the linework and grainy ones. And then there’s a neat little ribbon for the monthly archives to the right side.

Matt Puchlerz

Notice how the background of the typographic heading and the background are both clouds. I also like how the four corners of the page are cut inward (a nice-to-have in CSS3 someday). There are also some stylings in the section headings and the contact form at the bottom. I guess the thing I wanted was an anchor navigation but perhaps one thinks that because it’s a one-page site, it’s no longer necessary?

Adrian Le Bas

Moving your mouse around the page move the blue circle behind the logo. That box also contains more information on its “flip side”, like a business card. Below it are icons that AJAXically loads the other sections of his site. It’s also a responsive design: when the window becomes very narrow the background image disappears and the icons grow larger, becoming more touch-device friendly.

Rivers and Robots

The combination of the blurred background and its lomo filter coloring topped with a subtle parallax effect makes this site for a calming browsing experience. I also really like the almost completely transparent background in the slide-out boxes under each button (not to mention the button style itself).

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Social Media Weekly

User Experience – Stepping Out of Line
“Nature has no “visual design” phase. Why do we?”

Mobile Web Design – “Mobile first” CSS and getting Sass to help with legacy IE
“Even if you want to don’t want to use any of the Sass or Scss syntax, the pre-processor itself can help you to write your CSS in a “mobile first” manner (with multiple breakpoints), provide a “desktop” experience for IE 6/7/8, and avoid some of the performance or maintenance concerns that are sometimes present when juggling the two requirements.”

Ready to go out and design your next website? Try building with the Catalyst Framework.

Designs of the Week

WEAREEMPIRE

The page first loads the logo, then clicking on it displays a trail of circular navigation items for each section of the site. Hovering on each runs a vertically scrolling animation in the background, each unique to the item. Clicking then loads the content area either in the huge half-circle background sliding out from the top, or another slide-out area from the bottom. Nothing too crazy, but lots of fun, casual touches from the heading font choice to the scarcity in straight edges. There’s also a nice little bounce/delay effect in the portfolio slider, where the MBP screenshot “stops” before the iMac one.

RainyDay Interactive

The gray droplets of rain appear to stagger diagonally downward, just as slowly as the ferris wheel turns—it’s not my usual expected behavior for rainfall and almost seems to be creeping instead of falling. Clicking around the area (wait to see your cursor change) reveals people holding black umbrellas appearing out of thin air and floating away. You might even chance upon a dinosaur. The portfolio items are arranged one after the other so it’s a tall website, and scrolling past the first screenful reveals a cloud menu affixed to the left, replacing the original one.

Reverend Danger

This site plays two different animation modes in each section, which you can select by dragging the slider at the top: the pleasant “Reverend” and the more violent “Danger”. Also featured are tree stumps that pop up as you scroll past, and a slider with an added bouncing effect. All areas use simple animations—slides, flips, easing—but it’s the story and visuals that make them special.

Colin Grist

There’s only one small animation here and it’s the smoke coming out of the cowboy’s gun. I like how it looks random or unpredictable enough although it does look just a little pixelated at some points. The slanting text in the top navigation gives a small, old-style touch, while the four circles repeat in the social icons at the bottom.

Harrison Pensa LLP - Season's Greetings

Here’s another on a very short list of sites with the scroll-to-zoom effect, and in this case it’s zooming out instead of zooming in. But that’s only half the story, below it is a shooting game of snowmen and snowballs. I think I only gripe is the two things kind of handicap the scrolling so once you’ve gone down you won’t be able to go up unless you use the “Top” link, which actually reloads the page instead of jumping upwards with an anchor.

Create Digital Media

Here the animations occur in the slider, albeit one you can’t control (at least a pause on hover would be nice). I like the concept of using CMYK colors for each graphic (also on other pages), tying everything together. Other sections remain warm and neutral.

Social Media Weekly

Design – Ketchup Bottles & The Physicality Of Design
“You may not immediately notice these little details, but they make digital interfaces appear more valuable, like little hand-crafted executive paperweights: expensive, heavy and solid.”

CSS – Seven things still missing from CSS
“CSS has come a long way but it’s not perfect (yet). Molly Holzschlag, passionate standardista and open web evangelist, quizzed her peers to find out what they see as the most frustrating aspects of CSS.”

User Experience – A plea for progressive enhancement
“For this ubiquity to truly benefit all of us (not just those of us with a high income, or the latest phone) we have to start building sites using solid, future friendly principles such as progressive enhancement…not just when it’s handy or simple, but all the time.”

CSS, Optimization – Profiling CSS for fun and profit. Optimization notes.
“As our pages/apps become more interactive, the complexity of CSS increases, and browsers start to support more and more “advanced” CSS features, CSS performance will probably become even more important.”

Tools, HTML, CSS – Animatable
“Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.”

Mobile – Test on Real Mobile Devices without Breaking the Bank
“Mobile is the future of the web, so it’s time to start investing in some mobile devices. “

Designs of the Week

Celebrate Christmas at Biltmore

Beautiful graphic touches and type. This site is first split into “Day” and “Night”, then into “Awe”, “Inspiration”, “Joy”, and “Stories”. Each is further broken down into sub-slideshows. Every section on this site slides into the framed panel either vertically or horizontally.

Ramiro Delgado

I like the bold colors and the big graphics put together, but I’m not too sure about using two different script fonts on the same page.

The Cottonseed Oil Tour

Another strong set of colors at play here, not to mention lots of different things grabbing your attention at once, which could be a bit of a turn off for some.

Alien Abduction Lamp

The texture/quality of the text isn’t quite the same as the photo but I like the skewed edges on the boxes and the lighting effects everywhere.

AdPacks

Lots of elements that drive the look home such as the sparkles, sunbursts, 3D box, and of course the cursive font. I really like the arrow/button although the alignment of the text is a little off.

Maratona Makeover

Love the idea of using patterns to replace the hair sections! There’s quite a bit of folding going on here, as well as stripes as backgrounds and shadows, and the blue that grounds everything makes the photos pop all the more.

Lather Bee Rich

Even the slideshow and dropdown menus carry the dirt and smudges you see all over the page. There’s also a significant number of typefaces being used here in a way that’s not chaotic at all.

Shipment App

There’s not a lot going on here, but it’s a wonderful look. The background illustration is perfect while the signup form in the foreground has a good number of details to look like a real ticket. I think my only question is if it’s a good choice to keep that form up there instead of the usual center alignment you see on “coming soon” pages. Once you hit submit (Notify) the whole box flips over to signal confirmation.

Social Media Weekly

User Experience – Beyond Bandwidth: UI Performance
“UI performance tips have been disseminated throughout the community for years, but often as an aside, with bandwidth and latency concerns much more at the forefront.”

Design – A simpler and faster alternative to wireframes
“In my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.”

Typography – Public Service Announcement: Watch Your @font-face font-weight
“The problem is the font is muddier than you originally saw it, and it’s all about font-weight.”

Designs of the Week

Occupy North Pole

This is a wonderfully decked out design from the logo to the interface elements to the themed graphics in each blog post. The cookie charts look yummy and the Twitter/Facebook widgets blend in perfectly, and it’s all topped off with subtle falling snowflakes.

A Real Letter from Santa Claus

Site’s defunct now but still worth mentioning for the lovely look it has. Deep red and gold hues combined with classic type make for a warm and elegant seasonal website.

A Very Warwick Christmas

Deep blue and white is typical for a snowy night scene but this site adds a touch of not red but hot pink for a more funky, modern touch. Each slide of the screen loads a few animations in the background and invites you to click on the ribbon button which loads a lightbox fashioned like a scroll.

You Better Not Stress

Simple but striking (you can never go with red and white!) and packs a responsive web design punch. Each red box shows a subtle background on hover, then loads a white box that’s the exact width of the grid. Beautiful type, photography, and concept.

It's A Shape Christmas

Another red and white design but takes the color scheme in a bolder direction: pretty much all of the text is in red on white, while other areas  simply flip the colors around. That, combined with the thin diagonal line pattern in the background makes this page a little challenging on eyes, but it’s certainly bright and cheery.

Christmas Cracker App

The only design in the bunch that does not use typical Christmas color combinations, or typical color combinations at all! Also taxing for the eyes, especially with the non-stop animations in each box, repeating several screenfuls down, but it’s a fun concept.

Social Media Weekly

HTML, Accessibility - The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
“Hopefully, that’s going to help you make the right choice as to when to give an image an empty ALT attribute so that screen readers ignore it, or one that has meaningful information that will help the user.”

Business – From Side Project to Not So Side Project
“There still seems to be something of a disconnect between having a side project and turning it into something that is moderately successful; in particular, the challenge of making enough money to sustain the project and perhaps even elevating it from the sidelines so that it becomes something not so on the side at all.”

Web Standards – IE to Start Automatic Upgrades across Windows XP, Windows Vista, and Windows 7
“Today we are sharing our plan to automatically upgrade Windows customers to the latest version of Internet Explorer available for their PC.”

Designs of the Week

Zindustry

Everything is burning in here, from the wooden background to the strips and sheets of paper—not overdone at all. I really like the little area of blue flames whose color echoes as accents throughout the rest of the site. All in all a striking look.

Made By Points

Here pink is the accent color as seen in the logo, navigation, footer, and the loading screen—which seems to be growing popular in non-Flash sites with lots of graphics. Another parallax-driven site with some translucent backgrounds and some very thin arrows.

Liquid Torch

I like the splashes of water everywhere and the lighting that seems to imply an underwater environment (although I’m leaning towards an aurora in the sky). The top navigation is also fixed and the layout breathes easy.

Family of Fish

This site prides itself in beautiful photography, and another round of parallax and fixed background peekaboos take advantage of that. The later not just piles on one full-screen image after another though, there are some interesting effects to be had when you make certain areas of a photo transparent. What is unfortunate, though, is that the descriptions in each page are images.

Social Media Weekly

Web Design – What I Learned About the Web in 2011
It’s time to look back on the year that was and see how far we’ve grown as designers and an industry as a whole.

CSS – Six CSS Layout Features To Look Forward To
Several proposed featured by the CSS Working Group to make our laying out webpages easier.

Web Standards – On HTML and CSS best practices
Strive for the best quality possible.

User Experience – Give Your Users A Hollywood Experience
Learn to build for your audience with film metaphors.

Designs of the Week

Tim Van Damme

First up, the site that started this trend. The design may be over a year old but the graphical details are still all the rage today. One of the most important features for this genre of a site are the vCard download link and the social media links, accompanied of course by the colorful icons for each site. No tabs here, but each section in the menu loads with a vertically sliding animation, while the hover effects use horizontally sliding effects.

Mehmet Aksoy

The shooting star in the background is actually animated with Flash. So are the stars which twinkle. There’s a touch of the Aero (Windows Vista/Windows 7) interface in this design (particularly the avatar) but I feel it’s the custom font used on this page that gives a different look to the whole site.

Benjamin De Cock

This site greets you with the owner’s name then displays a closed box, which you click on so it pops open to reveal this card. The animation even contains accompanying smoke effects. Other visual treats to enjoy on this page: an icon-based website tooltip on the text link for “interface designer”, glowing hover effects on the bottom icons, and a slider for his three avatars.

Chris Rowe

Not the usual boxed in layout but it’s all only contact information in here. Hovering over the initials reveals the full name and occupation. Same goes for the links below it.

Margot Dowleska Dyer

A nice earthy look with icons that blend in and a slideshow running in the polaroid frame to the left. There are some portions though where the graphics make the text a little difficult to read and are competing for attention with the foreground.

Maximilian Schoening

The closest thing to the business card metaphor translated to a webpage, complete with an animated flip done with CSS3 transforms when you click on the top right blue corner. The background uses another CSS3 property, radial gradients. The other side contains nothing but tiny social icons.

Social Media Weekly

CSS - The CSS profilers are coming!
“Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance.”

CSS - Truncating text using only CSS
“It works in IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+”

Design, Business - Warm Gun: Design for Continuous Deployment
“In his Design for Continuous Deployment presentation at the Warm Gun conference in San Francisco, CA Randy Hunt shared how Etsy’s development process allows designers and developers to collaborate at scale on production code.”

CSS - Knyle Style Sheets
“Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.”