Any confusion in the way the site is setup, its search functions or even the appearance can create large amounts of controversy between citizens and governments; as history has shown.

With that said, we’re going to look at the best practices for creating government websites by comparing local with federal, the usability of these sites and their designs.

Note: To eliminate the chance of political debates in the comments, any reference to government hierarchy will be according to the US Constitution instead of their socially accepted hierarchies.

Transparency

Let’s start by taking a look at two .gov websites, the White House and the Santa Monica City Council.

White House (top) and Santa Monica City Council (bottom) websites

When considering the issue of transparency, which is priority #1 for most citizens when looking at a government website, the White House fails miserably.  Important information is extremely hard to find and may require hours of research to get a clear understanding of what’s going on inside the White House due to its lack of organization.

On the other hand, the Santa Monica City Council does a decent job of providing transparency.  When you first arrive to the site, it’s easy to find the last meeting that was held, all of the issues that were discussed, and any resolutions that occurred.  Minutes are accounted for, and it’s even easy to find out when the next meeting will be held so that you can watch it online.

It’s also important to provide an easily accessible and user-friendly search.  This is an area where the White House website performs well.  The search box is easy to find and the results are well organized, allowing the user to put them in chronological order.

The Santa Monica City Council also has an easy to find search box, but when the results are directed to Google it completely breaks the consistency of the website.  Results are difficult to sort through and the information isn’t always relevant to your search.

So when looking at these two government websites, we can learn the proper way and the wrong way to provide transparency.  By focusing on transparency on the homepage, the Santa Monica City Council website can be perceived as caring about its citizens as its primary concern. Adversely, citizens may get frustrated with the White House because their website makes it increasingly difficult to find important information.

In conclusion, while it’s important to maintain an aesthetic appeal, it’s even more important to make transparency easily accessible.  I see no reason why both can’t be done, with the aesthetic appeal of the White House website, and transparency put on the homepage like the Santa Monica City Council website.

Issues

This is a dramatically important piece of any government website.  Let’s start by taking a look at one that has done this well.

Sen. Rand Paul website

The website of Sen. Rand Paul lays out the issues in a very cohesive manner.  By simply hovering over a menu item that clearly states “issues” you get a nice drop-down menu with all of the issues laid out for you.  This is a very simple, straightforward approach to delivering the information citizens need.  Not only that, but when you choose one of the issues, the information is laid out thoroughly and in a user-friendly way.  It’s a very good example of what you should do when creating a government website.

Now let’s take a look at a government website that hasn’t done this so well.

Gov. Rick Perry website

Now even though the website of Gov. Rick Perry has a nice feature slider, digging deeper it’s actually pretty unorganized.  Finding the issues where the governor stands can be a fairly daunting task.  The website is more centered around mainstream news rather than focusing on information that’s important to citizens, such as the issues.

To summarize, when you are creating a government website, you never want to make the issues hard-to-find.  Make sure these are easily accessible to help citizens make informed decisions.

Mainstream Design

It’s extremely important that government websites have a professional and polished look.  In order for a government website to be taken seriously, as statistics have shown, it needs to look and feel mainstream.  With that said, let’s take a look at a government website that has plenty of mainstream appeal.

Congressman Ron Paul website

A website such as Congressman Ron Paul’s has this mainstream look and feel, so therefore it can be taken seriously.  When a government official comes to you asking to create a website for them, it’s important that you understand what the mainstream looks and feels like.  Blue and red are common colors that government websites like to use, especially when they are federal.  A large header with the representative’s photo, their name, and what position they hold is a very common practice as well.  Study what mainstream government websites look and feel like, and you’re almost guaranteed to get repeat customers.

Now when looking at a government website that isn’t so mainstream, we go back to the Santa Monica City Council.

Santa Monica city Council website

This is a good example of where the notion “content is king” holds true as the websites bounce rate hovers around 58% in the past month, which isn’t terrible.  It’s hard to look past the fact that this website looks like it was created in 1995, however, you’ll see that there is plenty of important information and it’s easily accessible at that.  Putting the content aside though, it’s not a website many people will stay on for the design alone.

So how important is design in a government website?  Well, with the bounce rate at 58% and the average user staying on the site for 2 min., the Santa Monica City Council website shows that the importance of the design is moderate.  However, it is noticeably important when you compare their website with Congressman Ron Paul’s website, which has a bounce rate of around 52% and an average time on site of around 3 min., whose design follows more along the mainstream guidelines.  Those numbers may not seem like a very big difference, but if you know anything about usability testing then you know they are significant.

So in closing, the importance of a government website design is the reason why it is number three on the priority list.  However, if you want to have repeat customers and referrals, you may want to consider understanding what government mainstream websites look and feel like.  Officials want to be taken seriously through their websites design just like anyone else, so you should provide that for them.

Conclusion

Spend some time going through various government websites and ask yourself the following questions.

• What do they look like?
• What is the feel that they are trying to generate?
• What do people complain about on the forums or do they have one?
• What do they have in common?
• What don’t they have in common?
• Whose user data looks better and why?

These are just a few questions that you could ask yourself when studying government websites and how to create them.  However, if you can nail down these three core features that I have outlined for you; transparency, issues and mainstream design, you’ll be well on your way to a career in creating awesome government websites.

Justin Hubbard has been helping businesses since 2007 by creating timeless, memorable logos as part of a branding package and modern, user-friendly websites.

What other practices do you think are important when creating government websites?  Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

As designers, we’ve gotten used to building pixel-perfect mockups as our web blueprints. But responsive design takes a different approach.

A designer’s role is no longer to produce a mockup and then pass it off to the developer because responsive design is not just a two step process, it is a series of revisions. Most of which are made in the browser. It is a collaborative effort between the designer and developer, no longer two separate tasks.

Here are some tips and a general workflow to make the transition from designing static sites to designing responsive ones a little easier.

Knowing your viewports

Before starting any project it is important to determine your viewports. A typical approach would be to build one layout for smartphones, one for tablets and smaller viewports, a larger desktop version, and maybe a second desktop version for even larger/wider screens, say 1200 or 1400 pixels or more.

Planning ahead

Sketching can be your best friend. Take one piece of paper and make 3-4 boxes to represent each viewport. Having all of your viewports on one page helps you to not focus on any one design more than the others. When laying out your design, take the most important content first and add it to each of the viewports, working your way down to the less important stuff as you go.

You will quickly realize that not all of the content may fit in the smaller viewports. Better to find that out now while doing sketches, instead of trying to make changes to a finished design.

Yup, those are my actual scribbles. You might not be able to make out what each element is but those are from an actual project. I did the design and development so I didn’t have to make it clear for anyone else. The point being, nothing is faster than pen and paper for quickly jotting down layout ideas.

Wireframes and mockups

The most important part of wireframing, is having the developer take an active role. He or she should know right away if your idea is going to work or not and can give suggestions on ways to get your vision across without having to reinvent the wheel.

With responsive design you can no longer spend 90% of your design time before the development begins. So mockups need to be quick and rough. Also, be open to changes because chances are your original ideas may not work exactly as planned.

The browser

Because of the large amount of testing involved, responsive design is best done as a process of revisions in the browser. As soon as a basic layout is agreed upon it is best to begin the development right away. Having your layouts viewable from a browser helps prevent a lot of design problems.

Another thing to consider as a designer is what elements of your design can be created with CSS alone. Many devises today are able to display drop-shadows, gradients, borders, rounded corners and other design elements created with CSS. CSS only elements are easier to change, takes less design time to create, and don’t require images or image slices to implement. Of course if you are not developing the site yourself you will need to be able to communicate your layout ideas with the developer.

Taking it into Photoshop

I highly recommend using one .psd for all the layouts. Here is a quick example using 1200 pixels as the largest viewport. So start with a new .psd at 1200 pixels wide by 2000 pixels tall. The other viewports will be 480, 1020, and 768 pixels wide.

To start, unlock your background layer and duplicate it for as many viewports as you need plus one. Fill in the original background layer black and leave the rest white. Put each white background layer in a folder and name it for its viewport (example: “480”).

Next set up each viewport in the .psd. Remember you only need to do this one time and just reuse the template for all of your projects.

First add guides at the edges of each viewport. (View -> New Guide and select “Vertical”). Add guides at 90, 216, 360, 840, and 1110 pixels.

Next create Layer Masks on each folder, which will form the edges of each viewport. Use the Rectangular Marquee Tool to select the area inside the center two guides (480 pixels).

Having Snap checked (View -> Snap) makes this a lot easier. With the selection made and the correct folder selected in the Layers Pallet, click the Add Layer Mask Button to apply it. Do the same step for the other viewports.

Now to see a given viewport simply turn off the other folders. I also included a photo of the Layers Pallet if you wanted to see what that should look like.

Mockups

If you already have a rough site developed, take a screenshot at each viewport and add those into your .psd in the correct folder.

Generally it is easier to start with the smallest viewport and work your way up to the larger ones in Photoshop. So flesh out your 480 pixel design, then duplicate the layers and drop them into the 768 pixel folder.

There is no need to be pixel perfect with any of your layouts. I tend to get one viewport looking correct but for the rest I only change the elements that are truly different in each. Don’t worry about getting the margins around text blocks perfect. Really just ignore text as much as you can because Photoshop cannot render it the way it will appear in the browser, and most of the text design will be done with CSS.

Understand how content changes

When thinking about the design you need to understand how the layout will be altered as it changes from one viewport to another. You also need to consider what happens if a layout is slightly smaller or larger than the viewport you are designing for.

There are a few options for allowing your content to adapt to each layout. Each element can be fixed, hidden, floated (left or right), liquid, or they can scale. Any give responsive design will use a combination of all of these.

Floating elements are most commonly seen in content areas that sit side-by-side in large layouts, but stack on top of each other in smaller viewports. As the viewport begins to get smaller and each element is floated left, the elements on the right side will begin stacking below the elements on the left side.

Liquid content adapts best to changing viewports but can become awkward if used on large viewports. Liquid content is typically used for columns of text that scale as wide as the viewport allows. They work great on smaller viewports but can become too wide on larger ones, so it can be best to switch to fixed for those.

Similar to liquid, scaling elements are given a percentage size and scale as small or wide as the viewport allows. These are different in that it can apply to images and text sizes. These elements are given a percent width and/or height and adjust to the viewport.

Fixed is the most rigid way of laying out content. If you have a piece of content that you don’t want it to scale or change size in any way, it will be fixed. The best thing to do with fixed elements is design them to fit the smallest viewport. It is a lot easier to use a small elements in a large viewport over trying to fit a huge element in a small viewport.

When you want to remove an element or just don’t have room for it you can hide it. Hidden elements will not be seen by the user but will still be downloaded. So if you are using large images but hiding them from mobile users, the page will still take the same amount of time to load whether the images are visible or not.

Remember that you can and should use a combination of all of these on the same element. That means a text box will be fluid in one viewport, fixed and floating left in another, and may be hidden in a third.

Designers are not being forgotten

Because so much of a layout can be created with CSS it may feel like your role as a designer has diminished. Really, your role has just changed. Web design for too long has been about designing the interface while neglecting the content.

The layout is still important but the developer can do much of it. The designer should focus on making sure the goals of the website are met. Spend the most time on strengthening the conversion process, emphasising important content, and making it more palatable and digestible.

To be perfectly honest, I tried looking for some good examples of this in responsive design, but really couldn’t come up with any good examples.

Graphical elements and images

There are some special considerations to make when dealing with images in responsive design. The safest approach is to make images that fit the smallest viewport. This way you keep the file size down and have images that will work in each viewport size.

Here is an example images that can easily be displayed in multiple viewports from Orestis.nl.

Large background images can be particularly problematic when scaled down for smart phone use. If you plan on using them make sure to do it in a way that keeps file sizes and load times to a minimum.

Consistency

One of the biggest problems with responsive design is the lack of consistency. Users may have trouble navigating your site on a tablet when they are used to their desktop design.

Make sure to use the same color scheme on every layout and keep at least one consistent element throughout. The logo being the easiest element to transition through all. Always make navigation clearly marked and easily found. If you have to remove elements from smaller viewport designs, have other methods of getting to that content.

Don’t reinvent the wheel

When you are designing a static website you can have a lot of freedom but in responsive design there are more things to account for. Use a method that works and spend your time making that look great. If people can make email templates look awesome you can do the same with a responsive design, it just takes a little creativity.

Tyler Herman is a web designer and blogger. You can follow him on Twitter @couchable where he serves up design and web business related news and articles worth taking a look at. Or at his blog Couchable.

What do you think is the most difficult thing to keep in mind when designing a responsive site as opposed to separate mobile and static sites? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

If we as interactive designers we’re able to take a little more time when it came to typography, than the results would show a unique, well thought of design as oppose to a “run of the mill” creation.

There is a good chance that the majority of designers and designs you admire showcase good examples of typography.

I’ll show you a few steps I take in tweaking set type to be more appealing than those default scenarios of 24px H1 tags along with 13px set in Times New Roman.

Don’t settle for default settings, everyone is doing it.

Here we have the ever- so- common look of a heading along with a chunk of body copy to follow. This doesn’t exactly pull you in or set itself apart from all the other samples just like it, right? So to make the text sample more visually appealing, first, we’re going to make a few changes with our font selection.

Choose a font that will have more visual weight with your headline

Although font selection is not exactly “typography,” it is in fact a quintessential component to help the type on a page distinguish itself from other elements. With the onset of @font-face, massive amounts of choices are available to designers anywhere.

Here I’ve used an Extra Condensed Gothic Style font that can easily be found on a free font site like FontSquirrel.com. If we stop and think about it, the name “Condensed” should mean something, because it is in fact more dense than it’s normal book style family member, which is exactly what we want out of a headline:, something that pulls the user in and truly sets itself apart from the body copy. It certainly succeeds in grabbing your attention better than the original but there are a few things we could do to further improve the text.

Make it more appealing with two lines of CSS

The immediate change is in the letters; they’re all capitalized now but they also now have negative kerning between each of the letters (a technique carried over from newspaper design).

Both of these characteristics can easily be accomplished through CSS, {text-transform:uppercase; and letter-spacing:-Xpx;}. By making these two lines worth of coding changes, it results in a major improvement in visual weight, especially over the original .

Work out any last little tweaks

In the next step, the font used in the body paragraph has in fact changed to a cleaner sans-serif, which better compliments the headline text. We’re getting closer to a much more visually appealing design, but there are a few changes we can make to clean it up even more.

As the green indicators show, there are unequal margins and what typographers like to call an “orphan.” Which is a single word that falls to the last line of the paragraph. It creates a very unequal weight visually as compared to the rest of the text, and this issue can be solved easily by rewording the text slightly.

When it comes to margins, there is no rule that all must be equal. However, if you are starting a young web design career, it’s good practice to have equal margins throughout until you experience and learn techniques that allow you to extend beyond the guidelines of typesetting and still accomplish your goal visually.

After creating a more balanced visual canvas by removing the orphan and adjusting the margins you can see the end result, a well set type sample that’s comfortable where it lays.

Dallas is an Interactive Designer at 352 Media Group, a digital marketing and web design company.

What are your best tips for web typography? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

I don’t want to mention any names here or tell you what to use.

Instead, I’m going give you some important points to consider, so that you can make an educated decision on your own.

And hopefully, not invest a huge amount of time and energy into a CMS you will have to abandon a year or two down the road.

The learning curve

Sadly, many designers pick a CMS on this point alone. Don’t get me wrong, choosing a CMS you can actually figure out is important, but you are investing a lot of time and energy into this piece of software. Potentially, years of your life will be spent working with this CMS. Don’t just go with the easiest one to configure without taking in some other considerations. A one-click install is nice, but should not be a deciding factor.

With that said, how fast you can get up-and-running, and building simple sites is important. Every CMS has a learning curve but some are much steeper than other. Consider how much time you have before making a choice. If you are a student, you might consider taking the plunge and digging into a more difficult to learn but feature-rich CMS, because you have the time available to do it. If you are working and need a CMS solution yesterday, you may be forced to go with something you can get up in running in a few days.

Theming

If you are not familiar with the term, by theming I mean creating the skin, the visible part of the front-end of the website. How this is done should be a huge consideration. Remember developers are the people building CMSes and they like to make development easier, sometimes before considering you the designer, and unfortunately, the end user, too. Which means, the way the front-end is put together might have been neglected or made unnecessarily complicated. Some CMSes are much easier to theme than others. Also, how the control panel is set up and how easy it is to use should greatly influence your decision, because you will be spending huge amounts of time working with it.

You need to consider how flexible theming for the CMS is. Are you able to create or import static HTML and CSS or are there a ton of hoops to jump through first? How is the file structure set up and are you required to save separate pieces of your design all over the back-end? A good CMS, once you are proficient with it, will save you time. But there are definitely some CMSes out there where development takes extra time.

How much freedom are you given to build the website you want? Every CMS has some design hurdles you have to jump over. Are you forced to begin with a starter or default template? That can be a big cramp in your design style and it can eat up extra time. Although, some people prefer having templates to start with. Which do you prefer? Do you have to write markup right in the browser or can you use a text editor? Think about how you prefer building static webpages and check to see if you can use the same process or will you be forced to do things differently.

Documentation and resources

A CMS is only as good as its documentation. I’ve played around with a few amazing CMSes that I ended up having to abandon because I got stuck, and realized there wasn’t enough proper documentation to get me out of the jam I was in. So right after looking at the basic specs for a CMS, dig into the documentation. You should be able to start with zero knowledge and build a complete website just from reading the documentation. If it doesn’t look like that is the case, you might want to look into another CMS.

Most CMSes list their features but the documentation is really where you can see exactly what is offered. For example, a CMS will probably offer some sort of shopping cart solution, but what that is exactly, can vary greatly from CMS to CMS. If there are one or two things your CMS must have, be sure to read the documentation about them specifically, and see if they will work for you.

Community

Even the best documentation cannot answer every question you will have. Is there a place to go where people will answer your questions? If there is, how helpful is the community to designers and novices? Some communities can actually be quite hostile or simply ignore beginner’s questions.

If you would like to ask some questions, don’t be that person who gets on the forums or Twitter asking “Is this CMS any good?” Browse around a little bit. Someone has probably already asked the question you have. A good way to gauge the quality of the community is to see what kinds of responses people are getting to their questions, and how many hours/days it takes to get them. Nothing is worse than having a question you cannot answer and not having a resource to turn to.

Another consideration not often thought of is paid support. Do the CMS developers provide support and how much does it cost? If they don’t, are there people in the community that you can trust to get timely support from? Inevitably, there will come a time when you need a custom add-on built or something else comes up that is over your knowledge level. Someone needs to be there to do it for you or walk you through it.

Community also includes the third-party developers. Who and how many people are building add-ons for the CMS? Most CMSes have a central add-on community. Have a look around and see what is available.

Usability

Not every website you build will be for yourself. How easy a client can add and edit their own content is very important. Complicated back-ends and lack of features means more development time and more time training clients. One of the most basic and most important features of any CMS is the text editor. Editing site content should be a primary concern for you and the people you will be building websites for. How easy is the WYSIWYG editor to use and goes it write clean markup? Will clients who are not computer savvy be able to use it?

Also, along the same lines is the file upload system. How easy is it to upload images, video, PDFs, et cetera? Many clients don’t have the software or knowledge to edit and resize images, yet need this functionality on their website. Is there built-in image resizing your clients can take advantage of?

The usability of the control panel should be considered as well. You may have to train people to use the system, which can be many hours of work over the years. Is it simple enough your grandmother could use it? Also, how configurable is the control panel? Can you turn off or hide areas the client doesn’t need access to? It is nice to be able to only let clients edit the areas of the site they need to without having to deal with other parts of the control panel that might confuse them, or worse, allow them to break the website.

Clients need to be able to do these basic things:

• Edit existing page content
• Add new pages easily and have the navigation updated automatically
• Add photos, documents and video content
• Give access to the control panel to other employees

They all sound pretty easy but there can actually be a number of problems. Tabular data or heavily styled areas that require HTML and CSS knowledge can be difficult for a client to edit, and some WYSIWYG editors don’t do a very good job here. Some CMSes don’t provide an intuitive way of adding additional pages or easily up-datable navigation. You don’t want to leave these things up to the client if you don’t have to. I like to follow the rule that if a client could break something, they will break it. Some CMSes don’t allow certain file types to be uploaded or have an upload file size limit, which can cause headaches for clients trying to upload large PDFs or PowerPoint presentations.

All things to consider.

Programing knowledge requirements

You chose to be a designer for a reason, right? Some of us might be proficient in a language like PHP but that doesn’t mean we want to spend all of our time doing it. Take a look at the language the CMS is written in and see if it is something you are familiar with and could work in if you had to. Also, see how much scripting is done in the templates. Some CMSes do a really good job of keeping the PHP or whatever language out of the templates, so you can focus just on the HTML and CSS. Other CMSes can have their own templating language to use.

They are all a little bit different and, depending on your comfort level with code, you will have to choose one to live with. Generally, I say don’t go with a CMS where you have to learn a whole new language to get started, unless you really would rather be a developer and not a designer.

How active are the developers?

How good the CMS is now is important, but where it is going in the future is just as important. So find out what the developers are up to. Look at the time it takes for each major release and each dot release to come out. If it has been two years since the last dot release, the CMS might be dead or on hold. There is no perfect CMS but the more the developers are working the better a CMS is going to get. And what may be the best CMS now might not be five years from now. Don’t get stuck with a dying CMS.

Find the bug tracker and see just how long bugs go unfixed. If something is broken on a site you build, clients are going to rely on you to fix it. Telling them the CMS developers haven’t fixed the bug yet, isn’t a very good excuse.

Flexibility and reach

What does the CMS come with out of the box? A CMS with little functionality means you have to rely heavily on 3rd party add-ons. On the other hand a CMS with everything built in may be bloated and difficult to get up and running, especially if you are building a simple website. There needs to be a happy medium between the two. An ideal CMS can be set up quickly without a lot of configuration needing to be done, yet has all the tools required for more complex features.

Just because you are only building simple websites now doesn’t mean you might not be building more complex websites in the future. Think about the types of websites you would like to build or may be asked to build and does the CMS allow for it. How hard is it to add a membership area to the website, multi-language support, or to add a store?

Does it make you better?

Learning how to build website with a CMS is a great thing to know but just how much larger your skill set becomes, can vary. Being able to let clients edit their own content is the central feature of a CMS, but they can offer so much more:

• Ecommerce
• Membership functionality
• Multi-language support
• Dynamic media galleries
• Multi-site installations
• Integrating blogs and forums
• Pagination
• Easy syndication

To name a few. You probably would not have been able to create this type of work without some development knowledge but a good CMS can make that possible.

After working with a good CMS for a while, you should find that you are able to work at the same speed or even faster than if you were building a static website. A good CMS saves you development time, but should also help improve the way you develop the front-end as well, by creating reusable snippets of content, embedding templates inside each other, and displaying content from the database that you would have had to markup yourself in a static site.

Where are you going?

Think about where you are in your career now, and where you want to be five and ten years from now. The CMS you choose will be with you at least that long. Are you going to be working for a big design firm or do you want to work for yourself? Will you be doing freelance work on the side?

Not every firm uses the same CMS but there are some that are used more regularly. If you really fall in love with one CMS in particular, you can always find the firms that use it, too. Less popular CMSes have less job opportunities but the firms that do use them would be much more inclined to hire you, being proficient with the CMS, over someone who has never touched it before. Using a less popular CMS makes you more of a specialist. Using a popular CMS means you have a broader range of opportunities.

If you plan on freelancing full or part time, you will want a CMS where you are comfortable doing every aspect of development. Typically, your projects will be smaller in scope as well, so a huge CMS with a long setup time might not be the best option.

Conclusion

Every person is different and what CMS works for me might not be the best option for you. So take these points into consideration. Take a look at what CMSes are available, and pick the one that will work best for you.

Written exclusively for Webdesigner Depot by Tyler Herman, a web designer and blogger at Couchable.co. You can also follow Tyler on Twitter @couchable to find out what he ate for lunch, see photos of his 24 cats, and read rants about sports teams you don’t care about.

What do you look for when choosing your CMS? Share other tips with us!

Never Ending WordPress Business Bundle – only $14!

In fact, there are some designers who positively hate it (and often get someone else to do that part for them rather than suffer through it themselves).

A PSD to HTML service can be a huge time-saver even for designers who don’t mind coding their own designs. After all, the coding of a basic theme or template can be time-consuming even though it’s a relatively simple process.

Why not outsource it so you can focus on the creative aspects of creating websites?

W3 Markup is just one of the best services out there that can take your PSD file and convert it into valid, pixel-perfect HTML/CSS code. They can even work with AJAX, sIFR, Cufon, MicroFormats, mootools, script.aculo.us, and jQuery. Their finished files are semantic and search-engine friendly, optimized for usability, accessibility, and loading times, and they’re always cross-browser compatible (for Safari 5, Firefox 3.6+, IE 7+, Opera 11, and Google Chrome). See some of their testimonials.

You get 100% control of code and style preferences on their order form, and can choose between XHTML or HTML5 and CSS3, or have your design coded for various CMSs (WordPress, Drupal, or Joomla), or for use as an email template. See their pricing and order page

In today’s contest you get the chance to win one of 5 prizes for PSD to HTML conversion worth $200 each for any W3 Markup! You can use the credit to get a single page marked up without paying anything out of pocket, or use it toward the coding of multiple pages or CMS-ready files.

All you have to do to enter is leave a comment below (one entry per person, please). Make sure you use a valid email address (do not post with a Twitter or Facebook ID) so we can let you know if you won. Get a bonus entry by tweeting about this contest and leave a second comment with a link to your tweet to double your chances to win. Winners will be picked randomly and announced on January 26th, 2012!

Good luck to everyone and thanks to W3 for a great giveaway!

[UPDATE] Contest has ended, here are the winners:

#80 – Philipp
#76 – Brian
#175 – Cheryl
#59 – d2mike
#48 – Puneet Gupta

Never Ending WordPress Business Bundle – only $14!

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.

Cuepoint JS

Cuepoint JS is an open source plugin for adding subtitles or cue-points to HTML5 video.

jRumble

jRumble is a jQuery plugin that makes any element you choose rumble, vibrate, shake, and rotate.

Circle Menu

Circle Menu is a jQuery plugin that emulates the menu in the Path application, and includes various animation options for opening and closing menus.

Hovercard

Hovercard is a free jQuery plugin that lets you display related information when you hover over a link, label, or any other HTML element. It includes Twitter and Facebook hovercards, and uses minimum CSS and no external stylesheets.

Sharrre

Sharrre is a jQuery plugin for creating widgets for sharing for Facebook, Twitter, Google Plus, and more. It includes Google Analytics tracking, and is highly configurable and personalizable.

Flow Slider

Flow Slider is a jQuery plugin that lets you slide HTML content in a variety of ways. It’s cross-browser compatible, customizable, and easy to set up.

Gitview

Gitview is a JavaScript widget for listing Github repositories. It includes asynchronous loading of all data, a canvas element for the participation graph, and many other features.

Leaflet Maps Marker

Leaflet Maps Marker is a WordPress plugin that lets you pin your favorite places with markers, use integrated address search for finding your places, and much more.

Initializr 2 Responsive Template

Initializr 2 is now offering an HTML5 responsive design template generator. You can create slightly customized and highly customized templates in under a minute.

AntiMap

AntiMap is an open source toolset for recording and visualizing your data. There’s a smart phone app for data capture, as well as desktop and web applications for analysis and visualization.

Kinzaa

Kinzaa is a web app that lets you create infographic resumes that will set you apart from other job seekers.

HexHelp.com

HexHelp.com is an easy-to-use app for getting hex codes for any color.

Visual Heap

Visual Heap is a visual aggregator for designers that pulls images from all over the web for inspiration and ideas.

accentColor

accentColor is a JS script for grabbing the main accent color from any website.

Croply

Croply is a fast, secure, free online image cropping service. Just input the dimensions, upload your image, and that’s it.

Revolver.js

Revolver.js is a new content slider that’s equivalent to a boilerplate or framework for creating your own slider. It’s easy to use and completely customizable.

Scrollorama

Scrollorama is a jQuery plugin for doing various “scrolly stuff”, like transitions.

Tmpltr

Tmpltr is a tool for rapid web iteration, using JSON, HTML, and CSS.

Standard International (free)

Standard International is a modern sans serif font with slightly retro stylings.

Poly (free)

Poly is a traditional serif typeface suitable for text or display use.

Sofia (free)

Sofia is a feminine script font with lots of character.

Brix Slab ($174.30)

Brix Slab is an extended family with 24 fonts. It’s a robust slab serif font with subtle detailing, optimized for longer texts and readable in smaller sizes.

Rosarian ($55.10)

Rosarian is a beautiful brush serif font with curvy stems on many of the letters, designed by Laura Worthington.

Blanch (name your price)

Blanch is a display typeface that comes in six weights. It was designed for the Fruita Blanch brand, and is traditional but with a contemporary feel.

Cubano (name your price)

Cubano has rounded corners and wide strokes, and features 167 glyphs.

Hexa (free)

Hexa is a blackletter typeface that has a modern look and feel.

Haiku’s Script (free for personal use)

Haiku’s Script is a hadwritten script font, created by Poemhaiku.

Gaunt (free)

Gaunt is a varying-width, uppercase font. The varying widths can be mixed together to give it a more unpredictable, non-uniform effect.

Garamond Serial ($14.99)

Garamond Serial is a traditional serif typeface with seven widths.

Bad Script (free)

Bad Script is a script font designed with a tablet to resemble casual and neat handwriting.

Written exclusively for WDD by Cameron Chapman.

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

Never Ending WordPress Business Bundle – only $14!

At 352 Media Group, we recently saw an opportunity to make a fully responsive site for a client, Purple Communications. They make software for people with hearing loss who would otherwise be unable to make a phone call. Using their computer, phone, videophone, or other electronic device, they can communicate with others using a video relay service.

Purple Communications offers apps for multiple phone platforms, so a substantial part of their web traffic is from mobile devices. Looking at their traffic, it became abundantly clear that the best solution for the client was to make a fully responsive site. Our company has done mobile sites before, but this was the first time that one site would serve both the mobile and desktop users. If you’re interested in incorporating some responsive web design features into your company or client’s website, here are some tips to keep in mind:

Don’t compromise on design

There are designs that lend themselves to a responsive, fluid layout far more than others. A minimalist design with a simple background might only require a few tweaks to become fluid. So it can be very tempting to push this kind of design on the client, as it would make developing the site remarkably easier.

One of 352 Media Group’s competitive advantages is our award-winning design. So while initially I was succumbing to the temptation of a minimalist design, I changed my mind and decided to figure out how we could use the design we wanted in a responsive way.

There are three different ways to develop a responsive design. I’ve created names for them so that they’ll be easier to discuss:

Stepped Layouts

This technique uses media queries to serve different stylesheets at set resolutions. Traditionally you would create three different designs – one for desktops, one for tablets, and one for phones.

This method was very appealing because of my decision to design a site that would potentially be quite complicated to make fluid. Essentially, we could take our existing process of developing a site and just multiple it by three. We could even use server-side detection to make sure you only got the CSS file you needed for your resolution.

The trouble with this technique is you have to pick which resolutions you’re going to optimize your site for. Most people use numbers based on the iOS devices—768px for the tablet design and 320px for the mobile design. But with all of the different smart phones and tablets available, there are tons of different resolutions. Because the apps Purple Communications makes are available for many different phones, we wanted to make sure every user would have an optimal experience. So while I think this technique would be perfect for an iPhone app website, it wasn’t going to fit our needs for this project.

Fluid Grid

Another way to make your site responsive is by using percentage widths so that everything will scale with the viewport all the way down to 0. With this method, you set up your percentage-based grid that will do the main legwork. Past that, you utilize media queries to tweak things for different screens. This method has a distinct advantage over the stepped method because the site will be optimized for every single resolution, as opposed to just a handful.

The disadvantage here is that certain designs can be exponentially more difficult to develop. I considered this method for a long time, trying to figure out how to code troublesome areas. We utilize a common method referred to as the sliding doors technique that can allow you to use a single image to make a fluid width container with intricate edges. If you aren’t using it, definitely look that tutorial over because it’s a fantastic technique. But even with that and a few other things in our arsenal, it still would have been quite difficult to pull off.

Fluid/Stepped Hybrid

In the end, I decided on a combination of the two methods. We would utilize the stepped technique to make one design for desktop, and then one big step down to a fluid design under 960px wide. This meant that for desktop, our process was nearly the same as a normal project. We support resolutions 1024×768 and up for desktop, so we make our sites at the standard 960px width (which allows for a vertical scrollbar and other browser and OS chrome). Any viewport under that width would normally just show a scrollbar.

Instead of trying to pick which resolution made the most sense for a tablet size, we just set it up where anything under the site width of 960px would trigger the fluid layout. That way no one would ever get the dreaded horizontal scrollbar.

As a little added bonus, a tablet (that’s at least 960px wide) viewing the site in landscape mode gets the full desktop version. Keep in mind that you will probably want to do some small tweaks with media queries to make links and buttons easier to touch.

Mobile first

If you’ve done any research on responsive design, you have surely heard the mantra of developing for mobile first, which is definitely something you should be keeping in mind. Since we’ve all been in the mindset of developing sites for desktop computers for so long, it’s very easy to look at media queries the wrong way. You might think, “All I need to do is make some new images and put some new CSS in a media query, and my site will work on phones as well.” While this is true, it’s also completely backwards.

As amazing as smartphones have become, they’re still not as powerful as desktop computers. In addition, content is frequently consumed on the go. But by following our earlier logic, we’re optimizing a site for less-powerful devices on slower connections by adding CSS and images. Once you think that through, you realize that you have to alter your workflow.

The hardest part is making this work for img tags. If you’re following best practices, you’ll have optimized images for different resolutions. The challenging part is making sure that you only download the image you need. This issue could be an article all on its own, but fortunately Jason Grigsby has already compiled a list of responsive image methods and their pros and cons.

Past that, all we have to get working is the CSS. With our “mobile first” mentality, we’re going to make a mobile.css file that contains all of the CSS that mobile needs. This will be the only file that phones download. Then, we’ll make a second file called desktop.css that will build upon and overwrite the base styles established in the mobile.css. In order to make sure that phones/tablets get mobile.css only and desktops get both mobile.css and desktop.css, our links look like this:

<link id="uxCSSMobileFiles" runat="server" type="text/css" href="css/mobile.css" rel="stylesheet" />
<link id="uxCSSFiles" runat="server" type="text/css" media="screen and (min-width: 960px)" href="css/desktop.css" rel="stylesheet" />

This combination has worked so far for everything that I’ve tested except for versions of Internet Explorer before 9. Because our company standard is to support IE7+, we had to make one last tweak. You’ll notice my code above is running at server. On the backend, we’re checking for the version of IE, and if it’s less than 9, we change the media attribute to “screen, projection”. This worked the best for us, but if you aren’t running anything server side, you could use respond.js instead.

This does mean that our desktop CSS won’t be as optimized as it would be on a normal site. But, the only sacrifice we’re making is downloading a lightweight CSS file that we then overwrite where we need to. We needed to compromise somewhere, and because we keep chanting, “mobile first,” we know this is better than the alternative.

Still offering the client control

At 352 Media Group, we believe in giving the client full control over their site. After we finish development, we hand over all of the source code. We also provide a custom-built CMS that lets the client manage the pages, navigation, and site map. Like design, this is a standard that we didn’t want to compromise on, so we had a few additional hurdles.

One of the hardest interfaces to transfer over to mobile is the navigation. This is an issue because it’s also one of the most important interfaces on a site. The first question you have to ask is whether mobile users need quick access to the entire navigation, or if they are only interested in a key few. If they need all of the navigation, and there are more than four main-level items, I think that one of the best solutions is to group them in a <select> element. This will utilize the phone’s OS for an optimized interface that the user is already used to.

On Purple Communications, there were only two main-level items that mobile users primarily looked at: Products & Services, and About Us. So on phones, we only show those two items, and then group the rest into a “More” dropdown.

But one of the things that we offer the client is control over their navigation. For this site, the only thing they wouldn’t have control over was which items collapsed into the menu, so we made sure to clear that with them first. But past that, they can add any items or sub items that they want. To accomplish this, we used a second copy of the navigation nested in the last item named “More.” We hide it on desktops, and on mobile we’re hiding the top-level items we don’t want displayed. In the nested list, we’re then hiding “Products & Services” and “About” so users don’t see those twice. This gives our client full control without having to manage a separate mobile navigation (which would become a chore with duplicate items).

For the content areas, we provided training to the client so they would know the best ways to structure their content. We also set up a few classes that they could use on things like YouTube videos, buttons, and calls to action, which ensured things they added would be optimized for all resolutions.

Creating a reusable framework

The last thing to keep in mind when exploring new technologies like responsive design is to make sure your company will be better prepared for the future. You’ll want everyone working on the project to not only be thinking about the client and their users, but also about what lessons can be applied to other projects. Always be on the lookout for projects like this that can get your foot into the door of new areas so your company will keep advancing along with the industry.

At 352 Media Group, we already have established frameworks for both our programmers and our front-end developers. For instance, we split all of our CSS into multiple files to compartmentalize components and keep everyone organized. We have separate files for structure, typography, forms, widgets, etc. When you’re moving into new technologies, you can take what looks like the easy road and just abandon things that don’t seem to fit and create new things for the future. But by doing so, you’re abandoning years of experience that have been working well for you so far.

I oversimplified our code earlier that links the CSS files. We could have required that responsive sites used those two new CSS files instead of the normal framework. But instead, with a little creativity, we figured out which files should be applied to mobile, which should be applied to desktop, and which should be split across the two. We were able to adapt what we already had working into something that will work well for us in the future.

Brent Walbolt is an interactive designer at web design company 352 Media Group and an admitted nerd. His responsibilities include establishing the company standards for front-end development, researching new technologies, and teaching interns and new hires.

Never Ending WordPress Business Bundle – only $14!

Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.

Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.

Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project.

What is Foundation?

Foundation is a framework for quickly prototyping and building responsive sites and apps. It allows you to rapidly put together pages, including layout and common elements like navigation, pagination, forms and more so you can see how your site works on desktops, tablets and phones. Then you can take that code and customize or adapt it into rock-solid production code.

Why was Foundation built?

We realized that the tools out there for building responsive sites – sites that work on any kind of device – were not only insufficient but really non-existent. There are a number of CSS frameworks that people are using, but everything was designed for fixed layouts. Mobile devices will account for over half of all Internet traffic in the next 2 years, so not designing and building for them is a death sentence for online products or services. We wanted a tool that would let us not only deliver a great experience to every device, but to very quickly test out what a great experience really looked and felt like.

Talk about a site you had to use Foundation for? How did it help? What issues did you have to deal with?

We’ve used Foundation for all of our internal sites and projects for the last several months, but if I had to pick one great example it would be a web app we released recently called Spur. Spur is a tool for doing traditional design critiques by letting you capture a web page, or upload an image, and then view it with blur, heightened contrast, rotation and other effects that reveal how the visual design holds up. We designed it from the ground up with Foundation to support desktops, tablets, and iPhones; all from the same front-end codebase.

If you pull up the app on different devices you’ll see different tools and subtly modified layouts all made possible with Foundation’s mobile visibility classes. These let you easily tag elements to be hidden or shown on specific types of devices, such as ‘hide-on-phones’ or ‘show-on-tablets’. That and Foundation’s inherent ability to scale to most any size meant that Spur has a slick, tailored experience for any device type with very little additional effort.

Working entirely with percentages of course adds some complexity, especially regarding images and the flexibility of certain objects like toolbars but beyond some specific CSS Foundation took care of almost everything.

Who should be using Foundation?

Anyone who wants their site or app to be relevant in a couple years should be building for multiple devices, and Foundation is a good tool for doing that. Foundation is perfect for new sites that you want to quickly prototype and build, since you can lay out entire sites in just a few minutes using the flexible grid and common elements already included.

We’ve found Foundation to be especially helpful for companies or organization who have concerns about the cost (in time and resources) to build for mobile devices – Foundation helps you do things quickly and all at once.

What’s the future for Foundation?

We’re constantly working on Foundation, adding common elements that people have requested or we’ve seen a need for. We just recently added a new four-column phone grid so you can do more complex layouts for very small devices, and we’ll continue to work on device and pattern support. We’re also considering things like page templates, code packs for specific uses like wireframing, and working with outside developers on plugins for other frameworks like Less, SaSS, Drupal, WordPress, etc.

Our goal is for Foundation to be more than just an open-source Framework but a complete community and development approach for the front-end. We’d love to have even more contributors, both in issues, feature requests, and code on Github and we’re happy to answer questions at  foundation@zurb.com.

Never Ending WordPress Business Bundle – only $14!

Child themes let you start with the basics of an existing theme, so you’re not having to reinvent the wheel. You can pick a theme that has the functionality and basic layout you need, but then customize everything about it as you would designing a theme from scratch.

For this tutorial, we’ll be creating a child theme based on the newest WordPress default theme, Twenty Eleven. We’ll also be using some handy plugins and other tricks to make it even easier to create a child theme.

You’ll need some very basic HTML and CSS knowledge, but the good news is that for a basic child theme, you don’t need to know any PHP! The theme created is very basic, but it will give you the building blocks you need to get started creating your own themes, even if you’ve never created a WordPress theme before!

The theme we’ll be creating

Here’s a brief look at the final theme we’ll be creating:

A word about parent themes

Probably the most important step in creating a child theme is picking out your parent theme. For this tutorial, as already mentioned, we’ll be using Twenty Eleven. The reasons for this include the fact that it’s easily accessible, free, is probably already installed on any updated WP install, and is well-coded.

That last one is the most important thing to consider when picking your parent theme: make sure that it is well coded. The main reason for this is that if your parent theme is well-coded, it will be infinitely easier to create a child theme that is well-coded, because you won’t have to employ hacks to make things work.

Any time you want to make customizations to a theme, you’re better off to use a child theme instead of editing the parent theme directly. This way, if an update for the original theme is issued, your theme won’t break. And if both the parent theme and your theme are coded well, you likely won’t notice any differences in the updated theme on your site’s front-end.

One-Click Child Theme

The quickest and easiest way to get started with a child theme is to use the One-Click Child Theme plugin. Just install it, activate the parent theme you want your child theme to be based on (if it isn’t active already), and click on “Child Theme” under Appearance in the WP dashboard.

From there, enter a name for your new child theme, a short description, and your name, and click on “Create Child”. That’s all there is to it. One word or warning: I got an error message after clicking “Create Child”, but the child theme was created without a hitch.

Alternatively, you can create a child theme from scratch. To do that, open up your text or code editor of choice and enter the following information (this is taking into account that you’ll be using the Twenty Eleven parent theme):

/*
Theme Name:     Your Child Theme's Name
Description:    Your theme's description.
Author:         Your Name Here
Template:       twentyeleven

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyeleven/style.css");

The “Template” portion is what makes this a child theme rather than a regular theme, so make sure you properly identify the theme’s parent.

Setting Theme Options

Before you start customizing your new child theme’s CSS, make sure you check out the theme options and do some customizations there. It’s better to make changes within the existing framework of the theme if that’s an option, as it makes it easier to manage your theme’s code.

For this customization, I’ve selected a content-on-left layout with a single sidebar, and left the color scheme and default link color (for now). I’ve also left the background white, the header with one of the default images, and the header text color black.

Note: If you want to disable the color selection in theme options, add !important to the color specifications in your CSS.

Basics of editing your theme

If you go to the WordPress theme editor, you’ll see a mostly-blank style sheet for your new child theme. The first line of your new CSS file (after the child theme info) is importing the stylesheet from the parent theme. This is vital, and it has to remain at the top of your sheet or the parent stylesheet will be invalidated and won’t import.

One thing you may want to do at this point is install a better code editor plugin for theme editing. Color-coded syntax makes it significantly easier to code directly in WP, and will especially be useful for those who are used to colored syntax with outside editors. My personal choice is Advanced Code Editor.

You’ll also want some kind of text editor for setting up our functions.php file, preferably one with syntax highlighting.

Finding the code to change

This can be one of the most frustrating parts of child theme development: finding which parts of the code need to be edited and which can be left alone. The entire point of a child theme is to make theme creation and maintenance easier. To that end, we want to create as little new code as possible.

To make this a lot easier, you’ll want to do is install a plugin like Firebug. This will allow you to click on a part of your page design and view the associated div and CSS classes. You can also try out code to see what works, and then copy and paste it into your theme’s CSS. I’ve found that keeping your front-end theme open in one tab alongside another tab with the WP dashboard where you’re editing files is the most efficient way to edit your code.

The basics

Let’s start by defining things like the body background color, the typography, and other basics that will give us the basis for our child theme. This code sets up everything in the header, with the exception of moving our navigation menu. Let’s break it down into a few different steps.

This first block of code gives us all of our basic typography (we’ll be pulling in “Droid Sans” and “Dancing Script” from Google Web Fonts; more on that in the section on functions.php):

body, input, textarea, p {
    color: #000000;
    font-family: 'Droid Sans', sans-serif;
}
p {
    font-size: 14px;
    line-height: 24px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Dancing Script', cursive;
}

This next section sets up the main content background and drop shadow.

#page {
    background: #f5f5dc;
    -moz-box-shadow: 0 0 10px #67949c;
    -webkit-box-shadow: 0 0 10px #67949c;
    box-shadow: 0 0 10px #67949c;
}

Then we’ll make some adjustments on our blog title and description, as well as changing the top border of the header and removing the search form (which will be replaced with our navigation menu in the next step).

#site-title a {
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
}
#branding {
    border-top: 2px solid #67949c;
}
#branding #searchform {
    display: none;
}
#site-description {
    font-size: 18px;
    margin: 0 270px 3em 0;
}

This gives us a header that looks like this:

Move the main navigation menu

The next change we want to make is to move the navigation menu from its default position under the header image to the upper right, opposite the blog title or logo.

This format works best for sites that only have a small number of pages. Larger sites, or sites with sub-pages, will need additional consideration, and likely won’t work well with this kind of layout.

Here’s the code you’ll need:

#access {
    clear: both;
    display: block;
    float: right;
    margin: 0 auto 6px;
    position: relative;
    top: -410px;
    width: 500px;
    background: none;
    box-shadow: none;
}

Your navigation menu should now be sitting up above the header image, adjacent to your logo. Next we’ll add some styles to our navigation and turn them into buttons instead of a solid bar. Here’s the code for the basic font styling:

 #access a {
    font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    padding: 0 1em;
    line-height: 2.666em;
}

Here’s the basic formatting for the button behind the text, including a nice inner shadow:

#access li {
    background: #84bbc5;
    margin-right: 15px;
    -moz-box-shadow: inset 0 0 3px 3px #739ca3;
    -webkit-box-shadow: inset 0 0 3px 3px #739ca3;
    box-shadow: inset 0 0 3px 3px #739ca3;
}

And here’s the code for adding a drop shadow behind the buttons when they’re hovered over (which actually gives the impression of an animation effect in use):

#access li:hover > a, #access a:focus {
    background: #84bbc5;
    color: #EEEEEE;
    -moz-box-shadow: 0 0 3px 3px #739ca3;
    -webkit-box-shadow: 0 0 3px 3px #739ca3;
    box-shadow: 0 0 3px 3px #739ca3;
}

Now your header will look like this:

Basic styling for your sidebar

Let’s add some very basic styles for your sidebar. The changes we’re making here are primarily to make the sidebars match the design of the rest of the site. Here’s the code:

.widget a {
    font-weight: 400;
    font-family: 'Droid Sans', sans-serif !important;
}
.widget-title {
    color: #282828;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    text-transform: none;
}

The .widget-title is already in an H3 tag, so it takes on the font already specified there.

And here’s how that looks:

Changes to the post format

First we want to change the padding for the top of the posts, so the first post lines up with the top of the sidebar.

.entry-title {
    padding-top: 0px;
}

Next we’ll change the comment icon that appears next to the post title on the home page. This one is simple: just create your new icon (I’ve created versions for active and inactive versions) and then upload them using WP’s media uploader. Take the URL for each, and insert them like this:

.entry-header .comments-link a {
    background: url("http://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;
    top: 0;
}
.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {
    background: url("http://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;
    background-color:  #f5f5dc !important;
}

You’ll need to add the !important to the background-color attribute for the hover state in order to override the styling done to links elsewhere in the theme. The hover image is a filled-in text bubble, while the normal state is just an outline. Here’s the result:

Next we’ll work on the comments styling. This is simple, as all we’re doing is changing the color scheme. Here’s the code:

#respond {
    background: none repeat scroll 0 0 #dadabe;
    border: 1px solid #67949c;
}
#respond input[type="text"], #respond textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #b3b398;
}
#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {
    background: none repeat scroll 0 0 #b3b398;
    box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);
    color: #555555;
}
#respond input#submit {
    background: none repeat scroll 0 0 #67949c;
}

And here’s the end result:

Inserting code into your head or elsewhere in your theme

This is probably the most technical part of creating a child theme, and is only necessary if you wannt to do something like add Google Web Fonts to your site. That’s exactly what we’re going to do here. This is the only time in creating your child theme that you’ll need to work with PHP, and if you don’t need to insert anything into your theme’s header or elsewhere, you won’t need to work with PHP at all.

First, create a functions.php file in your text or code editor of choice. The basic code you’ll use will look something like this:

<?php function customfunctionname() { ?>
  <script type="text/javascript">
    Whatever your JavaScript is
  </script>
<?php }
add_action('wp_head', 'customfunctionname');
?>

For the child theme above, we needed to insert code into our header to link the appropriate Google Web Fonts so we could call them into our CSS. Here’s how we do that (you can get the link directly from Google with whichever fonts you want to use):

<?php function googlefonts() { ?>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<?php }
add_action('wp_head', 'googlefonts');
?>

Now your fonts should all be working properly! And all the functions that were included in the original parent theme will still be working, too.

Download the theme files

If you want to see all of the code for both the CSS and the functions.php file, you can download them here. Also included are the comment bubble icons.

Conclusion

Creating a child theme is incredibly simple when compared to designing and coding a theme from scratch. With some basic CSS knowledge and just a little bit of PHP, you can create basically any kind of theme you want. Child themes, in many cases, can also be used commercially (as long as the parent theme allows for such use) or sold as stock themes (just remember to let your buyers know that the theme requires a parent theme).

Make sure that your code is well-written, commented, and organized. This way, if your parent theme is updated, your child theme is unlikely to break.

The child theme we’ve created in this tutorial is very, very basic. But it gives you the information you need to start designing your own themes. Start with basic restyling to get your feet wet, and then start exploring the things you can do with PHP in your functions.php file. Child themes, when built on a great parent theme, can be as powerful as any other theme available. For more information on child themes, check out the WordPress Codex.

Written exclusively for WDD by Cameron Chapman.

Have more tips for creating great child themes? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Accomplished designers understand that there is no greater and more perfect creation than what can be found in nature. Designers that adapt the behaviors, instincts or habits of animals into their approach will find that they will develop designs that are innovative and efficient.

This article will examine how animals can inspire designers of all types to greatness.

Each species is a masterpiece, a creation assembled with extreme care and genius. – Edward O. Wilson

1. Lion

Lions are considered the King of the Jungle because they prey on nearly every animal from leopards to cheetahs. They are brave animals that will challenge nearly every animal in the wild. Every day, they spend two to three hours walking and 50 minutes eating. The remaining 20 hours they are resting, socializing, or grooming. Most of a lion’s hunting is completed during the night hours until dawn.

Designers in the same way must be fearless. They must be brave enough to be innovative in their designs and land major contracts with companies. Designers must be highly adaptable to any environment, while maximizing their full potential. Great designs often come when we are alert and well rested. But often, designers must burn the midnight oil to present clients with their best options.

As lions and lionesses, designers must remain competitive and remain ahead of the competition to maintain their position as lead designers in their region or in the world. Lionesses are often more agile and do most of the hunting for their pride. Keep in mind that lioness designers may also dominate in some areas of design because of their natural instinct. Use this knowledge to your company’s advantage.

2. Tiger

Tigers have recently beaten out the dog for the world’s favorite animal. This animal is territorial and maintains a solitary lifestyle. They are camouflaged by their stripes and are simply unafraid to challenge any animal in the wild. Though the elephant is too large for the tiger to kill, the tiger will still try to intimidate the elephant nonetheless. Tigers have been known to successfully kill a rhinoceros, crocodile, moose, leopard, and numerous other large animals of the wild. They are faster than lions and can leap 10 meters or more, but they have very little stamina.

Tiger designers must not be afraid of the large projects that seem out of their scope. Just as the tiger challenges the elephant, designers must also meet challenges without fear. Designers must take their numerous solitary moments to create and develop a solid design. Though there are some moments of collaboration with the team and the client, designers must retreat to create their designs as quickly as possible to meet the client’s deadline. Like a tiger’s hunting style, designers must be strategic in accepting and planning projects to continually generate fresh new designs.

Shall we, because we walk on our hind feet, assume to ourselves only the privilege of imperishability? – George Eliot

3. Giraffe

Giraffes have several advantages over other animals in the wild kingdom. The most obvious is the giraffe’s height. They can reach and consume more nutrients than their competitors in the wild, such as the impala or kudu. The giraffe also has the shortest sleep requirements of any mammal in the wild. The average is approximately 4.5 to 4.6 hours per 24 hours.

Like giraffes, designers must be able to land more projects and reach higher peaks than our competitors. Designers must strive to view challenges from a different perspective and tackle the projects in a new light. Designers often have to adopt the behavior of giraffes and survive on 4.5 hours of sleep per night for short periods of time to complete major projects.

4. Camel

Camels are resilient creatures that can withstand incredible temperatures and water consumption levels that would kill other animals. They can retain a significant amount of water in their cells, kidneys, and intestines. They then can go long periods without water, because the fat tissue in the humps of the camel metabolizes and produces energy for the animal.

Designers need to be resilient and adapt to changes in the work environment that may seem unreasonable in other environments. The work hours are often long, but the end product of the designs are rewarding. Designers must be energetic and constantly evolving to provide a design that is better than the competition in the least amount of time possible.

Any glimpse into the life of an animal quickens our own and makes it so much the larger and better in every way. — John Muir

5. Cheetah

The cheetah, by far, has the fastest speed of any animal on land. The cheetah reaches speeds between 70 and 75 miles per hour. The cheetah can reach 62 mph in three seconds or less. After long sprints, they must rest for at least 30 minutes before achieving those speeds again. They may be the fastest in the wild kingdom, but their prey often escapes them because they will let them go, rather than risk an injury. Consequently, the cheetah’s success rate of landing their kill is only about 50%.

Designers must acquire some the cheetah’s instinct to survive. They must be agile and fast to land the project and complete it according to the deadline. Designers must not overwork themselves or they will “burn out” and produce lower quality work. Additionally, designers may run the risk of losing half of their clients. Speed, however, will delineate a designer from their competition.

6. Dolphin

Dolphins are highly intelligent animals. Their brains are highly complex, and they can hear frequencies ten times higher than the normal human being. Dolphins are social creatures and form strong bonds with people. They have been known to rescue injured humans or aid in human therapy. They also enjoy communication through a variety of clicks, whistles, and other sounds. Play time is an important part of their lifestyle and culture.

Design relies upon listening to the client and determining exactly what they need and desire. As designers, they must learn to listen better than their competitors. Designers must pick up on the nuances that their competitors will miss during the consultation. This will help your firm deliver a solution that meets the needs of the client.

Loyalty is a large part of building brand image. Designers must form relationships with customers and also fellow designers to build business. If a client is the victim of a bad design, designers must rescue them and offer a better solution. Designers, like dolphins, must engage their customers and peers in play to discover innovative ideas and solutions to problems.

7. Whale

Whales are one of the largest animals to have ever existed. They spend 90% of their lives under water and only surface to breathe through their blow holes. Whales cannot afford to consciously sleep or they will drown. Therefore, a portion of their brain is always functioning to keep them afloat.

Like whales, our creative juices are always flowing. At night, when we sleep, our subconscious may be thinking about the latest design. In the middle of the night, designers may wake up and sketch out an idea to avoid forgetting.

Some designers never achieve a deep sleep, because their most innovative ideas come when they lay down to rest. A designer’s job is often spent at the computer, drafting board, or with the client. When we come up for air, a designer truly needs to release just as the whale releases accumulated water through its blow hole.

Living with animals can be a wonderful experience, especially if we choose to learn the valuable lessons animals teach through their natural enthusiasm, grace, resourcefulness, affection and forgiveness. — Richard H. Pitcairn

8. Turtle

Turtles are excellent at hiding from their predators. They retreat into their shells and can hide completely submerged in water or on land. Some turtles are more agile than others depending upon their preference to water or land. Though turtles have incredible night vision, they move slowly because of their shells.

Often designers must hide or retreat to privacy to focus on a design for a client. Designers must learn to be methodical in their designs to ensure that they meet codes and also the client’s specifications. Being a visionary in design often allows you to see the entire picture when other designers fail to understand the client’s request. Turtles are protective of themselves and highly adaptable to different environments, as designers should be.

9. Owl

An owl’s hunting strategy is highly dependent upon the element of surprise. They blend in with their environment and are virtually invisible at times. Their feathers, also, allow them near silent flight. Their camouflage and silent flight comprise their competitive advantage in the wild.

Designers must know their competitive advantage in the world of design. Like the owl, designers must establish an edge that delineates them from the competition. Designers must be like chameleons and design for any type of environment. If you are an interior designer, you should be able to design modern contemporary, French country, or Renaissance spaces. Versatility and capturing your audience’s attention with the element of surprise is instrumental to success.

Conclusion

Whatever your style that you may have cultivated, you should demonstrate your ability and creativity by showing others your animal instincts through fearless and flawless design work.

Our task must be to free ourselves… by widening our circle of compassion to embrace all living creatures and the whole of nature and its beauty. – Albert Einstein

Written exclusively for Webdesigner Depot by Aidan Huang, a freelance developer, designer and ingenious blogger. He is one of the editors-in-chief at Onextrapixel. Follow him on Twitter @AidanOXP

What is your competitive advantage? Are you like the owl and can offer a unique design that will “wow” the customer, or are you more like the dolphin, skilled at listening and rescuing the client from impending danger?

Never Ending WordPress Business Bundle – only $14!