Best Of

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

avatar
@clearsolid tweeted: Our favorite tweets of the week: May 13, 2013 – May 19, 2013 http://t.co/L31WkiMrpA
Comics

Comics of the week #183

By Jerry King  |  May. 18, 2013  |  no comments

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

avatar
@FutureEntrepren tweeted: Comics of the week #183: Every week we feature a set of comics created http://t.co/0ETvqhsc7f
Code

Learn to count with CSS

By Sara Vieira  |  May. 17, 2013  |  1 comment

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers before captions.

In this example I will be demonstrating how to achieve this by creating a simple recipe for pancakes and making CSS search for the beginning of each paragraph and adding the number of the step before it.

Sara Vieira says: It's actually CSS 2.1 but it's still pretty old :)
Career

How I learned to be REALLY creative

By Speider Schneider  |  May. 17, 2013  |  4 comments

As I grew up, being a “creative child,” which was the description my school psychologist used to explain why I didn’t care for school or the usual subjects like math and why I wasn’t like the other children, my mother would get frustrated and call me “bull-headed, just like your great grandfather!” There was little hope for me being anything else but a pain-in-the-butt artist. It was, unfortunately, that incorrigible demeanor I had, either through genetics or experiences that would keep me from being an artist.

Talent for space, shapes and colors would never be enough until I learned to open my mind. Just having the talent to enthrall the other kids in my class, the “normal ones” who would gather around to watch me draw dinosaurs eating army tanks and superheroes ripping the head off our teacher and then point and tattle to that very same teacher that I was drawing naughty pictures — the very same kids who grew up to be Wall Street brokers, lawyers and politicians — would not be enough to make me an artist for my career. As I would find out years later, neither would art school. Not at first.

Things were different in high school. I was allowed to take elective courses and chose, of course, lots of art classes. I spent three of five days in my week with the same teacher, in the same room, just trying different things, using whatever material I could find, or sitting, copying the drawings of Jack Kirby, hoping one day to be a comic book artist like him. I actually got to meet the man and shoved my ripped out notebook pages with various sketches at him. “Yeah, very nice, kid!” he said with a big cigar clenched in his teeth. With that rave review, I continued on the same path until I stepped into art school.

Krishna M. Sadasivam says: Great article - and something I definitely plan on sharing with my design students. Thank you, Speider!
Deals

Almost every business has a web presence these days; from single page ‘business card’ style sites, to million+ product e-commerce hubs, owning a website is as universal as taxes. Of course, there are new startups, but even in those cases entrepreneurs tend to have bought a domain name, or thrown up a template.

It’s no surprise then that the bread and butter for most web designers is not site design, but redesign.

On the surface, redesign looks easy; you have a starting point, with some real world data on what is and isn’t working for your client. Once you dive a little deeper you’ll find redesigns are a minefield of competing ideas. It will take all of your skill to exploit the current site’s successes and identify its failings.

avatar
@Matt_LDN tweeted: Deal of the week: Inspiring book offer from Smashing Magazine http://t.co/FXUptJzA4d
Ethics

The SEO sanity check part 2: gray hat techniques

By Kerry Butters  |  May. 16, 2013  |  6 comments

In the last post, we took an in-depth look at Google’s Panda and Penguin updates and how they have impacted on search rankings for businesses. Whilst we established that using black hat SEO techniques is likely to result in a site becoming penalized, we didn’t look at what’s known as gray hat SEO.

Gray hat SEO is, as the name suggests, somewhere in the middle of black hat and white hat. This means that whilst the practices may be perceived by some as being OK, for the most part they still break search engine rules and may result in losing rankings, or worse.

However, it’s important to bear in mind that whilst gray hat techniques can be used for genuine reasons and considered to be a good practice, it’s the abuse of the techniques which has led to suspicion when it comes to using gray hat.

LeadGenix says: Good article explaining some of the grey hat techniques and the risk behind them. For the most part, I think, it is best...
HTML 5

How to use the flexbox layout method (part 2)

By Sam Piggott  |  May. 15, 2013  |  8 comments

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!

Michael Patterson says: IE 10 has some basic flexbox support. Not all features are working yet but some are. I know for sure that Order, Direction, and...
Design

Side project: Type Fight

By Sam Jones  |  May. 14, 2013  |  2 comments

The side project series is a series of posts in which we’ll be taking a look at the best of designers’ side projects. To get things started, this week we’re going to be looking at Type Fight, a side project by designers Drew Roper, Ryan Paule and Bryan Butler.

Type Fight plays host to weekly “fights” in which two designers are asked to create a typographic treatment of the same character and then have their final designs voted on to determine whose is best. So far, Type Fight has hosted 61 guest fights between design heavyweights such as Alex Perez, Rogie King, Brendan Pittman, and Aaron Eiland, to name a few. There is also an ongoing battle between Drew and Ryan, who are now due to face off for an 11th time.

Logo Cheff says: Great post. number 3 u have designed beautifully. Thanks. The post is very informative and gave me so many ideas for creating...