In today’s increasingly information-saturated world, what studies find users often prefer is a simple, straight-to-the point, presentation of key facts.

One of the best ways to deliver that is a compact, single-page website.

For this week’s featured deal, our sister site MightyDeals.com have arranged a staggering 97% discount on a set of 20 HTML5 one-page websites featuring the fashionable parallax effect, designed by Flashmint.

All the designs are responsive, so you’re set for the mobile web, and you’ll receive the CSS, HTML and PSD files for each template so you can customize them to your needs.

For anyone looking to try out responsive or parallax designs for the first time, this is a great way to introduce yourself to the code.

Head over to MightyDeals.com now to check out the full set.

Which of these responsive parallax designs is your favourite? How would you use them? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

Flat design — which is more of a rejection of 3D artifice than it is a style — fits so perfectly into the contemporary landscape that it’s already hard to envisage a time when it wasn’t de rigueur.

To help you take the leap into flat design we’ve put together this great freebie: A free flat UI kit designed especially for Webdesigner Depot by Freepik.  As you know, Freepik.com is a leading search engine that indexes vectors, PSDs and photos free for personal and commercial use. It’s a great resource for graphic designers as their engine locates free graphic content and it displays the results in an orderly layout for easy access. 

See the full preview below and subscribe below to download the file. You can use the file for personal and commercial uses. Enjoy and share this with your friends!

Magnolia: 150+ Professional Infographic Elements – only $9!

Those rules are: define goals first; focus on users second; design for emotion; follow the rules of visual design; build a clear, visual hierarchy; be consistent; break the rules (when necessary); don’t overuse gimmicks; and finally test, measure & improve.

1. Define goals first

I bet you thought I was going to say “focus on users first”, that’s what most people say. Forget that, let’s start with your goals. Begin every website design project with a brainstorming session that outlines clear, realistic website goals that reinforce to your business objectives.

To better illustrate this let’s look to Amazon. Their objective is to maximize product sales. Through “upselling” and “cross-selling” they can maximize the purchasing power of each user, but to be successful in this they slow down the buying process. Unlike many of their competitors, Amazon does not have a “buy now” button in their search results. Users must visit one more page (with potential upsells) before making a purchase. This is a perfect example of how a site design can meet clear business goals.

Most modern ecommerce sites have removed the “buy now” button from their search results, although some brick and mortar outlets still have it. 

2. Focus on users second

With your clear goals top of mind, you’ll then need to define and prioritize users. Be as specific as possible. Some examples of questions to ask are:

• Male vs. female breakdown?
• Education level?
• Locations in country?
• Related hobbies?
• Income bracket?
• Who’s driving kids’ product purchases? Kids? Parents? Grandparents?

The key point is that designers should be aware of users so they can ensure their designs don’t block key usage paths.

3. Design for emotions

Be sure you understand what emotions your brand should convey. Brainstorm. Ask questions. Get agreement. And possibly most importantly, focus on these emotions when presenting back to your clients. Never ask if your client “likes” a design. When you deliver designs you should instead ask questions such as “Which of these makes you feel most professional?” or “When you compare these two designs you’ll see that this one is more modern, while this one is more dynamic. Those were both emotions that were important to you, now that you’re seeing them visually which do you think is the most important emotion for you to present to your target audience?”

Which of these organizations are fun? Relaxing? Innovative? Busy? Real? (Designs by @JessicaShiner and Christine Mark)

4. Follow the rules of visual design

There are many small elements that website users consciously and subconsciously use to decide if they’re going to trust a website. The most important ones are:

• Cropping: selecting photos is only half the battle, cropping photos is what makes or breaks a page layout.
• Negative space: paying careful attention to margins, padding, and line height is the difference between looking like the New York Times vs. a high school newsletter.
• Fonts: everyone loves choosing fonts, but a great designer can spot a professional font quickly and has the restraint to keep the number of fonts on the website to 1-2 (not counting the logo which is often its own font).
• Colors: colors are one of the hardest things for designers to use effectively. There are so many rules to picking a good color palette, and while it’s tempting to use online color palette generators, spend time designing your own color palette.
• Layout: create good visual page “flow” so that the user’s eyes go where you want them to go on the page without other elements visually clouding your objectives.

5. Build a clear, visual hierarchy

Website visitors skim. They don’t read. Grab their attention and get them to the most important information with a clearly defined, well thought out visual hierarchy. A well thought out design — site > page > section — leads the user through the page the way you want. Users should be able to glance at your page and understand it in a split second.

Look at the following example of an article and notice how it’s hard for your eye to tell what the page is about or where the article starts!

Below is a mockup I made by changing about a dozen lines of CSS to create a clearer visual hierarchy on this page in the following ways:

1. The article title should be the most prominent element on the page. It’s currently a smaller font size than the heading further down the page! So I increased the size of the article title, and decreased the size of the headings. 
2. The heading further down the page was also disconnected from the content it was a heading for visually, so I also tightened up the spacing below the heading while leaving the space above the heading to let users know that it is a heading for the paragraph below it.
3. I also moved the little image to the right of the title instead of the left so that when a user scans down the left-hand side of the page to orient themselves the article title is in their vision.
4. I removed the border and background classes on the blue blurb so it no longer competes with the heading and removed the top margin. There was already a class in place to make it grey, which works fine in this instance.
5. I also removed the distracting text and image which highlights that this is a reprint article as well as some empty paragraphs and <hr> tags.

I intentionally left all advertisements as they were originally coded, assuming that’s a critical part of this page.

6. Be consistent

Don’t confuse your users. Links should be consistent and distinct. Should you choose to use icons, photos and illustrations throughout make sure they look and feel like they belong as a cohesive set. Inconsistencies will distract the your user and obscure your message. Don’t use more than 3 fonts — it’s best if they’re all in the same family. Limit yourself to 5-6 colors (Note: the logo can be a different font, and often should be).

7. Break the rules (when necessary)

If there is something particularly unique or important that you need to highlight, you may need to “break the rules.” You can use one or two contrasting colors to help the element stand out. For example the UK website below emphasizes the tax rate by making this a larger element with a pop of color.

When people visit the info page about the VAT tax, the designers of GOV.UK made sure that the information most people need is front and center.

8. Don’t overuse gimmicks

Make your design fun, but make sure those elements support what you’re trying to accomplish on the site. For example the Inze site is beautiful to look at and wonderful on mobile but when I visited it on my desktop computer I was lost. It turns out the navigation is hidden until you start scrolling which unfortunately took my eye to the the bottom of the page. As a result I didn’t even notice the subtle navigation appearing at the top. I scrolled most of the way to the bottom before even realizing that there was (finally) a navigation on the top. The “hidden” navigation is a neat effect, but the “design” prevented me from taking the desired action. In the end, it conveys a confusing, sloppy brand image.

Compare Inze to what happens right in this article here on Web Designer Depot when you roll over a link on your desktop computer. We have a neat effect but it doesn’t create a “barrier” for users for the sake of a gimmick. It also degrades gracefully so it won’t break on mobile or older browsers.

9. Test. Measure. Improve

Websites evolve. Design for flexibility and adaptability. Collecting and analyzing ongoing test data will drive constant improvement. Remember, it’s all about creating a design that meets your goals.

By carefully measuring the results of a series of minor design changes to the original landing page (left) we came up with a new design (right) that increased the percent of signups by 60%!

Remember

Effective graphic design needs to emotionally connect the user with the brand while at the same time getting them to do what you want. It can be done.

Do you agree with these rules for design? Would you add any more? Let us know your views in the comments.

Featured image/thumbnail, emotion image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

For more experienced designers setting text may come naturally but for those who are just starting out I’ve decided to put together a list of the basic do’s and don’ts. Not only will this list teach you the fundamentals but you can also use it as a check list to work through on future projects. Here goes:

DO establish a typographic hierarchy

A typographic hierarchy can be established by using a variety of methods such as size, weight, color, and contrast. Its purpose is to give pages structure and guide the user through the content. Without a clear hierarchy the text becomes much harder to scan and therefore generally harder to read. Just take a look at the examples below. On the left the text is one size and one weight so it’s hard to differentiate between headings and body text. Meanwhile, on the right, we have the same content but with a clear typographic hierarchy, so it’s much easier to distinguish between the different elements.

Here I’ve only used size and weight to establish my hierarchy but for even better results you can try to experiment with color and contrast as well.

DON’T make the text too small

Not everybody has 20-20 vision so it’s important to make sure that your body text is big enough for people to read comfortably. Personally I would recommend no smaller than a size of 14pt.

DO choose an appropriate font for the body text

Another important factor when it comes to your body text is legibility. Although a typeface like Satisfy might suit a design with a hand-made aesthetic, using a typeface such as this for your body text will have a negative impact on your users. This is because it’s much harder to read than your average serif or sans-serif. Look at the examples below and you will notice how much harder your brain has to work in order to make out the words on the left compared to those on the right.

DON’T use too many different fonts on one page

Services like Typekit and Google Fonts may give you access to thousands of fonts but it doesn’t mean that you have to use them all. As you can see from the example below, unless it’s done really well, using multiple fonts can be very distracting. This is why I usually recommend using no more than 2 or 3.

DO give your text room to breathe

A lack of white space between each line can affect readability because it makes it difficult for the eye to track from one line to the next. However, this problem can easily be solved by increasing your line-heights, but be careful not to overdo it, too much space can also affect readability in a negative way.

DON’T make continuous use of all caps

People aren’t used to reading large chunks of text set in all caps and because of this it’s actually harder for people to read. Not only that but people often associate all caps with shouting or aggression and when it comes to marketing copy it can come across quite spammy. Due to this it’s important to think about how and when you’re going to use all caps and to make sure that you use it in moderation.

DO try and limit paragraphs to 40-60 characters per line

If a line is too long the reader gradually begins to lose focus and can often have trouble reading from one line to the next. If a line is too short it causes the reader’s eye to travel back too often, which disrupts their rhythm. This can also make them start reading the next line too soon, causing them to miss words from the previous line. This is why the optimal line length for body text is said to be around 40-60 characters per line.

DON’T use large amounts of centered text

Centered text is difficult to read because the edges of the text block are uneven which makes it harder to scan because each line has a different starting point. Centered text blocks are also difficult to align to other objects on the page and are often considered to look quite amateurish. This is why, like all caps, it’s best to use centered text in moderation, opting for left aligned text as standard instead.

DO make sure there is enough contrast between your text and the background

Contrast is another aspect of typography that can affect readability. If there’s not enough contrast between the text and the background, the content can become illegible.

Do you have anything to add? What tips would you give new designers just starting out? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

As any good account handler or project manager will tell you, their primary role is to make sure that a project goes as smoothly as possible. This can mean managing people on both sides of the fence, and keeping everyone happy is no mean feat.

I’m a big believer that getting a project off to a strong start is integral to the success of that project, and for me that means helping the design team hit the ground running, and making sure they can begin doing what they do best as soon as possible.

I’ve read plenty of material recently describing account handlers as having a negative effect on the creative process of a project. These criticisms range from the account handler not allowing the designer access to the client throughout the project, through to making the designer jump through hoops on the whim of a client. Whilst I’m sure these aforementioned criticisms occur every day in the industry, I want to discuss how I believe an account handler can make a designer’s job in a typical web agency so much easier.

1. Planning

For me, the initial stage of a project is one of the most exciting parts of a new website project. It’s the time you get to speak to the client and really get to understand what they want to get out of working with you and your company. However, clients can sometimes be unsure of what they want, and if there’s a big team working on the project at the client’s end, it’s easy to get mixed messages and issues like design by committee becomes a genuine concern.

Whilst it can be beneficial, at times, for the project’s lead designer to be part of these initial discussions, I don’t feel that’s the best use of a designer’s time. This is especially relevant in agencies where a designer might be juggling several projects at once, and their time is even more valuable than usual. I would hate to think of the impact including the design team on all initial meetings would have on the productivity of an agency!

I believe the ability to extract and define a clear set of high level project objectives is one of the main signs of a strong account handler, and putting some of the elements mentioned below in front of the lead designer in an internal kick-off meeting can get things off to a great start and increase the designer’s confidence in yourself and the client:

1. In the client’s words, define what the company does.
2. What is the ultimate goal for the website, and how will it benefit your business?
3. What are the objectives of the website?
4. Describe a typical user of your new website.

It constantly surprises me how often clients struggle to answer these questions, and I don’t feel a designer’s time is best spent helping a client come up with those answers. I want my designer to feel motivated by the task at hand, not be fatigued by helping the client work out the finer details of the project.

2. Assets

If you’ve briefed the team on the project and had that all-important kick-off meeting, it’s more than likely time to begin the project’s wireframing stage. By the time these stages begin, it’s important that an account handler has collected a number of project assets, which could/should include:

1. A signed off website sitemap.
2. A signed off project specification which details features and functionality. This may be absent in the case of an agile process being implemented, but some idea of the intended functionality is always helpful.
3. Brand guidelines and the files associated with this such as logos, typefaces and colour palettes.
4. The content for the website, to allow for accurate wireframes and visuals. This is even more important in a responsive design project, as Steve Fisher and Alaine Mackenzie recently wrote about. This can range from text through to video content.
5. Whilst not being vital, I also provide a project planning document which the client has filled in. This details things like objectives and goals in the client’s own words, which means the team will always have access to a client-orientated brief throughout the process.

Nothing will dampen the enthusiasm for a project quite like the absence of vital materials like the ones listed above. This is the point in the project where it should be all systems go, and having to chase for assets at this stage can really kill momentum.

3. Embracing change

Plans change, and it’s how you adapt to these inevitable revisions that will decide the overall outcome of the project. However, it’s also important that your process is set up to protect a designer and keep their work streamlined. If your designer is complaining that all they’re doing is revision after revision, then something has fallen down in the project process and it’s the designer’s workload that is going to feel the effects of that. If we have successfully:

1. Taken ample time in the planning stage to understand the project’s objectives.
2. Agreed the project’s core features.
3. Produced a set of signed off wireframes.

Then change, especially to visuals, should be minimal. It’s also important however, to be open to change and accept the possibility that even though we have gone through a lengthy planning stage, additional value can still be brought to the project in the shape of revisions. I treat a project plan/specification as a detailed guide, but refusing to budge even a little from what has been agreed can have a detrimental affect on the project.

Filtering a list of additions or changes from the client, before they get to the design team, can ensure team members stay focussed and do not begin to grow tired of constant tweaks and changes.

4. Rejecting change

We’ve spoken about the need to sometimes embrace change, and how that can be of a benefit to the project, however there will be times in most projects where a client may request something that sits outside of the agreed specification. This may also have a knock-on effect to deadlines, possibly affecting the rest of the project team.

How we approach revisions in general, very much depends on the account handler’s knowledge of what the designer’s role involves. I’ve heard stories of account handlers needing clarification on what a client was referring to when they mentioned a ‘URL’, I imagine this makes it a challenge to appropriately filter revisions. If, however, you have an understanding of the design and development process, you will know that even the smallest requests can cause hours of work to be undone.

It’s an account handler’s job to process, filter and sometimes reject change, in the interest of the project. This, in my opinion, is one of the most important responsibilities that an account handler has, and it’s a vital that we protect the project and its team from unnecessary work where possible.

5. Working collaboratively

Let me start by saying an account handler should never dictate. The designers are the creative part of the team for a reason. I do see it important to give steer where necessary though, and you should have an opportunity to do this in your internal progress meetings, or just by catching up with the team whilst they’re working.

How much steer you provide will depend on your knowledge of a) the project and b) the ‘industry’ itself. Taking the time to read up on and understand latest industry practises such as responsive design, UI/UX and the discussion around designing in the browser can give you a great platform on which to positively influence a project.

If you have an opinion on how certain things might look or work, mention it. If the designer dismisses this or suggests a route they think is more suitable, go with it. You’ll get a chance to provide full feedback before the client sees anything, and you can review things when the designer is happy to share their work.

It’s important you provide a designer with the freedom to do what they do best. This can only result in an increase in trust between between yourself and the designer and in turn, they should value your input from project to project.

Summary

To work efficiently, a project team needs more than just a middleman who will pass things from A to B. Take your chances to positively influence the project and continually put yourself in the shoes of your teammates and clients.

A strong working relationship with your design team is key to a successful project, and I believe the steps I’ve detailed here can only improve the chances of them producing the best work possible.

Do you work as an account manager, are you a designer working with an account manager? What benefits does the relationship deliver to clients? Let us know in the comments.

Featured image/thumbnail, steering image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

British photographer Kirsty Mitchell has done just that, creating a fantastical, fairytale-esque series of photos that were inspired by her late mother. A former teacher and avid storyteller, Kirsty’s mother lost her battle with a brain tumor in 2008. Since then, the costume-designer-turned-photographer has spent countless hours constructing costumes, wigs and sets to turn her vision into reality.

The process was painstaking, with some images taking up to five months to create. All photos were shot within mere miles of Kirsty’s Surrey home, but their rich beauty makes them look otherworldly. Relying upon gorgeous fields of wild flowers, bluebells and more, the patient photographer sometimes waited an entire year for the costumes she created to match nature’s blooms.

“My aim was to portray time passing, an unsaid journey through four seasons, incorporating every colour in the rainbow.”

With the three-year project nearly complete, Kirsty has plans for both an exhibition and accompanying book. Filled with majestic colors and ethereal characters,

Wonderland is her tribute to the memory of her inspirational mother. It’s a breathtaking work of art — a dream realized and a promise fulfilled.

Which photo looks like it took the longest to create? Have you ever taken years on a labor of love? Tell us in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

Even though this is a new language you will pick it up really fast mainly because it’s reformulated JavaScript; it’s essentially prettier, simpler JavaScript .

When writing CoffeeScript don’t forget you are writing code that before being deployed is going to be compiled into JavaScript that follows best practices and passes the JSLint test, so that’s one less thing you have to worry about. The output will still be valid JavaScript that the browser will not have a problem in reading. CoffeeScript is to JavaScript what SASS is to CSS: a way to write simpler and more productive code.

Installing and using

CoffeeScript is a node.js utility so in order to install it you need to have node.js installed as well as the node package manager. Assuming that you have installed these two packages all you need to do is go to your terminal and install CoffeeScript with the package manager using the code:

npm install -g coffee-script

Just with that you have CoffeeScript installed on your machine. In order to compile a .coffee file into a JavaScript file you need to type:

coffee --compile script.coffee

This will compile the file script.coffee into script.js in the same directory but will only do it when you run the command, if you want it to compile in every change you make in the coffee file you need to add the –watch before the compile:

coffee --watch --compile script.coffee

With this added your JavaScript will be compiled every time you make a change to your .coffee file.

Variables

When writing a JavaScript variable we have to prepend the var keyword, with CoffeeScript that keyword is gone and you can just type out the variable and assign it to something. Another thing to look out for is that CoffeeScript uses a lot of indentation methods to avoid semi-colons and for the language to understand that the variable statement is complete you just need to move to a new line:

age = 21
country = "Portugal"

In JavaScript you would have to type something like:

var age = 21;
var country = "Portugal";

It’s a small example but you can begin to see how powerful CoffeeScript is when it comes to simplifying your code.

Logical and comparative operators

Remember all that time you spent memorizing JavaScript operators? Remember wondering why you needed to use === instead of just using is? Well CoffeeScript also takes care of that. It offers some really nice aliases for the operators:

Comparison operators

• === can now be traded for simply is;
• !== is equally transformed to the more readable isnt.

Logical operators

• Instead of using && you can just use and;
• as for || from now on you can type or;
• the little exclamation point that stated a not is switched for the most logical thing: not.

If statements

Another thing CoffeeScript gets rid of is curly braces. It uses the indenting method to declare when you are inside a statement, if statements work like JavaScript but you don’t need the curly braces or the parenthesis; just indent the code you wish to run when the statement is true:

if work > 24 and sleep < 8 vacations() else work() 

will compile into JavaScript as:

if (work > 24 && sleep < 8) { vacations(); } else { work(); } 

I hope that you are starting to see the benefits of CoffeeScript just with these simple demonstrations of how clean it can make your code, and cleaner code means more maintainable code.

Looping through arrays

Looping through arrays is one of the things you are bound to do in every JavaScript app you write and the syntax for looping through them in JavaScript isn’t the simplest or the cleanest, I think this is where CoffeeScript really shines. To loop through an array we use a for..in loop , like so:

tasks = ['Design','Code','Groceries'] for task in tasks alert task 

All this piece of code will do is read all the things in the array and then alert then one by one, just to make things even simpler you can even write the for…in loop in one line, like so:

tasks = ['Design','Code','Groceries'] alert task for task in tasks 

It’s simply far more readable and maintainable than the vanilla JavaScript, speaking of which the code produced by CoffeeScript for those two lines would be:

var task, tasks, _i, _len; tasks = ['Design', 'Code', 'Groceries']; for (_i = 0, _len = tasks.length; _i < _len; _i++) { task = tasks[_i]; alert(task); }

While loops

While loops are also very useful when constructing your JavaScript app and CoffeeScript doesn’t fail to make this easier to read and write as well, for example:

while sleep < 8 sleep() 

Or you can write it all on one line if you prefer:

while sleep < 8 then sleep()

Or:

sleep() until sleep > 8

In pure JavaScript this would translate to:

//then while (sleep < 8) { sleep(); }

Or:

//until while (!(sleep > 8)) { sleep(); }

Functions

Functions are also another vital part of any programming language and even though functions in JavaScript aren’t as messy as some other parts CoffeeScript simplifies this to the max as well, a simple function that takes someone’s name and then alerts it can be written like this:

sayHi = (name) -> return "Hello " + name alert sayHi('Sara') 

All you do is name the function, in this case the functions is called sayHi, and then after the equal sign you need to specify the parameters. Here name is the single parameter, after the base of our function is defined we need to type -> followed on the next line by what we want the function to do so that CoffeeScript knows we are inside the function. In this case all I want it do is return “Hello” and then the name of the person and lastly I use a simple alert to call the function with the name. We can also write this in one line eliminating the enter and indenting just by writing what the function will do after the -> :

sayHi = (name) -> return "Hello " + name 

This little snippet of code will be compiled into the following JavaScript:

var sayHi; sayHi = function(name) { return "Hello " + name; }; alert(sayHi('Sara')); 

Of course this was a really simple function but as you can see it saved us 3 lines of code and of course in the JavaScript we could just name the variable as we declare the function like so:

var sayHi = function(name) { return "Hello " + name; }; alert(sayHi('Sara')); 

The examples I have given here are what CoffeeScript compiles to and even though in most instances there are easier ways to type something out, all the JavaScript compiled is valid and semantic.

Conclusion

This is just the beginning of what CoffeeScript can give you, when things start getting more complex this little language will give you a lot of leverage when compared to JavaScript, less code you need to write , more human readable code, and more maintainable as well, so that you can come back to a website a year later and know what is going on in that JavaScript.

Stay tuned for the second part of this series where I will show you how to combine CoffeeScript with jQuery and LocalStorage in order to create a simple contact list app.

Have you used CoffeeScript to simplify JavaScript? What parts of CoffeeScript do you prefer to Javascript? Let us know in the comments.

Featured image/thumbnail, coffee image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

The Phraseology Project was originally setup by Drew Melton as a way for him to hone his typography skills. The idea is that people submit words or phrases and Drew, or a guest contributor, creates a typographic treatment of the submissions.

The list of contributors include designers such as Ray Brown, Luke Ritchie, Simon Ålander and Joshua Bullock, all of whom have created some beautiful pieces of work.

Here’s a collection of some of our favourites:

Which of these treatments is your favourite? Do you have a similar side project? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

We started on the path of fulfilling those aims over a year ago with the redesign of the GQ.co.uk articles and the introduction of what we call the ‘StickyScrollRead’ component, which allowed the editors to embed media that would be pulled out of the body copy at screen widths wider that 1000px and pinned on screen. That meant the user could continue to read the article and still refer to the peice of media that the copy was about. This proved to be a much more immersive experience and allowed the body copy more room to breath.

We wanted the Wired article templates to maintain the SSR functionality that had worked so well on GQ but we had also learnt a lot since the GQ designs that we could incorporate into Wired. Design process wise, we had also evolved a lot more too since the GQ articles were designed.

The templates for the GQ articles were designed entirely with Photoshop, with every different article variant (long form article, short form article, straight to gallery etc..) and every article template with a different embed (short form article with image embed, short form article with video…) being mocked up as a PSD. We ended up with 20 – 30 PSD’s and a wall of printouts that covered the office! It was time consuming, tedious and did not represent the final product as we would ‘tweak’ things during the development process.

The proposed concept for the Wired article designs was more in depth and advanced than its GQ counterpart and the thought of mocking up 50 – 60 Photoshop files was enough for us to put down our PS lasso tool and explore more accurate and efficient methods of communicating our designs to the development team.

The GQ articles that preceded the Wired redesign.

Typography

As many of our projects do, we started by looking at how we could represent the brand’s values through its typography. We looked through the printed magazine and identified styles that they use to tell different stories, colors they had used as well as styles for highlighting text and captions.

We then started to experiment with different type combinations, colors and font sizes through Typecast, creating a complete initial style guide for all headings, paragraphs and pull quotes as well as experimenting with side by side comparisons. This would prove to be the groundwork for our typography which we would return to later.

Building a style guide in Typecast.

The style guide implemented. 

Layout

We picked an article from the print magazine and found the equivalent article on wired.co.uk. They were exactly the same story but where the magazine article had images of varying sizes, pull quotes spanning columns with the paragraph text wrapping around it and ample additions of white space, the online equivalent had a lead image above one long area of text surrounded by the site housing, shouting at the user to view something else.

The old Wired article design.

Wired magazine is well known for it’s innovative and bespoke layouts, for which it has won many awards. We wanted to try and replicate the magazine style layouts, with bits cutting into the body copy and not have all the copy area feel so regimented. We knew that the SSR component splits the page into 2 columns, one for the article body and one for the media embeds that get pulled out and pinned but we didn’t want the embeds to feel completely detached from the paragraph text.

We began to create the same article, using the same copy and images from the website to create a basic version of the SSR template using CodePen. The goal was to experiment with placing full width, keep in line and in content media within the flow of the article to create a more visually striking and engaging  layout. Since designing the GQ article pages we had decided that it would be a more natural reading experience to have the copy on the left and the media in the right column so we switched them around and we also wanted to incorporate the standard ad units such as the double sky and MPU’s within the body copy, rather than give the adverts their own column (like on GQ) that would be redundant when there were no ads or when the ads had scrolled away.

Building in Codepen.

v1.1

In the first prototype the article led with a huge, full width landscape image which had much more impact and gave the sense of a magazine feature article. One of my favourite evolutions from the GQ templates was the introduction of the all mighty full-width image. GQ’s template enabled the editors to add ‘Pulled-to-side’ portrait and landscape images but they could sometimes lose their presence as the user’s screen got narrower and the images shrunk and the full width image was our solution.

The typography styles created in Typecast had not been used yet but there were basic styles assigned to the paragraph, intro text and quotes to help get a sense of hierarchy.

The SSR had also not been implemented but a column had been created with pull to side images which helped us to experiment with what width to set the pull to side column in relation to the page and basic double sky and MPU units were added to the body copy to see if they would disturb the flow of the text.

As a first draft, this approach proved far more useful than us experimenting with the same content via Photoshop. This not only allowed us to make some basic layout decisions quickly and iteratively but we could also use it as a base from which the developers could build on to add further functionality to and that’s exactly what they did.

 Version 1.

v1.2

The CodePen proof of concept was passed onto the development team and they added the SSR functionality (so the pulled to side images actually pinned to the screen) as well as allowing us to change the positioning of a piece of media by changing its class before handing it back to the design team for styling.

At this point, we started to style the article with the font styles that we had previously created in Typecast by simply exporting the CSS directly from the web app. We could now also start experimenting more with different ways to embed content and see what worked well at different widths and for different stories. For example, leading with a full width portrait image was a bad idea as there would be an abundance of white space around the title and would also push the first paragraph too far down the page. We found that the best combinations seemed to be to lead with a pulled to side image and maybe a keep in line landscape as they had the least effect on the flow of the text. We also worked on optimizing the body copy for the most comfortable reading experience by controlling the max-width of the paragraph copy. Instead of adding more padding between the paragraph text and the pulled to side media, we indented the body copy so that the copy was as central on the screen as possible and it also allowed keep in line images to bleed off the screen much like a print layout might do.

Prototyping version 2.

This collaborative and agile prototyping method helped us to really make informed decisions quickly as we could easily test our designs on any device, screen width or browser and make amends with minimal fuss. We worked with real content as much as possible to make sure that we were not forgetting to style a certain rare class that gets added to only a few paragraphs — I’m looking at you .p1 — that we may otherwise have missed until later in development. We also created multiple article types using the same template to see how it worked when there was just 1 image and some short copy or if it was a review article.

Although we always knew that our CodePen templates were only going to be a proof of concept, we really tried to go into as much detail and make as many informed decisions about the design and layout as early on as possible.

v1.3

Once we were happy with the basic style and structure of the template, the developers transferred the code into their own coding environment, splitting up the CSS for each media embed into it’s own SASS file so the design team could easily access and change the CSS for just the ‘blob’ — which is what we ended up calling any add-ons that you could embed within an article… eg. images, video, reviews…etc — that we wanted to edit.

This was a huge help as by the time the dev’s had done their stuff and hooked it all up to the back end, the code was too complicated for any of us designers to understand and locate the parts that we wanted to change. This approach was also useful when styling new blobs, like the gallery thumbnails, read next or review ratings, as we would just create a new SCSS file with all the styles for just that individual blob, which made it far easier to update and maintain.

The ability to access and edit the CSS was a huge help to us designers. It was the first time that we had moved away from the ‘design in Photoshop – deliver PSDs – developers code – designers review’, method of creating a website and it meant that we were able to really fine tune the smallest aspects of our designs.

In the past, using the old methods, we may of launched the Wired articles at this stage (fully functional with some design tweaks which can be made after launch) but as us designers now had access to the CSS, we were able to spend the last few days adding a few subtle touches that would improve the experience. We added little ‘Enlarge’ icons on the corner of the images to let the user know that by clicking on any of them, you could open them as a full width, gallery image. We user tested articles on different devices to get the optimum body copy width for the best reading experience as well as spent more time fine-tuning the text links, quote styles and image captions, all small details that would together make a big difference.

This was a far more collaborative project than any other I had previously worked on with designers, information architects, project managers, developers and editors all working together at different stages of the project; adding their bit to a prototype that was constantly growing and developing into the product that it is today.

The final, fully responsive article design.

Not spending time designing all the styles, layouts and variations at different break points beforehand, meant that we could in a way, design by development. We wouldn’t wait until something was perfect to build it but instead just built something and worked on getting it perfect. This did mean that there were days where we would measure once and cut ten times but it also allowed for constant testing, development and more importantly, discussion on improvements which helped keep everyone engaged and involved with the project.

We are constantly reviewing and improving the build but we are also very proud of what we have managed to deliver in a pretty short period of time. The Wired articles not only represent beautiful, print style layout at any screen width and on any device but also a shift in the way we at Condé Nast Digital work as a team.

What do you think of the wired.co.uk article pages? How does Condé Nast Digital’s design process compare with your own? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

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

This article gives you the heads up in handling ethical disagreements with clients http://depot.ly/l851d

Nice collection of beautiful and inspiring typographic quotes http://depot.ly/l88ph  #typography

Do we follow the drunkard’s search pattern when solving design problems? http://depot.ly/l89cn  *Great #UX found via @smashingmag

You might find something useful here: iOS resources http://depot.ly/l8ci5

Test your geography skills & explore the world with the Google Maps Street View based game: http://geoguessr.com

Google to let you create your own HTML tags http://depot.ly/l5rdH  @CreativeBloq

Short, handy & quick tip: How to do a word count in Indesign http://depot.ly/l5qFA  /@creativenerds

Cool! This great real-time map shows Wikipedia articles being edited round the world http://depot.ly/l3dkZ

Exceptional mixed-media portraits by Nicky Barkla http://depot.ly/l3bMG  *We love Frankenstein & Hulk. You?

Everybody freeze: it’s a flower! http://depot.ly/l3b5D  Sonia Rentsch’s weapons made of plants

Where is ‘Top of Mind’, and How Do I Get There? http://depot.ly/l38nV  *A good read

Syndifeed Is A Simple And Clutter Free RSS Reader. See it here: http://depot.ly/l38kn

How the 2013 World Press Photo of the Year was faked with Photoshop http://depot.ly/l0Uxf

Why Freelancers Are Saving The Internet http://depot.ly/l0UbK  via @hongkiat

13 Timeless Lessons from the Father of Advertising http://depot.ly/kX8Up

Common Patterns in Styleguides, Boilerplates and Pattern Libraries http://depot.ly/kX8dj

10 (and a half) favorite reads from TED Bookstore 2013 http://depot.ly/kTPjJ

Here’s an interesting article: The Debate Around Responsive Design in Mobile Banking http://depot.ly/kX8as

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Magnolia: 150+ Professional Infographic Elements – only $9!

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…

Organically lost

The fiction capacitor

Good clients, bad clients

Can you relate to these situations? Please share your funny stories and comments below…

Magnolia: 150+ Professional Infographic Elements – only $9!

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.

The HTML

<section> <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p> <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p> <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p> <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p> <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p> </section> 

The objective in this HTML is that each paragraph is a different step and with CSS we can add those dynamically by writing as little as 3 lines of code.

The CSS

CSS counters use the property counter-increment. It has been around for a while it was actually implemented in CSS 2.1, to use it we must first reset the counter’s default value to 0 before anything we want to count shows up on the page, so it’s a good idea to define this in the body styles, like so:

body { counter-reset: steps; } 

This line just sets the counter back to 0 and it also names it, allowing us to later call it and also allowing us to have more than one counter on the page.

The next step is to use the pseudo element :before to target all the paragraphs and add the step number before all the text begins. To do that we need to use counter-increment, then specify the content. We can just use the number or we can append or prepend some text , in this case we’ll prepend “Step ” before the counter’s value, like so:

p:before { counter-increment: steps; content: "Step " counter(steps) ": "; } 

We should also make this content stand out a little and to do that we’ll give it a bigger font-size than the paragraphs and make it bold:

p { color: #242424; font-family: arial, sans-serif; font-size: 16px; line-height: 20px; } p:before { counter-increment: steps; content: "Step " counter(steps) ": "; font-weight: bold; font-size: 18px; } 

If you want to see this idea in action, you can see the pen I created.

Browser support

A constant concern when working with CSS is the browser support, but since this is a CSS 2.1 implementation the browser support is great: it’s supported by all major browsers, desktop and mobile , the only significant browser that doesn’t support it is IE7, and according to my stat counter IE7 is used by only 0.61% of people so I think we can say that IE7 will be departing soon. Whether or not you need to support IE7 is dependent on the stats of your own site.

Conclusion

CSS counters is not something that you will use in every project but it’s something that you should keep in the back of your mind because someday it may come in handy.

Have you used CSS counters in a project? What uses can you see for them? Let us know in the comments.

Featured image/thumbnail, counting image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

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.

Eighteen year-old mind of moosh

©GL Stock Images

I started art school by taking a few night courses while working days and it all seemed so easy when I got to pick my lessons. To their credit, when I entered full-time, the school required a foundation year of exploratory classes; painting, sculpture, life drawing and art history. Little by little, the ability to draw like Kirby was ripped from me and I resented my “idiot teachers” as artsy-fartsy types who knew nothing. There was that bull-headed nature of mine that held me back from so many things and so much understanding in life.

It wasn’t until my sculpture teacher, another poor soul I labeled as an idiot, without fair cause, failed my term paper, that I started my road to understanding how to open my mind to creativity. She had taken us to an art show in lower Manhattan, in a sand-filled lot and gave us a tour and explanation of each piece, which naturally I ignored. The show, Art on the Beach, was, as I think about it now, brilliant, thoughtful and creative. How I regret entitling my term paper, “Fart on the Beach.”

It wasn’t hard enough she failed that paper but she also opened it up to class discussion as to why I failed. I was mortified and I’m sure, red as the devil as she went over why I was wrong in front of my friends and the usual art school douche bags in the class, the ones who took delight at another student being torn to pieces. When she finished, the douche bags started in on what they thought of me and while I remember wanting to walk out, swearing at all of them, never to return to school, I didn’t. I took my lumps and just figured they were morons who would never amount to anything.

The teacher insisted that she and I revisit the exhibit so I could rewrite my paper. “Fart with the Bitch” I cruelly joked to my friends as we smoked a joint in the park between classes. I sadly regret that title now as it serves to remind me how unbearable I truly was.

Meeting at the sandy lot again on a hot spring day, the teacher walked me around the exhibit again explaining how each piece was important and the thought and purpose behind each one. The face-to-face, one-on-one interaction didn’t allow me to ignore what was being said and what I was learning. I opened up a little more — more than I had in my life, I must admit. I rewrote my paper and received an A grade. I also considered what the supreme douche bag in the class had yelled at me, embarrassing me in front of my peers, that I “always did the same thing in all of [my] classes.”

A good beating knocks sense into most of us

©GL Stock Images

From that point, I started to explore. Whatever my mind told me to do with a sculpture or drawing, I did something completely different — something I would never consider doing — something completely alien to my sensibilities. It was my first step into being creative.

It wasn’t, however, a complete and instant transformation then and there. It took years for me to understand the message many teachers were trying to hammer into my thick skull. One teacher, a famous magazine art director, who I admired for his position, autographed one of his magazines for me at the end of the semester with the inscription, “it was a pleasure having you in my class and watching you completely miss the message.”

At the time I laughed but years later, as I apologized to him in an email, I understood what he meant. I had missed his message as I did with many great teachers, some too long gone for me to thank and apologize to them. To their credit, they must have seen something in me that I couldn’t see myself — something yet to be released, past my stubbornness.

Don’t be good, be GREAT!

The motto of my alma mater was, “being good is not enough when you dream of being great.” Surely that is what every creative wants out of life and as my career went on I couldn’t understand why I was never truly happy with my work. I hid myself in studio jobs administrating, rather than designing but I couldn’t stay away. I worked as an illustrator for years but again, it just didn’t click with me. I considered myself mediocre and that’s a terrible feeling to have. Sure, there are mediocre creatives who consider themselves great and aren’t but to have talent and not be pleased with yourself is torturous.

From that point on, doing good work was not enough; it had to be GREAT! Part of that thinking was to look at an idea when I was done and say to myself, “this is good, but what’s the next step that will make it great?”

I do remember the day I had my creative epiphany. I had left a very constrictive design job where every editor and administrator fought to rule the output of the art department. What came out was boring garbage and I was glad to be out of a place that made me physically sick before leaving for the office each and every morning.

I was interviewing for a job with Tom Corey, the owner and creative director of Big Blue Dot. During the interview, he asked me to name some of my favorite logos. I told him I thought the most innovative logo was the Nickelodeon logo ( this was in 1998 and not the current logo). He smiled and asked if I knew he had designed the logo. He explained his thought process behind creating a kinetic logo where the standard was the simplicity of the type, always white against the Nickelodeon palette of orange. Within any shape, be it a ball, dog, rocket, bird or what-have-you, the type would remain the same for the identity. He also gave me an inside look at his newest logo creation for the Noggin channel.

©Nickelodeon/Viacom

©Noggin/Viacom

As with the Nickelodeon logo, the Noggin logo was ever-changing with the static smiling lower face. Absolutely brilliant and inspiring!

Yes, it was the late Mr. Corey who shot me between the eyes with the creativity bullet. He kicked my ass over the line of good into understanding great. I didn’t get the job but the lesson on creative thinking was worth more than he was willing to pay me.

©GL Stock Images

As my career progressed, with my confidence in my abilities and excitement at new challenges, my peers laid praise on me as a brainstorming genius, a conceptual master and, at my last position, I received certain tags such as the “King of Die Cuts” and the “Master of Paper Engineering and Evil.” I’m not sure what the evil part was, but I’ll take any clean, professional nickname I can get.

What you should take away from this

When I speak to students entering art school, I like to start by insisting they respect their fellow students as they will form the important network that will follow them through their careers. The second thing is to impress upon them the importance of opening their minds to new things and new ways of thinking.

There are different teachers with different thoughts on design and each one has something great to take away as their student. Open your mind to the possibilities and not the boring realities you have learned in eighteen years of life. There are many, many more years of growth and realization of what can be and not what others say things should be.

When I speak to senior art students, about to graduate and enter the industry, I again remind them about their base network of their classmates but the important thing I want them to remember is to look at their finished work and ask themselves, “is this good or is it great? Is there a step I’m missing? What could be done to take this to the final level?”

What makes GREAT work?

There is always another dimension that can be explored, another step that can be taken before falling over the edge… and that falling over the edge is sometimes how we learn to fly. Logos can be more than just a signature for a business — they can be a personality. Even to look at the brilliant type work of Ji Lee, and his ability to see more than words is amazing and inspirational to every designer.

©Ji Lee

Why does a logo have to have the same parameters they have had for centuries? In the age of digital movement, paper-thin t-ink and lenticular technology, what is the future of paperless logos?

Web sites, applying the same thinking, can be an immersive experience and not just a layout of blocks of information. It’s not just the delivery of information through programming languages and other web technology that defines web design — it’s how sites and apps are designed by look and function. Will you be able to look at a site you’ve designed and see a level of innovative design no one else has seen? Can you say, “how will I make this different and exciting?” This is the freeing process to experience a leap into a creativity you have never thought you could imagine.

Even the use of graphic software allows for effects that can be taken to a level of wondrous creativity. Take the textbook lessons and explore how they can be twisted and turned and you can discover something great. Although a tool, we are the masters of our computer and not the other way around.

As with the paper engineering I mentioned before, why does an ad, brochure or billboard have to be a rectangle? Why does a piece of paper have to lie flat in two dimensions when it can be three dimensions? Imagine all possibilities your designs can have and take it farther… as far as your mind will allow and budgets be damned! It’s better to aim high and let others bring you back to Earth.

Yes, it will be disappointing at times but within you, the feeling of the ability to put forth your best… to be great and not just good, is a feeling you will always treasure. If I look back over my career, I feel a sick anxiety about the early years. I suppose I should cut myself some slack about being young and headstrong, as youth can be, but I still, as part of my bull-headedness, hate the time I wasted not thinking creatively. It bothers me more than having to tone down my great ideas into just good solutions due to someone else. At least I know my own capabilities and that’s the point of being a designer.

Have you ever faced a moment of epiphany with your sense of creativity? Do you feel you are still waiting for such an epiphany? What has inspired you to reach farther with your sense of creative thought? Let us know in the comments.

Featured image ©GL Stock Images

20 One-Page Responsive Templates with Parallax Effect – only $19!

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.

Moreover, there is no room for error in a redesign. Clients have often been burned by poor results in the past and are more cautious. They’re more likely to have spent a long time analyzing their site themselves. They’re probably frustrated by the need for a redesign, or what is sometimes worse, they’re so excited by it that they’re spilling over with ideas, many of which aren’t appropriate.

Happily, there’s a lot of great advice available on how to tackle this tricky task and one of the best sources is Smashing Magazine’s current set of eBooks. Worth nearly $40, our sister site MightyDeals.com has arranged a 40% discount on this great set:

“Smashing Book #3: Redesign The Web” is 340 pages of advice on vital subjects like: the business aspects of redesigning a site; platform considerations; upgrading code to HTML5 and CSS3; important considerations of mobile design; and of course, going responsive.

“Smashing Book #3 1/3” takes redesigns to the next level: insert ‘story’ into your redesign to engage users; rethink and repurpose navigation to improve UX; make the site’s content work harder; and there’s even a detailed case study of Smashing’s own redesign.

“Essentials of Mobile Design”, “Mobile Design Patterns”, “Designing For Android” and “Designing For iPhone” cover the essentials of the biggest reason clients cite for redesigning their site: mobile compatibility. Learn the difference between mobile sites and apps, marketing, and the all important responsive techniques you’ll need.

The set of six books comes in DRM-free format, as PDFs, ePUBs and MOBIs, so you can study them however and wherever you like. Head over to MightyDeals.com now to take advantage of this great offer.

Have you read Smashing Magazine’s redesign series? What did you learn? Let us know in the comments.

Featured image/thumbnail, uses surface image via Shutterstock.

20 One-Page Responsive Templates with Parallax Effect – only $19!

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.

So what constitutes grey hat SEO? Well, there are a number of practices used, which we will look at in more detail below.

To begin with, whilst grey hat techniques can give a site a slight edge over those that utilize white hat only, there’s risk involved. Gray hat SEO breaks the rules and whilst it may not be obvious to Google, there remains a risk that competitor sites may recognize and report the use of it.

Getting down to the nitty gritty

Gray hat SEO techniques include:

• Three-way link exchange: reciprocal links and link exchange have until recently been one of the most commonly used SEO practices for many years. However, this was until Google decided that they don’t like the use of such practices anymore. Changes to search algorithms have really devalued this practice and link building has become more of an art form than ever before.

• Article spinning: this is when software is used to take original content and reword it, in order for it to look fresh and unique to Google. Whilst this is seen to be a way to avoid penalization for duplicate content, there remains a risk of copyright infringement if the content is taken from another site. It’s thought that if an article is spun well, it can still work as an SEO practice, even in the wake of Panda.

• Buying old domains: some webmasters buy up old domains with authority and back links in order to link back to sites which they want to perform well in search.

• Buying expired domains: this is when link spammers monitor DNS records so that they can buy up domains when they expire. The pages of the expired domains are then changed to link to other sites which the webmaster wants to perform.

• Google Bombing: this is when a large amount of links are created in order to perform well in search and is also known as Googlewashing. The sheer number of links mean that the site often ranks high, especially when used alongside keywords, which may, or may not, be off-topic.

• Manipulating content with CSS: for the more experienced user who can code effectively, this is when the code for a site uses CSS to make the content appear lower on a page than it actually is. The reasoning behind this is that Google crawls the content first, thus making the page seem more valuable. 

• Creating a separate page for each keyword: this allows traffic for long tail keywords by creating a new page for each targeted keyword. This is time consuming, even using an article spinner, but said to be effective for some. This technique does require pages to be released slowly to avoid triggering spam filters.

• Microsites: these are used to create different sites for each niche of one business. For example, say it’s a site for a gardener, this can be split down into say landscaping, tree felling and so on. Whilst this can be effective, it has been an extensively abused method and as such, care should be taken, especially for local businesses using the same phone numbers and addresses.

Why use gray hat techniques?

Fairly obviously, these are used in an attempt to beat the robots and allow a site to rank higher in the SERPs than it might otherwise. Whilst gray hat may be considered unethical by some, they remain widely used and of course it’s the ‘gray area’ as to the ‘morality’ of these methods that gives it its name.

Gray hat methods mean taking a risk. If a site wants to use them, then it should be considered that this may result in penalization if they are discovered by the search engines.

However, many SEO experts use these techniques as a way to boost client rankings. If done properly, and responsibly, gray hat methods can manipulate search engine rules without actually breaking them. 

If gray hat methods are used on a site, communication between the site owner, the webmaster and the SEO practitioner is vital to ensure that everyone understands and accepts the techniques.

Whilst many sites start out with the best of intentions, using white hat methods only, the temptation to revert to less pure practices usually comes about if a site isn’t performing well. It’s important for webmasters and SEO experts alike to consider the following:

• Search engine rules change, sometimes quite often, and as such, it’s important that webmasters and SEO practitioners keep themselves bang up-to-date with the rules. This avoids accidentally slipping into gray or black hat methods because of changes to algorithms.

• It’s vital that the site owner is kept informed of the SEO tools used on their website and their permission is given. Using certain techniques may not only have the site plummeting down the ranks, but it could impact on a business as a whole if their reputation becomes damaged.

• Bear in mind that offering incentives to bloggers to review your products can also be construed as gray hat practice. This is because, strictly speaking, the blogger is being paid in one way or another to provide a link back to a site when reviewing a product. Paid-for links are most certainly frowned upon by the search engines.

It’s also worth bearing in mind that there is a reason that search engines change algorithms in order to pick up on certain practices that attempt to trick the system. We’ve all become frustrated when searching to find ourselves landing on a useless pages full of links. The fact that Google has altered its algorithms in an attempt to improve web content can surely only be a good thing.

Social media and gray/black hat

There’s a fine line between ‘good’ gray hat practices and bad and as such, it’s always going to be a risk using it. In this age of social, it’s also tempting to use such practices for gaining a following by ‘buying’ likes.

This should also be avoided, there are thousands of sites that claim to provide genuine likes for a few dollars, but this is rarely a good idea. Much of the time, the likes are not genuine, but gleaned from lapsed accounts that aren’t used anymore.

Whilst social is important to SEO these days, there are several risks associated with buying likes that should be considered. 

• In order to gain the likes, a botnet may be used to propagate them, putting the target account and that of its followers at risk from malware infection.

• Another method for gaining lots of likes is by using people from developing countries to sit there clicking ‘like’ or ‘follow’ for paltry amounts of cash – that is of course then between you and your conscience.

• There is also the possibility of damaging a client’s reputation. If their followers suddenly jump from 500 to 5000, someone is going to notice and it’s to be hoped it isn’t either a client, a competitor or the social media site themselves. This could of course, result in an account being suspended.

When it comes to the crunch, whether gray hat methods are used is up to the individual. However, if they are going to be used it has to be hoped that the SEO practitioner is very skilled. Even then, there’s risk involved, so in order to be absolutely safe in the knowledge that a site won’t be penalized, it’s best to stick to white hat practices.

Have you ever used gray hat techniques? Are you confident that you know what is and is not considered white hat? Let us know in the comments.

Featured image/thumbnail, search image via Shutterstock.

1000+ Royalty Free Vectors + 50 Free Textures – only $17!

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!

Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.

Featured image/thumbnail, flexible image via Shutterstock.

1000+ Royalty Free Vectors + 50 Free Textures – only $17!

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.

At the moment the site is on hiatus whilst currently being redesigned. However, you can still check out the old site and all of the fights that have previously taken place.

Here’s our collection of some of the highlights:

Which of these characters are your favourite? Do you have a similar side project? Let us know in the comments.

MEGA Android Bundle: Templates, Icons & more – only $18!

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

LayoutIt!

LayoutIt! simplifies building your front-end code with Bootstrap, complete with a drag-and-drop interface. You get high-quality HTML5 code starting from any of their basic templates.

Flat UI Colors

Building a flat UI? Flat UI Colors is a tiny app that makes it easy to grab the colors from Flat UI for your project.

Hood.ie

Hood.ie is a platform for quickly building web apps. It’s for frontend-only web apps, and uses an open-source library that’s as simple as jQuery.

Little Nimbus

Little Nimbus offers robust web hosting plans starting at just $.99/month. They offer instant activation, CPanel and PHP, and 99.95% uptime. Plus, there’s a 7-day money-back guarantee.

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyzes and compares images. Just drag and drop images into the app and it will highlight their diferences.

MixItUp

MixItUp is a CSS3 and jQuery filtering and sorting plugin. It uses jQuery to show, hid, or re-position your elements, and CSS3 for smooth animated transitions. It’s free for person and commercial use.

Web Colour Data

Web Colour Data makes it simple to pull color data from any URL, complete with charts showing the prevalence of each color used.

Userium

Userium is an interactive usability checklist that includes categories for user experience, the site’s homepage, accessibility, navigation, links, search, and more.

WireKit

WireKit is a set of Photoshop shape layers for wireframing iPhone apps that comes in two unique styles, each of which has over 60 common UI elements.

Creative Market Photoshop Extension

The Creative Market Photoshop Extension makes it possible to browse, search, and buy Creative Market assets right from inside Photoshop.

The Productivity Manifesto

The Productivity Manifesto is a free ebook filled with tips for becoming way more productive. Just sign up for the free newsletter for a link to download the PDF.

Froont

Froont is a visual responsive design app with a drag and drop interface. It runs in your browser and even lets you share fully functional HTML and CSS with your developer instead of static images.

Billy Madipsum

Billy Madipsum is a lorem ipsum generator that generates random Billy Madison quotes rather than the standard Latin. All you have to do is choose the number of words or characters and click “Call the zoo!”

Nanoc

Nanoc is a static site builder that works for building everything from a small personal site to a large corporate site. It even works for blogs.

Ruhoh

Ruhoh is a static blogging platform built on a number of existing technologies. It uses Markdown for writing, Mustache for templating, Git for file management, and more. It’s open source and can be hosted or self-hosted.

TowTruck

TowTruck, from Mozilla Labs, makes it easy to collaborate on your website in real-time. It’s implemented in JavaScript, and works with existing web pages.

Perspective Mockups

Perspective Mockups is a set of Photoshop actions for creating more interesting mockups for presenting your ideas. The results are, apparently, crisp and unique.

Scope

Scope is an easy way to create a web-based version of any email to share with others. It’s free and can be used with any webmail.

Packery

Packery is a bin-packing layout library that can be used for a variety of layout types, including masonry-style layouts as well as more meticulous layouts (and even ridiculous ones).

Wired 1.0

Wired 1.0 is a wireframe kit for Sketch that also comes in .png and .eps for use with other programs.

Designer School

Designer School is a regularly-updated online course that teaches more than just the basics of web development. You can join the mailing list for updates, or just check the website.

Slid.es

Slid.es is free online presentation creator that makes it easy to share your work. There are some premium paid features, too, including private decks, offline presentations, and more.

Shame.css

Shame.css is a special stylesheet reserved just for your CSS hacks, quick fixes, and questionable code, so you can keep it out of your main codebase and hopefully isolate and fix it easier.

Gallery

Gallery is a pure CSS image gallery that doesn’t use a single script. It even offers autoplay and comes in prefixed and unprefixed build versions.

Magnific Popup

Magnific Popup is a free responsive jQuery lightbox that focuses on performance and user experience. It’s light and includes retina display support.

Ghost

Ghost is a free, open source, simple blogging platform. It puts the focus squarely on publishing and your content.

LivIcons

LivIcons is an animated icon pack that includes both animated and static images. It uses brand new animation methods, and of course they’re scalable and customizable.

Cylburn (name your price)

Cylburn, from Lost Type Co-Op, is a semi-connected script font based structurally on Roundhand, but with a pointed brush and restrained tension.

Fairview (name your price)

Fairview is a condensed sans serif that comes complete with small cap alternates. It was inspired by 20th century industrial typography.

Style Script ($69)

Style Script is an upright script type family with a variety of looks ranging from casual to formal. It includes over 1275 glyphs, with eight weights and styles.

Trend Hand Made ($19)

Trend Hand Made is a layered font with a basis in sans and slab fonts. It comes in over twenty weights and styles, for a huge variety of design possibilities.

Benito ($20)

Benito is a proportional, geometric woodtype-style font family in six styles with italics.

Tomahawk (free)

Tomahawk is a free display typeface that’s free for personal use. It includes standard Latin characters, as well as a selection of Norwegian characters.

Valkyrie (free)

Valkyrie is a free type family designed for fashion brands and designers. It’s a set of serif fonts with geometric elements in a modern style.

Red Dawn (free)

Red Dawn is a free typeface based on camping and trailblazing marks. It’s an all caps display font, with a very bold look.

Agilis (free)

Agilis is a stylized serif typeface that includes 394 glyphs, ligatures, and automatic arrows.

Idealist Sans (free)

Idealist Sans is a free type family that includes regular and light weights. It was designed by Elena Kowalski.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments.

MEGA Android Bundle: Templates, Icons & more – only $18!

Whilst many in the web design community bemoan Adobe’s lack of foresight, there are others — myself included — that don’t quite understand the fuss. It’s just a piece of software, and a niche one at that, so what’s the big deal?

It seems for a great number of designers, Fireworks is the only tool they’re prepared to work with.

Here’s a confession: I’ve installed Fireworks on my machine twice; once to try it out, around 8 years ago; and once to research this article. Both times it lasted less than a day before being uninstalled.

I’ve heard the arguments in favor of Fireworks before. We regularly have articles submitted to WebdesignerDepot that extoll the use of Fireworks over any other application. I’ve been told that any designer who doesn’t use Fireworks is stuck in the past, too lazy to learn something new. The problem is, that none of these arguments have ever seemed to ring true:

I’m lead to believe that Fireworks exports sliced HTML better than Photoshop. The problem is, that the last time I allowed an application to code HTML for me it laid out the page in tables — and yes, that was standard at the time. We simply don’t slice images any longer; responsive design, flat design, the mobile web, SEO; everything considered good practice by contemporary web designers is hampered by image slicing.

Fireworks exports CSS, but then so does Illustrator, and so do a number of other tools. I’ve never seen one that could write CSS as succinctly as I can, especially when SASS or LESS are taken into account.

The main use, and main argument of flag waving Fireworks supporters is that Fireworks is superb for rapid prototyping web page mockups. That may have been the case a few years ago, but how does one approach prototyping responsive design in Fireworks? Fireworks creates pictures of static websites, which makes it about as useful for mockups as…well…Photoshop. Admittedly, not all designers are fans of designing in the browser. But even for those who can’t code, products like Typecast are far more advanced than Fireworks.

The current assumption is that Adobe will plunder Fireworks’ features and attempt to crowbar them into Photoshop and Illustrator. However I find that unlikely; both Photoshop and Illustrator are distinctly different tools. It’s unlikely that Adobe would compromise the premium raster and vector programs on the market in an attempt to win over former Fireworks devotees. It’s more likely that Adobe sees the future of web mockups in the Edge line of tools. Animate and Reflow are available now in beta, and show a great deal of promise.

It’s also important to recognise that Adobe are not comparing current versions of tools. Their development team has sat down and compared what they can do with Fireworks over the next decade, compared with what they can do with the likes of Reflow, and came to the conclusion that Fireworks will, sooner or later, be deadwood.

One thing that is interesting is that Adobe haven’t also pruned Flash from their line up. The Flash platform still has its uses; AIR applications, mobile apps and gaming are all well suited, but they’re better served by Flash Builder, it’s difficult to see why Flash Professional dodged the bullet. Why would Adobe kill off an application that is at best loved and at worst ignored; whilst saving an application almost universally abhored?

The show of support for Fireworks from the community has reaffirmed our belief that Adobe should continue to deliver dedicated tools for web designers — what follows Fireworks CS6 will be an revolutionary leap, designed from the ground up with the needs of the modern web designer front and center. — Adobe’s Web Platform and Authoring Team

For the time being Fireworks CS6 remains part of the Creative Cloud subscription. However, with its now inevitable decline, it’s hard to see Fireworks as a realistic option for web design. Many will seek an alternative, and Adobe will be hoping that their new products will inspire the same loyalty that Fireworks users are now showing.

Has anyone not using Fireworks missed out? Is Fireworks still relevant for web design? Will you miss it? Let us know in the comments.

Featured image/thumbnail, Fireworks image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!

It’s all about presentation. Ideas and concepts are great, but mean nothing if they cannot be properly communicated. To help others understand them, we may create prototypes or sketch out an idea to get to a meeting of the minds. Fortunately, in graphic design, we do that by creating mock-ups.

Most times when we create designs, it’s tempting to send a flat graphic, as is, to our client or out to our intended audience. It can work, but it’s much more effective when we have a way for people to actually visualize a design in its intended environment. It’s easier to understand a mobile app when it’s being presented on an actual mobile phone, rather than just a standard graphic in a simple size.

It’s best to have some photo-realistic mock-ups, but if you have vectors, that will work as well. Today, we’ve put together a bunch of PSD’s and actions for great, professional mock-ups. It includes anything from corporate branding to shirts and more. We hope you find something useful and great to use for your next project.

Interactive design

MacBook Air 

Perhaps you want to show off a web design, application design or even just a desktop background. Whatever it may be, this is a great mock-up that’s fully scalable and can fit any project.

Blackberry z10 PSD mock-up

You’ll find a ton of iPhone mock-ups all over the Internet. However, this new Blackberry Z10 doesn’t get nearly as much love as the iPhone. Fortunately, we’ve found this mock-up to help you show off your app designs and such.

White smartphones mock-ups

What I really like about this set of mock-ups is the flat color design they’ve used. It gives off an illustrated/vector that’s not only great for mock-ups but for design elements throughout a design.

Safari browser PSD

I’m not a huge fan of Safari as a browser, but below, you’re able to download a PSD that you can use with your web designs. It will help your viewers and clients see and understand what your web designs look like in their rightful environment. 

iPod Touch PSD mock-up

The new general iPod Touch is now available for presentations with this mock-up. Great for featuring new music apps and how they’ll work in their new environment.

iPhone 5 PSD landscape mock-up

 This iPhone 5 PSD is made using smart layers and is fully scalable. Also, the iPhone comes in black or white. This is great for when you want to show how different mobile apps work or how responsive sites are seen on an iPhone.

HTC 8x PSD mock-up

Again, iPhones are all the rage. This Windows phone is great for those of us who work on different interfaces and need to present our work in such an environment. 

Samsung Galaxy SIII PSD mock-up

Considered the second most popular phone in the world, it’s probably a great idea to get this PSD in your stash. This white Galaxy PSD is all vector work, so it can be scaled for high resolution work.

MacBook Pro retina PSD mock-up

Sometimes, it’s not just enough to put our web design in side of a browser window. It’s very common for designers to create mock-ups using the actual device, whether it be a laptop or desktop. This time we have the new MacBook Pro.

iPad PSD perspective mock-up

It’s not evident what exact version of the iPad this is, but it shows it can be extremely versatile. Again, this is a vectored image that is fully scalable to fit in any of your designs. It’s great to give another, interesting angle for your responsive designs and apps.

Responsive design mock-up pack

Of major importance in responsive design, is to make sure you know and understand how your design is going to look in all browser sizes. This mock-up pack is great for putting all that together and helping visualize it.

Chrome browser PSD mock-up

As my favorite browser, this is a go-to of mine for when I want to present web designs to clients. It’s fully editable, scalable and all around wonderful for web designs. 

Identity and print

Magazine/Book Front Cover PSD

We’ll get started with a pretty simple magazine or book front cover. It’s high-quality and great for print and easily editable with smart objects. This is great for presenting covers with a fun bit of perspective, rather than just straight on. 

Fold Photoshop Action

This is a fairly simple action that transforms your one-dimension graphic into a tri-fold brochure. This is great for adding that depth to letters or brochures.

Flyer/Poster Mock-Up

If your flyers an posters are A4 or A5 sized, this may be the mock-up for you. You’ll be able to present your flyers with a bit of pizzazz to your clients.

Die cut business card mock-up

Create any shape business card with this Photoshop action. Not only do you get a neat car shape, you get a great angle and presentation as well.

Photoshop action for book cover

This is one of the most sought out mock-ups ever. Lots of people like to use these for e-books and physical books, rather than just looking at a one-dimensional presentation of a cover. 

Corporate identity mock-up PSD

Creating a corporate identity pack is probably something you’re familiar with. This pack features many different elements, including a brochure, letterhead, business cards and more to help present your ideas for an identity package. 

Magazine mockup

I like this mock-up because it’s a standard magazine size to help you show off advertisements, editorial design and more to your clients. This is a must-have for print designers. 

Magic 3D Photoshop action

Sometimes, it can be really hard to present a logo. It can end up being really plain and boring. This Photoshop action has created a way to add a little bit of excitement to our otherwise mundane logo designs. 

Paper fold Photoshop generator

This is another simple Photoshop action that just ads a bit of style to what we be a normal graphic. Great for posters, flyers and any other type of print work. 

Poster mockup template (PSD)

This is one of my favorites, mainly because it adds a bit of something else to what would normal just be a flat design. This is a great example of how one could present something differently. This PSD is also very editable.

Bifold brochure mock-up PSD

It’s often hard to find a realistic, professional way to show our brochures. Most times you lose a side of the brochure, but with this mock-up, you do not. It shows you how to set up your files and where to place them on this wooden background.

PSD business card mock-up

If all you’d like to do is feature your business cards photo-realistically, this is a great PSD for you. It’s also print-ready for creating more professional mock-ups for clients.

Mockup 4 panel accordion

We’ve talked about tri-fold and even bi-fold. Here we have a 4-panel brochure, that’s created by using a Photoshop Action.

Stationary branding mock-up (volume 1)

I found a PSD like this more than helpful for when you want to showcase all of your work in a portfolio. Often times, we don’t design and print every piece of corporate identity first, so this is a great way to show it off all at once.

Apparel

Hoodie template PSD

With this hoodie PSD, you’re able to customize colors and designs while keeping the highlights and shadows in the original. This is a must have for anyone creating designs for hoodies.

Men’s vest PSD

Again, with this mock-up PSD we are able to customize our colors and keep our highlights and shadows to go with any design.

Shirt PSD V2 mock-up

This is an extremely easy PSD to use to show off your shirt designs. The instructions are simple and easy to understand. Colors are easy to change and highlights and shadows stay in tact easily.

V-Neck shirt template PSD

V-Necks are my absolute favorite shirt to recommend to clients. They’re trendy without being too fancy, so when I’m ready to mock it up, I use this wonderful template. The colors are easy to change and it’s even easier to add the design. 

Flat peak PSD

There aren’t a ton of mock-up templates for hats or caps. Fortunately, TheApparelGuy is hooking us up with this flat peak template for caps. You can change colors and even keep the cap sticker, if that’s your thing. 

T-Shirt mock-up

What I like about this mock-up is there isn’t a whole person and it’s also not just a shirt there by itself. It’s a nice in between for those of us who want to show our shirts but don’t necessarily want to feature a model. 

Food packaging

930g steel can mock-up action

Of course, you can see this template being used for any type of coffee can out there. I think there are many uses for this piece, and it’s even better as a scalable action. 

Paper chip bag mock-up

 You may developing the brand design for a new line of chips, popcorn, pretzels or etc. This is the mock-up action for you.

Paper cup PSD and action

Well, we all know what this is for and how to use it. This coffee cup mock-up is great if you want to try new designs or if you need a realistic version of a brand already well known. 

Photoshop PSD packaging

This page features an ice cream carton, two food bags, an two types of jars. This is great for your food packaging and can be scaled, as they’re vectors. 

Wine bottle mock-up PSD

Designers are becoming more and more creative when it comes to creating wine labels. They aren’t just regular rectangular stickers any more. In order to get a good visual on them, here’s a great scalable mock-up for wine bottles. 

Wine Bottle Photoshop Action

Perhaps you don’t want a black bottle for your wine. Or perhaps you find a PSD too hard to work with. This Photoshop action creates a vectored wine bottle for any of your uses. 

Miscellaneous

Wallet CD Mockup

CD and DVD packaging is an extremely important part of print designing for some clients. Though this is a specialized version of CD/DVD packaging, it’s definitely worth having to offer a professional presentation and a new idea.

Visa credit card mock-up

You never know what you’ll get into designing as your career progresses. Your next project may just be a credit card design! Now, with this mock-up you’ll be more than prepared for that. 

13 free professional mock-ups vol. 1

If you’d like a little more consistency between your mock-ups, this may be a great pack for you. It’s great for corporate/branding identifications and includes mock-ups for business cards, CD’s, clear cards, boxing and more. 

3D box generator

This Photoshop action can transform your designs into a 3D box in a matter of seconds. This is great for those of us creating a simple package for anything from food to software. 

What are some of your favorite mock-up templates? Do you have any to share? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!

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

Willem Besselinkt turns data into 3D displays http://depot.ly/kTLw6

Men’s Health Magazine got redesigned. Find out more about it here: http://depot.ly/kTOrF  via @SPDtweets

And a good one from Adobe: how it reinvented the pen to draw on the Internet http://depot.ly/kTJTD

10 handy tips for learning a new technology via @nettuts – http://depot.ly/kTLdP

Ouch! Google+ Users Spent an Average of About 7 Minutes on the Site in March http://depot.ly/kTJ5i

Apple Climbs To Sixth Place On Fortune 500 List, While Facebook Makes Its First Appearance http://depot.ly/kQskm

How to Stop Fearing Your Superpowers http://depot.ly/kQrzR

Illustrated Aliens Series: Everyday a New Alien by Andy Martin, the Handymartian http://depot.ly/kJid2

Hip illustrations by Andrés Ariza http://depot.ly/kJi8b

A Case For Why Green Design Must Be Beautiful http://depot.ly/kJhSE  *Great read via @FastCoDesign

 Quick Tip: The Character Panel in Adobe Illustrator http://depot.ly/kJhD5  /@vectortuts

Follow The Blogs You Love In One Place With Bloglovin http://depot.ly/kJhjH

 6 advanced business terms all freelancers should know (or risk looking stupid) http://depot.ly/kJhdD

How I Work: IDEO’s Duane Bray On Creating Great Digital Experiences http://depot.ly/kJgTj  *Cool @smashingmag interview

Designing gaming websites – a primer http://depot.ly/kJgRD

Cool tricks http://depot.ly/kJgLe  3D Inset Parallax Effect

25 Outstanding Google Fonts for Web Design http://depot.ly/kJhaZ

The Loop Holes in Google Glass http://depot.ly/kJgC6

What are Responsive Websites made of? http://depot.ly/kJgz6  via @guypod

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

AnyWP: Choose 2 WordPress Business Themes – only $18!

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…

Hunter/telecommuter

Wrong choice of word

My font brother Omar

Can you relate to these situations? Please share your funny stories and comments below…

AnyWP: Choose 2 WordPress Business Themes – only $18!

For creatives, this is a huge shift. Adobe has been the leader in graphics and web software for years (especially after their purchase of Macromedia), and designers and agencies are used to the perpetual license model. I’ve already been hearing complaints from some colleagues unhappy with the switch, though many of their complaints don’t really have much merit if you really break them down.

$50 a month?!?!

The price is probably the most common complaint I’ve been hearing. But if we break it down into long-term costs for the subscription compared to the cost of the perpetual licenses, the subscription actually comes out on top.

A new (not upgraded) license for Creative Suite 6 Master Collection is US$2,600. An upgrade license will cost you anywhere from $550 (if you already had the CS5.5 Master Collection) to over $1,000 (if you had any of the other CS5 or 5.5 products). Adobe has historically offered major upgrades every 18 months or so, which means the monthly breakdown is between $30 and $58 per month. And if you have to buy the entire Creative Suite new, then you’re looking at a cost of over $144/month for 18 months.

Adobe is offering CC subscriptions for new users for $50/month, and for “upgrade” users for just $30/month for the first year (and CS6 users will get an even steeper discount for the first year). The other big advantage is that you won’t have to fork over a large payment up front. This makes it much more affordable for new designers or small agencies, and will obviously reduce start-up costs for new freelancers or agencies. This could encourage a lot of great designers to strike out on their own.

I don’t want my work in the cloud!

The good news is that you don’t have to host any of your work in the cloud, and the software itself runs right on your computer, not online.

Granted, the cloud offers a lot of great features you might want to take advantage of, but there’s nothing that says you have to. You can keep using your CC products just like you’ve been using CS products for years.

And if your internet connection is down (either on purpose or because of connectivity problems), you don’t need to worry about your software not working. It only needs to connect to validate your license every 30 days, and with the annual plan it will still work for over 3 months (99 days) without validating. Of course, without internet access you won’t be able to access online CC features, but the software on your computer will still work fine.

But how do I pirate something in the cloud?

Okay, I haven’t heard this one expressed directly, but I’ve heard grumblings where the subtext is basically the same thing.

My answer for this is that you really shouldn’t be pirating the software in the first place.

Without getting into the entire moral and ethical debate surrounding software piracy and when it is or isn’t acceptable, let’s look at one small aspect of it: the biggest reason given for piracy is often that the product isn’t affordable. I can see where that was the case with CS, as it’s a very expensive professional program. Obviously your hobbyist or entry-level designer might not want or be able to spend thousands of dollars on software.

But Creative Cloud removes that expensive start-up cost. Most professional designers using Creative Suite products are making well over $50/month with the software. And there are free and low cost alternatives that will meet the needs of most hobbyists if they don’t want to spend that kind of money on a monthly basis.

I understand the frustration that many people who design as a hobby or just like to “play around” in Photoshop or another Adobe program, but at the same time, it’s certainly not Adobe’s job to make it possible to use their products without properly licensing them.

Adobe maintains that the added difficulty in pirating their products had nothing to do with their decision to transition to an entirely subscription-based product line, but I’m sure they’re finding it to be a nice little added bonus.

I only use Photoshop/Illustrator/etc! I don’t want to pay for everything!

There’s good news here: you don’t have to. There are plenty of people out there who only use Photoshop, or Illustrator, or any of the other Creative Cloud/Creative Suite products. And for those people, you can subscribe to just one program at a discounted rate of US$19.99/month.

This is a great option for those people who only use one product (like photographers who only use Photoshop or visual effects designers who only use After Effects).

More about the new subscription model

Students and teachers will still be able to get Creative Cloud at a deeply discounted rate of US$19.99/month ($29.99/month after June 25). The big bonus here is that they’ll get access to all of Adobe’s programs, rather than just the one or two they might need for their classes.

This opens up a lot of creative possibilities, as students and teachers will be able to more easily branch out into other media. We’re likely to see more designers familiar with motion graphics, more video editors proficient in audio editing, more photographers proficient in design, etc. And of course we’re more likely to see interesting projects coming out that combine disciplines.

In addition to the basic Creative Suite programs we’ve all become accustomed to, Creative Cloud offers some additional tools you might not have used before.

There’s the Digital Publishing Suite, which lets you create content and publish apps. There’s ProSite for managing and building your own professional portfolio site. Business Catalyst offers tools for website hosting and management. And Story CC Plus is available for collaborative screenwriting and production tasks (like scheduling and reporting). These are apps that a lot of designers and other creatives may not have tried before, but without any added cost, there’s no excuse not to now.

One of Adobe’s main reasons for switching to the cloud model is the ability to constantly update products and add features without a major product upgrade. These constant updates are good news for the creative community.

The verdict?

While transitioning to the cloud is going to be an unwelcome change for some designers and other creatives, overall, I think it’s good news for the industry and for creative pros. You’ll have access to more programs and more features for less money. And you’ll get updates on a more consistent basis, without added cost.

While I’m sure we’ll continue to hear complaints from some sectors of the design community, overall I think most creatives will embrace CC once they give it a chance.

Are you already a Creative Cloud subscriber? Are you happy about the change or do you have reservations? Let us know in the comments!

3,000 Items! MEGA Design Bundle – only $49!

Last year saw search giant Google make two major algorithm updates — Panda and Penguin — that saw many a site plummet down the rankings, as they were penalized by the new rules.

This was because the changes were implemented in order to rank poor quality sites, such as content mills and link farms, down and give more weight to sites that produce quality content.

This is carried out by making changes to how Google’s spiders recognize a site, giving better rankings to sites with quality, well written content and social media engagement. For web professionals, this created something of a panic, as static sites that were not particularly well written and stuffed with keywords began to fail.

Penguin and Panda updates relied on a new set of rules and more complex algorithms designed to rank a site on a number of different factors.

These include:

• Content: Google spiders can now tell if a site is badly written, with spelling and grammatical errors, lots of ads and bad quality links. This change is seen to be a welcome one for many SEO and digital professionals, as it immediately knocked poor quality article syndicates and content mills down the ranks, so that high quality could take their place and be more useful to searchers.
• Freshness: the “freshness” of copy has become more important to Google than inbound links. This means that in order to compete on Google, it’s necessary to add new content often. The freshness ranking looks at 3 key areas: #1: Trending topics such as the Olympics or US election #2: Recurring famous events such as the Superbowl #3: How recently the content has been added.
• Unique content: ever copied and pasted some content into a website to cut corners? Now it will also cut the site’s ranking. Original content is one of the most important aspects of determining position. Content containing unnatural links will also be penalized, so it’s important to ensure that links appear organically and are very relevant to the content. This is only going to become even more important as Google’s Author Rank takes off.
• Social: as many of you will know, social is the new marketing and is a very powerful tool for SEO. Google now uses social in search results to determine just how useful a site is across the board. It’s important now for online marketers and SEO experts to include social, ensuring that all brand colors and logos are uniform across social channels and websites. Additionally, it’s important that the social presence is well managed; badly, bot-managed social will harm a site’s rankings.
• Free from technical errors: this in particular is important for web professionals, and will no doubt knock a lot of blogging sites off the top perch. A site that has a sound architecture will perform better than a site which is built off templates, Flash, or is more than two years old. This means that code should be standards-based with valid CSS tags and tidy meta data.

How to address problems with a site’s ranking

Even some of the biggest sites were affected by the changes to Google algorithms, I read of one which had to be stripped right back in order to change all of the keywords and duplicate pages.

A site that is poorly written should have all of its content refreshed, preferably by someone who can write. This includes blog posts and articles, so if a site has lots of content like this, then it may be a better idea to strip it all from the site and add as you get it, or different content, written.

Meta data also has to be clean and tidy and Google tends to ignore keywords and concentrate on descriptions here. Keywords of course still have their place and it’s important to ensure that these are still well researched and analyzed, but articles and blogs with a high keyword density are likely to be penalized. This is because keywords, when overused, tend to compromise the quality of the writing.

Panda concentrated on getting rid of those sites which attempted to “trick” its algorithms with the overuse of keywords and link spamming. In order to determine if a site has spam links pointing at it, use Google’s Disavow Tool, which will remove them for you. However, it’s important at this point to note that a site audit should be carried out to identify bad links and it should be with caution that the tool is used.

For Panda, it’s also worth checking that a site’s content is unique; it has to be 60% unique site-wide, as well as accessible, in order to pass Panda’s rules.

Penguin concentrated more on the actual content and both algorithms are still updated regularly in order to refine them. For the most part, Penguin concentrates mostly on keyword stuffing within articles and spam links. 

Essentially, they are both concerned with accessibility, content, spamming techniques and new rules that are designed to prevent black hat SEO.

What is black hat SEO?

Basically, this is a way of attempting to manipulate the search engines so that it essentially ‘tricks’ them into thinking a site is valuable. Black hat uses aggressive tactics and is geared towards the search engine, rather than a human audience.

Over coming articles, I will take a look at black, white and grey hat techniques in order to give a clear overview of which can be used safely and which are a no-no. The problem that many have found is that some, less than reputable, SEO ‘experts’ have employed black hat techniques in order to win more customers and make a quick buck. This is why some business sites have dropped like a stone down the rankings, often unaware that they have done anything wrong.

Black hat techniques include:

• packing code with ‘hidden’ text;
• link farms where a group of sites all link to each other to spam the index of a search engine;
• blog spam, using the comments field on blogs and forums to place links to other sites;
• scraping, a practice where one site takes content from another in order to appear more valuable to search engines;
• doorway pages used with the intention of enticing searchers with phrases not related to site content;
• parasitic hosting , where a site is hosted on someone else’s server without permission;
• cloaking, a technique in which the search engine spider sees different content to the end user who views through a browser.

Black hat methods are seen by many web professionals to be unethical, as they use tactics that promise swift returns but run the chance of damaging a company’s reputation, website and in turn, profits.

Utilizing black hat methods often means that a site doesn’t have to wait months for link backs, as you would with traditional white hat methods. However, it also fills the internet with useless information and spam, and over the years has seriously affected search.

It’s also cheaper for the SEO strategist to carry out as often, a blog network will already be set up to link to and it doesn’t depend heavily on analytics and content, as white hat practice do.

Not only does employing black hat methods often lead to the threat of legal action, if they are used alongside a PPC campaign, heavy penalties can be incurred from the advertising host.

It’s not recommended that a site use black hat techniques due to the penalties involved, in terms of legal action, reputation and the threat of not ranking. However, no doubt that won’t stop everyone, despite the Google updates.

Saying that, we’re already seeing content mills dropping rapidly down the rankings, so the updates are obviously working as this is one of the key areas that Google wanted to address.

Google and all of the major search engines have a vision, one that intends to clean up the web and do away with bad practices, leading to more useful content appearing at the top of search for us all. Whether you use black hat techniques or not is between you and your conscience, but certainly I for one am glad of the ability to search and not come up with a page full of junk before I get to what I want.

What problems have you run into as a result of Panda and Penguin? How have you solved black-hat techniques employed by predecessors? Let us know in the comments.

Featured image/thumbnail, search image via Shutterstock.

3,000 Items! MEGA Design Bundle – only $49!

Taking advantage of that Lizatom Shortcodes provides literally thousands of shortcodes and countless shortcode combinations, to give you a simple, easy to implement solution for improving your site’s design.

Consequently, we’re delighted to say that our sister site, MightyDeals.com, has managed to bring back the hugely popular LizaTom Shortcodes Plugin deal.

One of the best WordPress Shortcodes plugins available, the LizaTom Shortcodes Plugin is very lightweight, cross-browser compatible and easy to install. As well as great CSS3 staples, there are some awesome jQuery effects as well, including tab interfaces, accordion and infoboxes.

Hundreds of CSS3 buttons are included, you can define any icon, color or size that you like. Add tooltips or 3D shadows to images. Sleek looking pricing tables, pull-quotes, beautiful dropcaps and more are all featured. Tabbed content, accordions, custom lists and columns are all added in seconds with a simple code in your WordPress admin panel.

The deal price on MightyDeals.com is just $19, which is a fantastic discount of 85%, go get it before it’s gone!

Have you use LizaTom Shortcodes? Which did you find the most useful? Let us know in the comments.

STREAMIFIED: Full Social Media Management – only $11!