Design Focus

Friday Focus 02/24/12: Canine Design

This week’s Friday Focus has gone to the dogs! We’ve featured other animals before, but check out these designs that feature man’s best friend, sure to put a smile on everyone’s faces this weekend.

Designs of the Week

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

Dogstudio website


Great geometric treatment here, from the origami-style shapes of the dogs to slants, cuts, and patterns everywhere—lots of triangles!

Waggingtails website


I like the whimsical treatment to the illustrations, not just the doggies. The typesetting could be improved but what I wish most would be for the client login to look more similar to the look of the main site.

Atticus Pet Design Studio website

Atticus Pet Design Studio

The first thing that’ll probably catch your attention would be the spectacle-wearing dog on a twirling sunburst background. Except it doesn’t look ridiculous because it’s designed well. It’s on each page, like the contact form at the footer, but the inner ones scroll to the content area so you don’t have to.

Social Media Weekly

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

CSSThe many ways to work with CSS preprocessors
“There’s a fair amount of confusion surrounding css preprocessors like Sass and less, and I think some of it has to do with the fact that there are so many different ways you can use them. I thought I’d outline the different approaches, and some of the pros/cons to them.”

JavaScriptLearning JavaScript Design Patterns
“One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.”

CSSOptions for Styling Text Links and Hover States
“I’ve seen so many variations on the link style/color and hover style/color combination, that I thought it would be interesting to list as many of them here as possible. Some of these will be quite common and humdrum, while others may be ugly and impractical”

Front-End DevelopmentFront-end Job Interview Questions
“To note, I think that it’s only necessary to choose a handfull of questions from this list to get a good sense of a candidates capabilities and fit.”


Design Focus

Friday Focus 02/17/12: Page Flips

This week’s featured designs on Friday Focus are all about books of the online variety, complete with the animated page-turning effects.

Designs of the Week

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

Steve Heady's website

Steve Heady

I think the book pages need a sprinkle more of depth but the mix of textures both in it and in the background look great. Every spread is a section with a different look.

20 Things I Learned About Browsers and the Web website

20 Things I Learned About Browsers and the Web

If you’ll notice, this layout only uses the right side of the book once you open it. To the left is a red bookmark which lets you share the current page you’re on. What really drives the book interface home here, in my opinion, are the illustrations. Some of which happen to be animated. The table of contents (“things” actually) is not a list of chapter titles and numbers, but thumbnails containing such illustrations, which you can also find below the book. I think this site has the most natural and aesthetically pleasing page-turn effect of the bunch.

Bert Appward's Field Guide to Web Applications website

Bert Appward's Field Guide to Web Applications

More familiar techniques going on when imitating a real world look: the cloth cover of hardbacks, tabs that are almost always in red, off-white paper, all on a wooden surface with coffee stains to boot. It’s interesting to find the ability to skip to a chapter at the footer of a page, and something you don’t find in real-life books: search.

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

Social Media Weekly

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

CSS, Web StandardsThe Impending CSS Vendor Prefix Catastrophe
“At that point, webkit properties will become the de facto standard regardless of any W3C specification. Game over: the open web is closed.”

Design, Content StrategyStructure First. Content Always.
“Let’s be really clear about this. It is unrealistic to write your content – or ask your client to write the content – before you design it. Most of the time. Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.”

“Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.”



How to add Pinterest’s “Pin It” button on your WordPress and Genesis Framework site

Pinterest website

Pinterest is probably the hottest sharing and organizing social network today, and if your website’s community has jumped on the pinning bandwagon, make sure it’s easy for them to share and save your stuff with the “Pin It” button. Here’s how you can add it to your WordPress site (including Genesis Framework-powered sites).

Install a Pinterest Pin It WordPress Plugin

The most painless route would be installing a Pinterest WordPress Plugin. There are already a few competing ones available at the official plugin repository such as Pin It On Pinterest (by bahia0019) and Pinterest “Pin It” Button (by pderksen).

If you’re using an existing social button service like AddThis, Slick Social Share Buttons, or Social Linkz, you’ll be happy to know that these plugins support Pinterest already.

Add the Pinterest Pin It button to your WordPress Theme

The button code which you can get from the Goodies page requires an image URL in addition to the usual post URL, so in this case we’re using the built-in Post Thumbnails feature.

In single.php and places where you call The Loop, add this code:

<?php $pimage = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()));
if ( $pimage ) { ?>
<div class="pinterest"><a href="http://pinterest.com/pin/create/button/?
url=<?php echo urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode($pimage[0]); ?>
&amp;description=<?php urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a></div>
<?php } ?>

Depending on the type of button you want, you can change the value “horizontal” to “vertical” or “none”.

In footer.php, add this code to the bottom, right before </body>:

[code lang=”js”]<!– Include ONCE for ALL buttons in the page –>
<script type="text/javascript">// <![CDATA[
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
if (window.attachEvent)
window.attachEvent("onload", async_load);
window.addEventListener("load", async_load, false);
// ]]>

Insert the Pinterest Pin It button to your Genesis Framework WordPress site

If you use the Genesis Theme Framework, just add the above JavaScript to the footer script text box in the Genesis Options page, then add this to the functions.php file in your child theme:

add_action( ‘genesis_post_content’, ‘pinterest_pin_it_button’ );
function pinterest_pin_it_button() {
$pimage = genesis_get_image( array(‘format’ => ‘url’) );
if ( $pimage ) { ?>
<div class="pinterest">
<a href="http://pinterest.com/pin/create/button/?
url=<?php urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode( $pimage[0] ); ?>
&amp;description=<?php echo urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a>
<?php }

This adds the button after the entry text. You can also choose from other Genesis Hooks for a different location on your blog.


Design Focus

Friday Focus 02/10/12: Final Frontier

This week on Friday Focus, we’re exploring outer space. Get ready to blast off!

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Quazar website


Lots of animated objects on this page, from the space dust to the ribbons, icons, and buttons sliding back and forth on hover. I like the gleaming borders and the group photo on the “Design Troopers” page with the helmets to drive home that space motif.

Team Viget website

Team Viget

This one’s a horizontally scrolling site with a fun little animation that tilts back the objects on the page to their upright state as you page through each screenful. The use of an outer space view of the earth for a map is also a clever idea.

We Came From Mars website

We Came From Mars

Space designs are usually in cooler colors but it’s all hot hot hues here due to the Mars theme. I like how the two M’s in the logo look like a spaceship too. There’s also a nice “folded paper” background in the middle, and to drive the illusion of depth home, some parallax scrolling with objects floating in the foreground (not background). Also check out the astronaut heads in the second to the last section!

Create unique, extraordinary websites with Squarespace. No experience necessary!

Social Media Weekly

User Interface DesignPea.rs
“Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.”

“Without your help, without a strong reaction, this can lead to one thing only and we’re dangerously not far from there: other browsers will start supporting/implementing themselves the -webkit-* prefix, turning one single implementation into a new world-wide standard. It will turn a market share into a de facto standard, a single implementation into a world-wide monopoly. Again. It will kill our standardization process. That’s not a question of if, that’s a question of when.”



An Infographic on The “Horrible Web Design Client”

Web design may be seen by many people as a creative endeavor. And it is. Designing a web site entails a lot of creativity and not just in terms of aesthetic implementation. It also entails a keen sense of design because a web site should actually work and function effectively and not just be beautiful. Creating a great web site absolutely requires collaboration between the web designer and the client or customer. It is the web designer’s responsibility to realize the vision and goals of the client for the web site he has commissioned the designer to work on. But it is easier said than done. More →



Never Make These Mistakes in Corporate Website Design

All of us made mistakes. It is natural and inevitable. However, it would be best if we take note of our mistakes, learn from them and never do them again. On the other hand, we can minimize committing a mistake if we are just pro-active enough to know how we can avoid them.

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


Design Focus

Friday Focus 02/03/12: Scrolling & Sliding for Good

Happy February Friday Focus! Our featured websites of the week highlight informative, for-good topics in a vertical storytelling format.

Designs of the Week

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

Coca-Cola + McDonald's 2011 Stewardship Report website

Coca-Cola + McDonald's 2011 Stewardship Report

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

Dangers of Fracking website

Dangers of Fracking

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

6 Steps to Responsible Paper Purchasing website

6 Steps to Responsible Paper Purchasing

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

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

Social Media Weekly

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

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

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

Debugging, User ExperienceSupport Details
“Tech support management.”

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