gonzoblog.nl

15+ Free and Fresh High Quality Fonts (No.5 – May 2012)

Gonzo the Great — Wed, 16 May 2012 13:00:06 +0000

In the last 4-6 weeks there have been a lot of new free fonts published, the choice is enormous. I have tried to focus only on the high quality and readable fonts, well suited for web as well for print, in particular for the use in headlines, logo and flyer designs.

To choose the right font for the job, the designer must also consider the purpose of the work and the expectations of the audience when making readability choices. Readable text affects how users process the information in the content. Poor readability scares readers away from the content.

On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily. So, to communicate effectively, typography requires appropriate, readable and high-quality typefaces.

Some of these new fonts also come in more styles/weights, so you can easily embed these fonts in your web designs or use them as a corporate (print) typeface. So let’s cut the crap and get this party started .. yay!

NOTE: Tracking in all these fonts is set to 0, when OTF-fonts I also tried to add the faux italic and/or bold variants into the specimen.

Every month we try to publish new free fonts here on the gonzoblog.nl, in case you missed some beautiful fonts, make sure to check these too:

15+ Free and Oven Fresh High Quality Fonts (No.4 – 2012) → April 18, 2012
14 Free and Fresh High-Quality Fonts (No.3 – 2012) → March 28, 2012
15+ Free and Fresh High-Quality Fonts (No.2 – 2012) → February 29, 2012
13 Free, Fresh and High Quality Fonts (no.1 – 2012) → February 1, 2012

Znikomit [OTF]

Geometrical, thin, serif font Znikomit have OpenType features: Standard Ligatures, Contextual Alternates, Small Capitals, Discretionary Ligatures, Case Sensitive Forms, Fractions,etc.

Download

Sina Nova Regular [OTF]

Sina Nova has a slightly vertical tendency, a higher x-height which makes it more open in small text sizes. Its economical proportions allow an even more universal application. Sina comes in 12 styles and in OpenType format, alas only the regular weight of this typeface is for free.

Download

Mikodacs [OTF - 2 Styles]

Geometrical, decorative Display Typeface also available in Small-caps version.

Download

Narrator Free Font [OTF]

Narrator is a contemporary sans serif typeface that aims to achieve a neutral appearance while paired with a light and approachable personality.

Download

Insider Medium [OTF]

The Insider family is an OpenType Pro font, but only Insider Medium is completely free. It’s highly legible at small sizes because of the solid proportions and the well balanced inner forms. It’s optimized for text layout, but also works very well in headlines and leads.

Download

Roboto font (12 + 4 styles)

The Android design language relies on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. Successful deployment of these tools is essential to help users quickly understand a screen of information. To support such use of typography, Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI and high-resolution screens.

This font comes in 4 condensed styles and 12 (normal) styles including the weights: light, thin regular, medium, bold and black .. A lovely corporate (web)font if you ask me!

Download

Hype font

Hype is a lovely sans serif, semi-light and condensed typeface, but it’s a pity this typeface only includes 51 glyphs and is only available as uppercase. Due to the limitation in glyphs and styles, you still can use this typeface in poster design and/or flyers.

Download

Tellural (4+4 styles)

This font is free for personal use and can be used commercially with a donation. The font contains many additional characters including Greek and Cyrillic letters. Also comes in an “alternate” version with a different lowercase letter “a,” that may be more identifiable among other letters/ easier to differentiate from other letters.

Download

Deathe Maach [OTF & TTF]

While the freeware version of DEATHE MAACH arrives on your keyboard with Upper Case letters only, the commercial version of this font includes a complete range of lowercase characters. All versions of the DEATHE MAACH font include OT features and character replacement options.

Download

Stark

Based on the title logo of the Iron Man and Iron Man 2 movies. Includes ‘short caps’, accent characters, and Euro. Must admit tho, the kerning sucks with this type!

Desined by Neale Davidson

Download

Foro Slab Serif [OTF]

Foro was designed in 2012 to be a slab serif with an appealing flow, warm, and less harsh than many slab serifs. Foro comes in 16 styles and in OpenType format, but only the light variant is free to download.

Download

Tablet Gothic, SemiCond XB [OTF]

The new type family by Burian and Scaglione, Tablet Gothic is a grotesque sans serif that looks to the future of publishing with a clear understanding of its history. Tablet Gothic delivers the sturdy, straightforward and clean appearance expected from a grotesque, but it allows itself a good measure of personality to make it stand out on the page.

After selecting Tablet Gothic SemiCondensed Extrabold in the webshop, simply add the code in the checkout and download the font.

Download

Nougatine

Nougatine is a titling font inspired by the smell of freshly baked cookies. Delivered with 380 glyphs, many ligatures and a panel of alternative letters, it brings to you the power of making better combinations because it enables the power of versatility. Used for editorial and commercial purposes, Nougatine is a great all-rounder ..

Download

Flexo Contour™

Flexo Contour is a geometric display font, with humanistic warmth. It is a synthesis of the geometric and the humanistic. It has both mathematical straightforwardness, and humanistic refinement. Flexo Contour is part of the extended Flexo font family. Download Flexo Contour for free, by just paying with a tweet or a Facebook post.

Download

Frontage Typeface

Frontage is a charming layered type system with endless design possibilities using different combinations of fonts and colors. Achieve a realistic 3D effect by adding the shadow font or just use the capital letters of the regular and bold cut for stark artwork.

The typeface’s design is based on a simple grid which creates the friendly, handcrafted look of facade signs. It is generously spaced for maximum impact of your message.

Download

Patua One [OTF]

Patua One is a lovely slab serif text type designed for use in small sizes. It has low contrast and strong serifs and is intended to generate visual impact. Its thick serifs are curved to provide it with a touch of smoothness and gesture. Also available as Google Webfont!

Download

Trocchi [OTF - 2 styles]

‘Trocchi’ is a design derived from a number of old faces from the English typecutter Vincent Figgins (1766-1844) including Nebiolo’s ‘Egiziano’, and Caslon & Co’s ‘Antique No.4′ and ‘Ionic No.2′. Trocchi derivates from these earlier designs to produce a more casual slab serif. Trocchi is designed for use both as text and display type. The font is named after the Scottish novelist Alexander Trocchi.

Download

Tweet-Parade (no.19 May 2012)

Gonzo the Great — Sat, 12 May 2012 13:00:36 +0000

A tweet-Parade is a collection of the best articles and tutorials of last week’s blogosphere, a hand-picked weekly roundup. It’s all about webdesign, graphic design, SEO, tutorials, social media and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Also I see this as my personal bookmarks of great articles from the Community of the last period. The different articles and post are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

CSS layout gets smarter with calc() - The calc() property can be used anywhere there’s a CSS length or number in your stylesheet, so you can use it for positioning things, or in rgb() color values as well. The calc() property has lots of great uses in a style sheet.

JavaScript Style Guides And Beautifiers - Today we’re going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement.

Useful CSS3 Tutorials and Techniques - In this post we have compiled some useful CSS3 tutorials and techniques. Check out some of these fascinating skills and see if you can replicate the functionality in your own website.

How to Make Smooth Transitions with CSS3 - Once this specification is officially adopted, CSS3 Transitions will become a standard tool in web browsers. Until that time, we had to rely on vendor prefixes for this feature.

Mastering CSS Gradients in Under an Hour - Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?

HTML 5 – make pages more Semantic - As We know HTML5 is the major version of HTML. HTML5 have group of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screen readers to navigate our pages, and improve the web experience for everyone.

Explanation and behaviors of the CSS Box Model - Each HTML element is treated as a box in CSS and the CSS Box Model is the format or structure of that box. The CSS Box Model allows for a very dynamic and easy way to style your HTML Elements.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Agile UX vs Lean UX – How they’re different and why it matters for UX designers - I’ve seen a lot of discussion recently on what the difference is between Agile UX and Lean UX. Explaining the relationship and differences between Traditional, Agile, and Lean UX.

7 Basic Best Practices for Buttons - Nothing particularly revolutionary there, right? Ever since the

15+ Useful and Fresh WordPress Hacks / Snippets

Gonzo the Great — Wed, 09 May 2012 13:00:55 +0000

Lately building some big(ger) WordPress Blogging/Corporate sites so to increase functionality I always look if there’s a little hack or code snippet available that can be tweaked for the purpose in mind. And that’s exactly why WordPress is the no.1 open source CMS for me, there’s so much information on the interwebs!

All these code snippets should work in WordPress 3.0+ (most of these I even tested ‘live’), but some of these hacks are so fresh, .. so, as always a word of warning for you guys ..

Note: These hacks worked at the time they were published, but as new versions of WordPress are released, some may no longer work. Please backup your theme before attempting any hacks so you can restore things if something goes wrong.

In case you liked these wordpress hacks, make sure to check some more articles loaded with WordPress code snippets! Enough of the chitchat, let’s hit the road .. hope you’ll enjoy and use these!? Let me know in the Comment section, please?

Exclude a Category from Your WordPress Feed

If you’ve ever wanted to keep a certain category out of your RSS feed, there’s an easy way to do that. Just place the following code in your functions.php file. Simply insert the ID number from the category that you want to exclude in the spot where you see the “1″ in the example below. (Note: include the minus sign — e.g. -2, -5, etc.)

function excludecatfeed($query) {
               if(is_feed()) {
                              $query->set('cat','-1');
                              return $query;
               }
}
add_filter('pre_get_posts', 'excludecatfeed');

If you would like to exclude more than one category, then just include the other ID numbers beside the first like so:

$query->set('cat','-1, -5, -7');

Source

Redirect users to a random post

What about giving a new life to your old posts by creating a page template that will redirect readers to a random post? Today, I’m going to show you how to easily create this kind of page. Create a new file and name it page-random.php. Paste the code below in it:

// set arguments for get_posts()
$args = array(
    'numberposts' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = get_posts ( $args );

// process the database request through a foreach loop
foreach ( $my_random_post as $post ) {
  // redirect the user to the random post
  wp_redirect ( get_permalink ( $post->ID ) );
  exit;
}

After you published the random page, any user who’ll visit the http://www.yourwebsite.com/randompage will be automatically redirected to a random post.

Source

Remove the Width and Height Attributes From WP Image Uploader

When you upload images via WordPress image uploader and insert it into your posts, WordPress automatically include the image width and height attributes in the html tag. But when using a responsible theme, this can cause lots of trouble. Here’s a quick recipe to get rid of those attributes.

Simply paste the following code into your theme functions.php:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

Source

Display the Comment Stats in WordPress

This code will tell your advertisers or your audience, how many total comments your blog has, and an average number of comments on each post. Sometimes the per post number might be a decimal, but this code rounds it up to an integer value. You can also show this number in your sidebar as a statistic if you so desire.

All you have to do is paste the following code in a page where you want it displayed:

publish;

$count_comments = get_comment_count();
$comments = $count_comments['approved'];

echo "There's a total of ".$comments." comments on my blog, with an average ".round($comments/$posts)." comments per post.";
?>

Source

Create a Drop Down List for Posts on WordPress

Just insert the following code into your theme — for example, in your sidebar. You can control the number of posts it displays by changing the number in this line of the code:

$args = array( 'numberposts' => -1);

To show all your posts, leave the “-1” in place. To show ten posts, for example, replace the “-1” with the number “10.”

Source

How to disable plugin updates on your WordPress blog

By default, WordPress automatically checks if plugins updates are available, and if yes, ask you to install it. It is useful in most cases, but when building websites for clients you may not want them to updates plugins, for example if you modified a plugin especially for them. Here is an easy way to disable plugin updates on any WordPress blog.

remove_action( 'load-update-core.php', 'wp_update_plugins' );
add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

Source

Show Featured Images In Feed

To encourage subscribers to visit your website, rather than letting them just consume content through your RSS feed, you might want to display only the excerpt and featured image of posts. But WordPress doesn’t display the featured image in the RSS feed by default. Use the following code to do so. You can even add HTML to it.

add_filter('the_content_feed', 'rss_post_thumbnail');
function rss_post_thumbnail($content) {
	global $post;
	if( has_post_thumbnail($post->ID) )
		$content = '' . get_the_post_thumbnail($post->ID, 'thumbnail') . '' . $content;
	return $content;
}

Source

Grab tweets from twitter feed

Use this to quickly grab your tweets and display them anywhere on your site.

text;
                //Find location of @ in feed
                $feed = str_pad($feed, 3, ' ', STR_PAD_LEFT);   //pad feed
                $startat = stripos($feed, '@');
                $numat = substr_count($feed, '@');
                $numhash = substr_count($feed, '#');
                $numhttp = substr_count($feed, 'http');
                $feed = preg_replace("/(http://)(.*?)/([w./&=?-,:;#_~%+]*)/", "", $feed);
                $feed = preg_replace("(@([a-zA-Z0-9_]+))", "", $feed);
                $feed = preg_replace('/(^|s)#(w+)/', '1#2', $feed);
                echo "".$feed.  "". date("M - j",strtotime($tweet[($i-1)]->created_at))."
                        ";
                }
      } catch (Exception $e) {
          echo "Twitter feed is currently down, check back later.";
      }

?>

Source

Add a WordPress Menu To Your WordPress Toolbar

This WordPress snippet will add a WordPress Menu on the WordPress Toolbar.

add_action( 'admin_bar_menu', 'Add_Menu_To_Toolbar', 500 );
function Add_Menu_To_Toolbar(){
$menu< = wp_get_nav_menu_object( "Toolbar Menu" );
$menu_items = wp_get_nav_menu_items( $menu->term_id );

  foreach ($menu_items as $items) {
$args = array( 'id' =>  
$items->ID,
'title' =>      $items->title,
'parent' =>     $items->menu_item_parent,
'href' =>       $items->url,
'meta' =>       FALSE
;
$wp_admin_bar->add_node( $args );
}
}

Source

Display a Visitor’s Google Search Terms

If the visitor to the post or page has arrived via a Google search then display the terms that they searched for.

Source

Display your latest Google +1 update

This function can be used to display your latest Google +1 update anywhere in your WordPress website. Just insert the code below into your template files wherever you want it. Remember yo change the ID with your own.

items[0]['link']; echo '">';
	echo $googleplus->items[0]['summary'];
	echo '';
?>

Source

Keep WordPress from Compressing JPGs

Add the following code into your theme’s function.php file

add_filter('jpeg_quality', function($arg){return 100;});

Source

Increase the Excerpt Field Height

Simply paste the following code into your functions.php file. Height can be adjusted on line 5.

add_action('admin_head', 'excerpt_textarea_height');
function excerpt_textarea_height() {
    echo'
    
    ';
}

Source

Embed PDF in iframe

By adding the below code in your functions.php file and using the shortcode in the editor, the content of a PDF file can easily be embeded into the posts and pages of a WordPress website.

 function viewpdf($attr, $url) {
    return 'Your browser should support iFrame to view this PDF document';
}
add_shortcode('embedpdf', 'viewpdf');

Then in the post or page, use the shortcode to display the PDF.

[embedpdf width="600px" height="500px"]http://infolab.stanford.edu/pub/papers/google.pdf[/embedpdf]

Source

Add Custom Fields To RSS Feed

WordPress has the ability to add custom fields to any post, these fields allow you to store extra data about the post without it having to go into the content. You can use this data to add an extra piece of information to expand on your post. Here is a WordPress snippet to add to your functions.php file to display custom fields in your RSS feed:

function fields_in_feed($content) {
    if(is_feed()) {
        $post_id = get_the_ID();
        $output = 'Find me on';
        $output .= 'Facebook: ' . get_post_meta($post_id, 'facebook_url', true) . '';
        $output .= 'Google: ' . get_post_meta($post_id, 'google_url', true) . '';
        $output .= 'Twitter: ' . get_post_meta($post_id, 'twitter_url', true) . '';
        $output .= '';
        $content = $content.$output;
    }
    return $content;
}

add_filter('the_content','fields_in_feed');

Source

Automatically Set the Featured Image in WordPress

Add the following code into your functions.php file.The function will set the first image as featured image.

function autoset_featured() {
          global $post;
          $already_has_thumb = has_post_thumbnail($post->ID);
              if (!$already_has_thumb)  {
              $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
                          if ($attached_image) {
                                foreach ($attached_image as $attachment_id => $attachment) {
                                set_post_thumbnail($post->ID, $attachment_id);
                                }
                           }
                        }
      }  //end function
add_action('the_post', 'autoset_featured');
add_action('save_post', 'autoset_featured');
add_action('draft_to_publish', 'autoset_featured');
add_action('new_to_publish', 'autoset_featured');
add_action('pending_to_publish', 'autoset_featured');
add_action('future_to_publish', 'autoset_featured');

Source

Import Content from an external file

If you want to import and display the content from an external file in your posts and pages you can do so by inserting the code below into your functions.php file:

function show_file_func( $atts ) {
extract( shortcode_atts( array(
'file' => ''
), $atts ) );

if ($file!='')
return @file_get_contents($file);
}

add_shortcode( 'show_file', 'show_file_func' );

Then in the editor use the shortcode like so:

[show_file file="http://www.yoursite.com/file345.html"]

Source

How to change the “posts” label to “articles”

Are you working for clients which aren’t very good with technology? If yes, most of them might find the term “post” a bit confusing, while “article” can be seen as much self-explanatory. Today, I’m going to show you how you can easily change the “post” label to “articles”. Nothing complicated: Open your functions.php file, paste the code below in it. Save the file, and you’re done!

add_filter('gettext',  'change_post_to_article');
add_filter('ngettext',  'change_post_to_article');

function change_post_to_article($translated) {
     $translated = str_ireplace('Post',  'Article',  $translated);
     return $translated;

Source

To stay up-to-date with the latest WordPress hacks or code snippets, follow me on Twitter, .. just saying ;-P

Tweet-Parade (no.18 Apr-May 2012)

Gonzo the Great — Sat, 05 May 2012 13:00:31 +0000

Yay, it’s Saturday .. Time for your weekly roundup filled with the best articles and tutorials of last week’s blogosphere. It’s all about webdesign, graphic design, SEO, tutorials, social media and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

The single responsibility principle applied to CSS - Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.

CSS Overflow Property - Elements on pages are arranged in form of boxes, and we can control the sizing, positioning and behavior of these boxes with CSS. Suppose a container box has fixed width and the content box doesn’t fit in, here we can use overflow declaration to control ..

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS - It’s the underlying principles like decoupling html and css that are more important. It’s the idea of reducing location based selectors, mostly likely through a greater use of classes that you should be thinking about.

Why you should care about CSS page performance - If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters. Whether it is how fast the page loads or how it behaves once it’s in place, how well that page works has ..

Transforming Elements in 3D Using CSS3 - we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.

Learning LESS: Variables - Variables in LESS begin with the @ sign. What follows that can be any combination of letters and numbers, dashes and underscores. Once you’ve named your variable, follow with a colon (similar to CSS) and define the variable.

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap - A problem that has always existed but has become more common lately as more people make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

Ways to Speed Up CSS Rendering - When coding CSS, one of the best ways to ensure your code runs smoothly on older browsers and slow computers is to write your CSS efficiently for browser rendering, this way your site takes less resource and memory from the user’s computer and therefore runs smoother.

Cross-Browser Debugging CSS - CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs. I learned CSS by reading the W3C specifications, which is why I began coding according to the ..

20 Excellent Pressable 3D Buttons With Pure CSS3 - In today’s post we’ve collected 3D animated ”press-able” buttons created with pure CSS3.You can easily integrate them in your websites or blogs.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Breaking Out of the UX Status Quo - Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward.

35 Useful Responsive Web Design Tools - You can find valuable layout aid tools, prototyping tools, code generators, and even a collection of inspirational responsive website designs in this article. We hope that this collection can help you enter the responsive design scene and make a difference.

How to Turn Any Site Into a Responsive Site - We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now.

Responsive design – harnessing the power of media queries - It’s worth bearing in mind that there’s no simple solution to making sites accessible on mobile devices and narrow viewports. Liquid layouts are a great starting point, but some design compromises may need to be made

Removing Stumbling Blocks In Mobile Forms - Many elements within a mobile form affect how smoothly users will get to a service or product hiding behind a form of any kind. In this post we will look at the most common stumbling blocks for mobile devices.

Using Web Standards to Create a Great Mobile Experience - Mobile is a rapidly evolving medium, with a constantly expanding range of devices. As a result, designing for mobile sites can be particularly challenging — even more so given the need to keep your brand strong by maintaining cross-channel consistency.

Webdesign in Common, Web Typography, jQuery, Tools, etc.

Beginner’s Guide to Wireframes and Tools to Create Them - Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it on paper or even code it right away ..

Parallax Scrolling and Its Usage in Web Design - the parallax scrolling effect is not widely used on the web, probably because of two different reasons: it is difficult to develop from scratch and heavy to load by browsers. And if you go for a more simplified CSS3 version, ..

Recently in Web Development (April ’12 Edition) - In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package.

15 great HTML5 and CSS3 generators - I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. Note: click on the images to open the websites.

Effective Typography-Driven Web Design - The best text-driven design uses a minimal set of effects to create a word image with impact. Take a look at novelty typefaces, set a clean and limited font palette, play with bold or sharp color choices, make the letters big (or small), make type art and use strong words or catch phrases.

Texturise web type with CSS - Mask-image can be used to knock out small textural pieces of headline text. Using this technique with paragraph text would hurt readability, but when applied to a large-format display font, it can create a subtle point of interest.

Tools and Resources for Understanding and Creating Stunning User Experience Designs - UX design increasingly popular nowadays and that’s a great thing because it means that companies or developers want to deliver applications which not only work well but also look and feel great.

Mistakes to Take Note of in Designing for a Website’s Call to Action - Designing an effective call to action means that you have considered well everything pertaining to its usage. You have to take note of some mistakes that are commonly committed by some designers.

Applying Macrotypography For A More Readable Web Page - This article focuses mostly on a few simple macrotypographic techniques—with a dash of micro—and on how to combine them all to build a more harmonious, adaptable and, most importantly, readable Web page.

37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning - Here’s a roundup of 37 useful wireframing, prototyping and mockup tools for all areas of design including web pages, software programs and mobile apps. These tools can definitely be ..

Creating Bulletproof Email Buttons - So if a large majority of your customers or clients are using email clients other than iOS, you’ll need to make sure that you can provide a clear cut call to action regardless of whether or not the user chooses to download images.

12 Most Popular jQuery Plugins of April 2012 - Here we are again for another monthly round-up of the most popular jQuery plugins of April 2012, these 12 plugins will make you WOW!

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

Design with Depth: Adobe Illustrator “Map Art” Tutorial - One of the many under-utilized tools in Adobe Illustrator is the “Map Art” command. Here we’re going to show you how to use this tool to map a flat object onto a 3D sphere.

Common Typography Mistakes - I’ve seen and made so many mistakes in design that would probably surprise you. But the ones which draw my attention most often are the typography mistakes. These can have a large impact in the effectiveness and appearance of your designs

Helping Differentiate 11 Typography Types with Examples - Having the amazing knowledge of something like typography is priceless if you’re on your path to become a designer. I’ll be Helping You Differentiate the 11 Typography Types and with examples.

5 Cool & Quick Photoshop Shadow Tricks - Today we’re going to pay tribute to the shadow layer effects that come built into Photoshop. We’ll go over five super quick and easy tricks that you can pull off using simple shadow techniques.

Brand management and consistency: is everyone singing the same song? - Controlling brand consistency is a struggle that many brand and marketing managers face over the course of their working lives. Keeping track of a global brand across a myriad of communication ..

How to Create Masks of Transparent Elements in Photoshop - Selections are an essential part of any photo editing workflow, but often, selections aren’t as straight-forward as they might seem. In this tutorial we will explain how to make a selection of a glass that includes transparent elements.

Blogging, Social Media, Writing, Content Strategy, etc.

The Neil Patel Method To Getting Great Blog Content - When it comes to blogging, one of the key pain points is getting content. In today’s post, we’re going to look at the different ways you can attract quality writers for your blog.

How to Write a Great Paragraph - It’s not enough to create killer headlines or spectacular introductions. It’s not enough to write compelling content. It’s not enough to use storytelling. The only way to get your blog posts read, shared and revisited means writing great content.

Tips and Tools for Blogging? I’ll Take a Baker’s Dozen - Here are a 13 tips and tools you need to follow in order to have a successful, shareable and searchable blog in today’s competitive content world.

The Key to Writing Blog Posts That Get Noticed - It’s easy to use the standard blog post writing tool box and prescribe better headlines, different post types, and fancy diagrams depicting the perfect post. The problem is that these solutions focus on “manipulating” the reader rather than giving them what they want.

Pros and Cons of Social Networking for Designers - Similarly, the revolutionary world of social networking also gives more benefits than harms. The aim of this article is to provide designers with an impartial and unbiased outlook on the pros and cons of social networking.

WordPress

Using WordPress as an Intranet – We usually WordPress associate with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.

Optimizing WordPress Loading Speed With header.php & .htaccess - Website loading speed matters a lot for every blog/website, especially for people with shared hosting – which is the cheapest available hosting service. Here are a few .htaccess and header.php tricks to increase your website loading speed by 50-70%.

Controlling The WordPress Toolbar - Many people don’t like having the WordPress toolbar here so they will need an easy way of removing the admin bar. Other people (like me) really like having the toolbar and I like having the additional quick links on the bar.

Search Engine Optimalization, Conversions, Analytics, etc.

Google Goes After Links In WordPress Themes - A WebmasterWorld thread has an SEO claiming he received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.

6 Ways to Generate More Traffic Out of Your Images - The question is…are your images optimized for search, speed and social media? In other words, are they helping your site or hurting it? The following 6 tactics will help you to optimize your images so they can bring you more traffic to your site

Penguin: The new algorithm from Google – Penguin wants to tell us that Panda is dead and the new algorithm came to life. Yes, but how and why. There are tons of information about how Penguin affected SEOs, and most of them are coincident: Do you remember anything about content?

Update on Penguin Update - The Penguin update is supposed to improve search engine results by removing sites that have spammed Google with poor quality links, and repetitive anchor links.

Google Over-Optimization Penalty: Tips to Avoid it - In this post I have outlined the key factors that Google are likely to analyse when assessing website over optimisation.

Tutorials

Fluid CSS3 Slideshow with Parallax Effect - In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Typography tutorials: 50 clever ways of working with type - This round-up of typography tutorials has a central theme of experimentation. Learn how to design a headline typeface, create isometric 3D lettering and to smelt your favourite font.

Enhance Required Form Fields with CSS3 - Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.

CSS filter effects in action - With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :notselector.

Zoom In CSS3 Dialogue Pop Up Boxes - To accomplish this task, we’re going to be using 3D Transforms. In general I wouldn’t suggest using these, but they worked quite nicely for this demo. To create the ‘clickable’ effect, we will be utilising form method and the pseudo class :checked.

Code a Set of Animated App Store Buttons With CSS - We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

How To Create Animated List View Using CSS3 Only - Listing items with some optional list view is a good practice to make user more comfortable on viewing our item list and it will be more nice to add some animation when they change the list view. In this post we are going to create an animated list view using pure CSS3 only.

22 HTML5/CSS3/jQuery Tutorials for Frontend Web Developers - The tutorials I have added below are geared towards designers interested in bulking up their knowledge on coding frontend web layouts.

Freelance, Business and Workflow Related Stuff

How to Create Your First Product Online - Creating products is one of the best revenue sources that you could do online today. Instead of wasting time with Google Adsense, sponsored reviews, and other useless monetization methods to make money online; with me completing ..

The Problem with To-Do Lists - There is no shortage of blogs and resources on how to effectively manage our time, however there is a problem with the tools that are available to us. To-do lists and calendars are both restrictive, each in their own way.

A Comprehensive Guide to Starting Your Freelance Career - Working as a contractor–or freelancing as it is often termed–is both a great stepping stone to running your own business and a viable career in itself. This article discusses some of the ins and outs of both freelancing and running a small business.

9 Website Strategies (Besides Testimonials) for Proving Your Way to More Sales - Featuring elements of credibility and proof on your website is critical to conversions.…especially in this day and age where skepticism of advertising claims is sky high.

Why transparency matters—building equity in your personal brand - Relationships matter in personal life and in business. People DO want to know who they are dealing with. By being transparent, the potential gain is greater than the risk.

How to be a better designer - Dear designer: just like you, I’m flooded on a daily basis with super inspiring, life-affirming, pocket philosophical and wise impressions from the design world. Everything has gone global and it doesn’t require much more than adding ‘designer’ to your email signature for you to become one (I’ve been there).

How to Track Your Time and Increase Your Web Design Income – Once you have completed a time log for your web design project, you’ll be able to see how much time it really took you to complete the project and how much you’re making per hour.

Big question: how important is itto you to keep your clients happy? - Keeping clients happy is often tied to communication. Yes: talk to your clients regularly. When things go wrong, don’t hide, but come clean and talk about it. Good client relationships are like other relationships

How To Get Your Full-Time Freelance Business Started - I’ve been asked for suggestions on this topic a number of times, so I decided to share my thoughts for those who find themselves standing on the proverbial precipice, contemplating taking the leap into full-time freelancing.

7 Critical Documents for Freelance Designers - Most designers go into freelancing because of their love for creative work and the opportunities that are available to help clients. The business-related details almost always take a back seat to the creative work, and many ..

How Freelancers Can Maintain and Grow their Client Relationships - The mistake a lot of freelancers make when trying to expand their business is to focus on the acquisition of new clients, but you can’t do it at the expense of your current clients. Did you know that it can cost 5 to 10 times as much to find a new client as it does to keep an existing one?

F*cking Brilliant, a great Read or just magnificent Tips!

Cheap Architecture - We build ugly storefronts to save money, drown their facades with ads to make money, and once we have collected enough money we spend it on overseas holidays to go to places where we can marvel at all the beautiful architecture we find there.

Ignore the design, please - People can feel appreciated in a number of ways, from a simple pat on the back to a big fat paycheck. Designers are often grouped at the lower end of this spectrum, mostly by choice.

9 Tricks To Design The Perfect HTML Newsletter - An e-mail newsletter is the perfect way to stay in touch with your clients or followers. Often your company or website will have numerous product updates, or possibly upcoming events you’d like to share.

Design is How It… - There is so much to design that we leave to our instincts or chance. As creatives we probably don’t like to leave design to science, but we understand how people work and therefore we should have a better understanding of how design works for us.

You Design It, They Do It - People like to test a number of metrics to see why people are not staying on a website. I think sometimes we spend so much time focusing on analytics that we throw common sense out the window. Don’t get me wrong—analytics are a powerful tool for improving a website. But often the problem is right in front of your face.

Above the Scroll: Does It Matter Anymore? - Where the scroll lands on the screen is even changing with wider monitors and great variances in the size viewers open their web browsers. How can a designer account for all of it?

Make It Obvious - It is sad that pageviews are used as a measuring stick for how well a site is doing on the web because most of the time it is pretty inaccurate. While we think that people go through a lot of pages on site because they are loving the content and want to see it all, ..

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign

10+ Fresh and Useful Pure CSS3 Tutorials [No Javascript]

Gonzo the Great — Wed, 02 May 2012 13:00:25 +0000

As designers and developers we are constantly looking for the best way to get as much content to our users as possible, but we have to make it look nice, to let it flow beautifully, and of course without any text overload. We all know that JavaScript allows us to do great things when it comes to user interfaces, but a lot of the same types of effects can be created with pure CSS3.

Although Javascript/jQuery is amazing and can bring websites to a whole new level, it has a few flaws that we can’t account for:

Users can disable Javascript in their browser, by now, most of us account for this, and provide fallbacks.
Your site will take more time to load all of your wonderful javascript.

This is where CSS3 comes in, we now can create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised. But we already see that there are loads of tutorial made to teach designers how to use it.

These tutorials mentioned below are focusing mainly upon the various properties of the CSS3. All of these CSS3 tutorials aren’t using any Javascript (or jQuery) whatsoever.

Note: the result of this tutorial will only work as intended in browsers that support CSS animations.

A Pure CSS3 Cycling Slideshow

in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. To get a solid sense of the process from beginning to end, below is an outline of the article.

Source

Just some other awesome CSS3 buttons

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons. In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

Source

Pure CSS Blockquote Styling

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

Source

Animated Content Tabs with CSS3

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Source

How to Create Accordion Menu in Pure CSS3

In this tutorial we will learn how to create an accordion menu in pure CSS3. This menu was inspired in Futurico UI Pro by Vladimir Kudinov. As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector.

Source

Showing Product Information With CSS3 3D Transform

There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. In this tutorial I’m going to share how to show our product information with cube style using CSS3 3D Transform.

Source

How to Build an Accordion Image Gallery with only CSS

Fluent animated transitions for sliding web page elements such as a menu or an image gallery, have always traditionally been implemented with JavaScript. But using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript! This means that the very popular “accordion or toggle” effects can be easily implemented using only CSS!

Source

Content Slider Using Pure CSS

My mission was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

Source

CSS3 Breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

Source

CSS pointer-events and a pure CSS3 animating tooltip

I was creating a CSS-only tooltip and I wanted to fade it in and out using the CSS3transition property. Fading the opacity to 0 works great, except that the tooltip is technically still there (just invisible), blocking mouse interaction with content below it and growing the :hover area of its parent to include itself. Boo. I couldn’t just toggle display:block and display:none on:hover because that would hide the element before it had a chance to smoothly transition out.

Source

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Source

CSS3 Animated Progress Bars

Animated CSS3 progress bars created using animation and keyframes properties. It’s created by Lee Munroe originally but I implemented the reverse direction on the progress bar. It uses many CSS3 properties, like border-radius, animation, text-shadow, box-shadow, rgba, linear-gradient and keyframes to make the progress bar and it’s animation.

Source

Rotating Words with CSS Animations

In this tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

Source

Tweet-Parade (no.17 Apr 2012)

Gonzo the Great — Sat, 28 Apr 2012 13:00:25 +0000

Survived another working week? .. Time for your weekly roundup filled with the best articles and tutorials of last week’s blogosphere. It’s all about webdesign, graphic design, SEO, tutorials, social media and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Fighting the Space Between Inline Block Elements - Here’s the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. Here’s some ways to fight the gap and get inline-block elements sitting directly next to each other.

Some Practical Guidelines For Writing CSS - Do you follow a consistent set of practices when writing your css or do you write a few lines of css that work before move on to the next line? Did your best practices grow organically or did you follow a set of guidelines for writing your code?

Creating First Animations With CSS3 Using Keyframes - With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment.

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap - A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

Learning LESS: An Introduction - Today, I’m proud to start a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS.

Object-orientation and inheritance in JavaScript - The good news is that it’s actually quite simple, but the bad news is that it works completely different than object-orientation in languages like C++, Java, Ruby, Python or PHP, making it not-quite-so simple to understand.

Mimic ‘onmouseout’ with CSS3 Transitions - Firstly, we take advantage of the fact that you can have different transitions for hovering on, and hovering off. Second, we use a timing of 0s to disguise the hover on.Why I Fell in Love with the Sass CSS3 Extension, And You Will Too! - In some ways I’ve always been a traditionalist. I like writing my code from scratch, without preprocessors and frameworks. I feel like I have more control over what I’m doing. Recently, however, I finally ..

Pure CSS scrolling shadows with background-attachment: local - In Backgrounds & Borders Level 3, a new value was added to lift this restriction: local. When background-attachment: local is applied, the background is positioned relative to the element’s contents.

The Form Method: CSS Click States without Javascript - There are countless moments in CSS development when you wish there was a :click psuedo class, similar to :hover. For now, that doesn’t exist, but this little hack will let you get around that.

Transitions Only After Page Load - I’ve you’ve ever used CSS transitions on structural elements on your page, you may have noticed a case where you see that transition happen when the page loads and is laying itself out.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

320 and Up – The ‘tiny screen first’ responsive boilerplate. ‘320 and Up’ has grown to include selected files and styles from Twitter’s Bootstrap as well as responsive design libraries and polyfills. It’s become my personal toolkit, somewhere I keep the files and styles that I use ..

Creating a Mobile-First Responsive Web Design - We’re going to walk through how to create an adaptive web experience that’s designed mobile-first. As the web landscape becomes increasingly complex, it’s becoming extremely important to deliver solid web experiences to a growing number of contexts.

Build a responsive site in a week: designing responsively (part 1) - Everyone is talking about responsive web design these days, and with good reason; as the number of web-enabled devices continues to grow it’s no longer sensible to build fixed-width websites.

Responsive Web Design: Layouts and Media Queries - But I wanted as a conclusion, to emphasize the fact that media queries are not only about mobile optimization. We tend to see more and more mobile device, but also more and bigger screens.

CSS Animations Between Media Queries - Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger?

50 fantastic tools for responsive web design - There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we’ll keep the focus of this article on some top tools that will help you become responsibly responsive.

Handling typography for responsive design - Even from this simple example you’re probably starting to see that you could be a whole lot more detailed about where you add breakpoints for your type to control line length. Then what about leading and hierarchy?

UX Success Starts With a Good Strategy – It’s no secret that working in teams and having an outlook for success are attributes of a successful athlete. Today I want to talk about our first lesson from the field: success is all about strategy.

Build a responsive site in a week: images and video (part 3) – Media assets like images and video have prescribed dimensions set in pixels. We can scale these down of course, but that means downloading larger files than necessary, and bandwidth can be expensive.

Build a responsive site in a week: media queries (part 4) - Today, we will move beyond our pattern portfolio and build the individual pages required for our website. In doing so, we will see how media queries are constructed, and implement them in a truly responsive way.

Build a responsive site in a week: going further (part 5) - I’ll conclude this series by looking at how we can improve the responsiveness of our sites by testing across a wide range of devices and through continuous design iteration based on usage

Five responsive web design pitfalls to avoid - Creating great responsive experiences requires a hell of a lot more than media queries. If you think creating squishy layouts is all this responsive thing is about, you’re missing the point. Creating adaptive experiences is a smarter way forward, but that doesn’t mean this approach isn’t without its challenges.

Webdesign in Common, Web Typography, jQuery, Tools, etc.

Fake Bolding of Web Fonts - If you’ve been (ab)using Google Web Fonts for your custom font needs, you most certainly would have tripped on this problem: Faux Font bolding. Most browsers synthesize the bold weights of fonts that do not posses a bold weight.

Helpful Code Paradigms for Frontend Web Developers - There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend. There are many ways you can save ..

How to optimise a JPEG image for the web - Nowadays, having a slow website is simply not an option. In most cases, you can point the finger of blame at your images. Your images can be held responsible for sluggish loading times and will therefore affect your website’s overall performance.

A Closer Look At Font Rendering - The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges.

8 Do’s and Don’ts of Effective Web Design - Here are some fundamental do’s and don’ts of effective web design that can take you a long way in designing pages that are optimized, convertible and actionable.

Create a Website Planning Spec Before You Build - Website Planning is one of the most critical pieces of website development, yet it’s the piece that I see Website Developers skipping over most often.

Type Effects in Web Design: It’s All About Moderation - Type effects – from bolding, italics, tilting, strokes and underlines – can make or break the typography on your site. Using type effects in moderation is the key.

Type study: Techniques for using novelty fonts - When used well, decorative, display, or handwritten fonts can make the difference in a design. We’ll take a look at a blog design, and examine techniques for swapping standard fonts and novelty fonts to make the design more…well, novel.

Tools and methodologies for better coding - But do keep in mind that however many tips and techniques you embrace, it actually means very little unless you actually do your work. So, with that in mind, I would like to offer some of my favorite workflows and methods for organization and optimization.

The Future of Web Typography - So what can a designer do to ensure all users see the site in the way they intended? Where there was once limited flexibility, there are now many options to implementing these non-standard fonts.

Are Hover Events Extinct? - Put another way, did the iPhone kill :hover? Read on to see how iOS handles a CSS hover event, what that means for you as a developer, and how you should or shouldn’t be using hover events in your designs.

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

25 Photoshop 3D Effects Tutorials - Many of the tutorials focus on 3D text effects, and others show various objects designed in 3D. Whatever you are looking to design, you should be able to find a tutorial here that will show the steps needed.

Absolutely Fresh And Useful Adobe Illustrator Tutorials – Here we have put together a collection of step by step Adobe Illustrator tutorials to help you learn loads of useful techniques. We hope that you will find this collection of tutorials helpful for you.

Apply Graphics to Textured Surfaces With Displacement Maps - Do you ever wonder how Photoshop masters create such realistic compositions? Seemingly simple tasks such as throwing some text onto a brick wall can easily lead to lackluster results if you don’t know what you’re doing.

25 Nice InDesign Tutorials for Inspiration - Adobe InDesign is one of the leading solutions for creating professional layouts for print and digital publishing. InDesign is the perfect choice for a document that needs some creativity and used to create works such as posters, leaflets, brochures, magazines, newspapers and books.

Warping Text to Fit into Shapes with Illustrator - We will teach you how you can do this kind of text warping into shapes in Illustrator. You can use this to create a more impressive graphic or title effect on your print booklet designs or brochure printing template, or in various printed materials.

What is Typography? A glossary for designers - In this article we’re going to help you answer the question: What is typography? This glossary of type terms will help you understand the terminology of type. Do you know your aperture from your ascender?

50 Photoshop Tricks for a Fast-Paced Work Environment - Of course, since our go-to design tool in the office is Photoshop, we thought we’d share with you 50 simple Photoshop tricks and shortcuts we love using that can help trim excess spent time in your workflows.

Blogging, Social Media, Writing, Content Strategy, etc.

Does blogging get you anywhere? - So, what do clients want to see from designers that will make them consider using you as a vendor? What will keep readers–the RIGHT readers–coming back to your blog so you will be under constant consideration for future projects?

Blogging Mistakes that Hurt Your Brand Image and Hinder Marketing Efforts - A blog on a business website also helps to improve SEO efforts because the search engines reward sites with fresh content and each blog post can rank in the search engines over timebeing done correctly.

WordPress

Super useful WordPress action hooks and filters - Action hooks and filters are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress functionality without editing core files.

Embracing Drag-and-Drop Sidebars by Creating Your First WordPress Widget - WordPress widgets are nothing new, having been introduced to the software with much fanfare several years ago. However, in the time that has elapsed since their initial release, relatively few ..

Creating a Simple Twitter Plugin for WordPress - Let’s see how can we make a very simple plugin showing some latest posts from a Twitter account.

WordPress Development: Bypassing the Settings API - The Settings API was introduced in version 2.7 to allow the semi-automation of form creation. All credible Content Management Systems and frameworks have their own set of functions or classes for the same purpose.

How to Remove Default WordPress Widgets and Clean Up Your Widgets Page - Let’s be honest – nobody uses all the default widgets that come with WordPress out of the box. In fact, there are probably a few default widgets that you would never use. Ever.

How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin - I’ll show you a great way to promote your blog post to Pinterest by a useful tutorial How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin.

13 Tips to Speed Up and Optimize Your WordPress Plugins - A common query among the internet users is that they need to know how can they enhance the speed of WordPress apps and optimize the plugins. Frankly speaking, this is never a cumbersome process as there are ..

Taking WordPress Custom Taxonomies to the Next Level - WordPress custom taxonomies are a great way to organise your website’s content, but what are they exactly? How can they be implemented effectively? More importantly though, how can they benefit your website?

10 Basics Steps To WordPress Security - While some WordPress designers don’t give a second thought to the security of sites they design, others turn to a variety of plugins they hope will keep hackers at bay. Others, as you’ll see, have taken a more fundamental approach to security concerns.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO Best Practices: Google’s New Traffic Paradigm - In this article you will learn everything you need to know about increasing your web traffic to your sites through Google’s huge free search results.

How To Be Number One On Google - In this posts I want to take it to the next level for Google Authority in Ranking. Google is getting tough on SEOs who produce web content simply to spam the search engines with backlinks.

How to Create a Great Content Strategy for an Established Website- Establishing a comprehensive content strategy for existing pages on your website is a key piece of the search engine optimization (SEO) puzzle, especially considering Google’s ongoing Panda quality updates.

Google Algorithm Change History - Each year, Google changes its search algorithm up to 500-600 times. While most of these changes are minor, every few months Google rolls out a “major” algorithmic update that affect search results in significant ways.

Why forward thinking is the best way to plan your SEO - The basic thread is that SEO should be built on foundations of quality and integrity, not just an obsessive drive for short-term results. It’s clear that the SEO industry is still drawn on the whole black hat vs. white hat issue.

How to Fix Over Optimization Penalty in Order to Please Google - Let me start with a quick introduction to the recent debate on Over Optimization Penalty for those who live under some sort of information proof bunker and haven’t heard a bit about it.

One of My Sites Got the Google Slap - Well I suppose if you play around with grey-hat techniques you end up getting burnt eventually. But even white hat techniques can get you in trouble these days. One of my better niche sites got the Google slap last week ..

The Rise of Negative SEO - As long as Google was doling out penalties, anyone who wanted to could simply turn those penalties onto their competition by doing exactly what Google didn’t want them to do, only for their competitors’ sites, of course.

SEO Considerations When Building a Mobile Website - There are people getting behind mobile search optimization, or challenging the existence of mobile SEO as a genre. This post is not an endorsement of either camp, simply how to include SEO into your mobile strategy.

How To Optimize Images And Boost Traffic - To get more traffic from search engines you have to optimize the content of your site accordingly. Other than text optimization you should go for image optimization to get traffic from Google Image Search.

22 Free Keyword Research Tools - Choosing the right keyword is the foundation of successful search engine optimization. Fortunately there are a number of free online tools to help you identify potential keywords and analyze their strengths.

Tutorials

CSS Ribbon Menu - This uses CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup. IE8 and IE9 do not support CSS3 transitions, so the hover state will not be animated for those browsers.

12 Fresh Css3 Tutorials - Css will always play a role in a developers life of coding. I wanted to showcase some of the creative things developers have created here are 12 Fresh Css3 Tutorials.

Interactive menu with CSS3 & jQuery - The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Code a Fantastic Animated Circular Thumbnail Gallery With CSS - Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all ..

Absolutely Fresh And Useful Adobe Illustrator Tutorials - Adobe Illustrator does not need any introduction. It is the most powerful and basic tool used in the designing industry. With the help of Adobe Illustrator you can create several design elements that ..

A Pure CSS3 Cycling Slideshow - Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties.

Showing Product Information With CSS3 3D Transform - There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. How to show our product information with cube style using CSS3 3D Transform.

How to Build an Accordion Image Gallery with only CSS - Fluent animated transitions using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript!

75 top CSS and JavaScript tutorials - A round-up of the very best CSS and JavaScript techniques from around the web, which include advice on building great websites, creating stores and designing apps.

Freelance, Business and Workflow Related Stuff

The Freelancer’s Secret to Learning Any New Skill - As a designer, developer and all around creative person, there are some skills that likely came very naturally to you. The learning experience just sucked you in and you enjoyed yourself enough that you picked up this new talent in an impressively brief timespan.

You’re losing clients by committing this one critical web site mistake - So what’s the big mistake? It’s simple: There’s no call to action. As I’ve looked around a lot of design business sites, I’ve noticed a few common trends ..

10 Things to Consider Before Starting a Freelancing Career - There are a lot of great reasons why one would want to venture into freelancing, all of which have been talked to death, but there are also those that should make one take a second guess.

10 tips for managing client expectations - Keep projects moving along nicely by making sure your client knows the score.

Four reasons why you shouldn’t become an entrepreneur - But while Libin suggested that technology means now is the best time in history to start a business, he listed four popular motivations for becoming an entrepreneur that will guarantee the business fails…

F*cking Brilliant, a great Read or just magnificent Tips!

An Important Lesson: Never Give Up [VID] ~ He helped me to understand that failure just means we know which route not to take. Keep your head up and continue to push through and eventually you reach the solution you’ve been looking for.

Content Modelling: A Master Skill - The content model both influences and is influenced by the work of several other disciplines. A content model helps clarify requirements and encourages collaboration between the designers, the developers creating the CMS, and the content creators.

Leave a Lasting Impression on Your Visitors - There is no foolproof way to keep your visitors attached at the hip. Through A/B testing you can try new ideas and see if they stick. But ultimately you’ll need to go through many trials before capitalizing on a brand.

Simplicity Isn’t Simple - Simplicity. It’s weaved into conversations about everything from to-do list apps to DVD players. We meet confusion (not the same as complexity) at the door of our design process and turn it away. Confusion isn’t welcome here — although, ..

10 Things to Learn From Failure - Start the recovery process by taking a minute to figure out what went wrong and then make a resolution to gain something from the process. Learn how to improve yourself, your team and your next project.

The World’s Longest Invoice - I run a small business and like the fact that the buck stops at my desk, but I also realize it’s my responsibility (through things like contracts, legal advice, and payment schedules) to be sure that the buck gets there in the first place.

Even website owners should care about code - Although there is no good reason why a client needs to know anything more than some basic HTML they should still discuss code with their web designer. The reason it is important to have this discussion is because how a site is coded has business repercussions.

10 Free Resumé / CV WordPress Themes (+Bonus Plugin)

Gonzo the Great — Wed, 25 Apr 2012 13:00:39 +0000

CV’s have traditionally been bits of paper that sum up your experience, skills, projects and more. However, with technology continually evolving, we are no longer limited to text on a piece of paper. If you think about your career, especially when you’re a web designer or developer, wouldn’t it make perfect sense to have a online resumé web site?

An online resumé allows you to easy update and add your experiences, projects and skills, it’s also preferable to host a downloadable version in PDF format if prospective employers wanted to print it out (like I did with my online Resumé). Online Resumés and/or digital business cards have become very popular in the last couple of years and with good reason ..

Living in the digital age that we do, it makes perfectly sense to have your own CV site. More and more, clients and employers are performing online searches to learn more about the people with which they are considering to engage. Having a search engine friendly web site makes it more likely they will find you (the use of keywords makes it easy for people to zero in on the skills and/or expertise).

But there’s more, having the capability to embed Multimedia (i.e. images, video, presentations, links) makes it easier for you to tell your story in a vivid and interesting way and to stand out from the crowd. And last but not least, you can use links to direct people to specific content areas of your profile, portfolio projects or to articles on your blog.

Publishing a resumé, CV, or vCard online with a WordPress theme can be a great idea if you’re looking for a job or just want to have an online resumé. In fact, it’s become such a popular practice, that there are several free CV WordPress themes available. So, .. go ahead and make yourself a cool online curriculum vitae with any of these free and great resumé / vCard WordPress Themes, good luck!

zeeBizzCard

zeeBizzCard is a clean and elegant styled Business Card Theme for WordPress that fits perfectly for a sleek homepage for personalities, freelancers, entrepreneurs or small business owners.

Demo | Download

MiniCard

MiniCard is a social network/business card free WordPress theme inspired by Tim Van Damme’s bussiness card website. The theme lets you add links to all the social networking sites you may be a member of, and post useful information such as bio’s and contact details.

Demo | Download

BizzCard

BizzCard is as its name suggests business card theme, aimed at freelance professionals that want to make their online presence as simple and creative as possible. No complex information blocks, just straightforward: YOU! Free to download, however licensed version has more features.

Demo | Download

Visiting Card

The theme comes with Theme Control Panel from where you could set all the aspects of the theme. If you don’t need some of them to show, simply leave them blank and they won’t appear.

Demo | Download

wavCard

Here’s a nifty WordPress vCard theme inspired by the Google Wave design, with about section and social networks. Idea of this WordPress Theme is grabbed from Tim van Damme’s website, and inspired by Google Wave. With this Theme you can build your own vCard site in no time.

No Demo | Download

The Digital Business Card

The Digital Business Card WordPress Theme is an attempt at creating a very simple branding page for individuals that are comfortable using WordPress.

Demo | Download

Ipseity Personal Branding Theme

“Ipseity” means selfhood, or individual identity. Although this theme isn’t a resume/CV as such, it is a personal branding theme for your site that allows you to list your contact details, achievements, anything you want really, in a beautiful sliding site. Essentially this is another creative personal branding theme that you can customize for your needs.

Demo | Download

Profile

The Profile theme for WordPress creates a simple, effective “online business card” for you. This is great for freelancers and consultants. Just install WordPress with this theme then fill in the blanks. You can create pages to introduce yourself, describe your services and show off your previous works. It’s easy for people to contact you via the contact form. They can also connect with you using the social profile links.

Demo | Download

Prosume WordPress Theme

Prosume is a free Responsive Resume Theme for WordPress that publishes your personal resume and portfolio in an easy way. The layout utilizs the Less Framework concept so that it will adjust on different screen sizes, and relies on HTML5 and CSS3.

Demo | Download

vCard

Free vCard WordPress theme inspired in the idea from TimVanDamme. vCard is a file format standard for electronic business cards, but in this case we used for create amazing theme, you can add all information using the hCard microformat, include your location using google maps, if you want to have a portfolio or blog you can do it with this theme. This theme comes in 2 flavours, a premium and a free version.

Demo | Download

Bonus: Plugin to make a Resume Site

WP Resume Plugin

WP Resume is an out-of-the-box solution to get your resume online and keep it updated. Built on WordPress 3.0′s custom post type functionality, it offers a uniquely familiar approach to publishing. If you’ve got a WordPress site, you already know how to use WP Resume.

Demo | Download

Tweet-Parade (no.16 April 2012)

Gonzo the Great — Sat, 21 Apr 2012 13:00:51 +0000

It’s weekend! .. Time for a brand new Tweet-Parade! A Tweet-Parade is a post filled with the best articles and tutorials of last week’s blogosphere. It’s all about webdesign, graphic design, SEO, tutorials, social media and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

A placeholder for incapable browsers - It involves Modernizr on the one hand to check if there is placeholder support within the browser. On the other hand jQuery to search for the placeholder attribute at each form field and substitute it with a value attribute in older browser.

Using Custom Attributes in HTML5 - Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently.

Sass vs. Stylus: Who Wins the Minimal Syntax Battle? - You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS?

An introduction to Modernizr for designers - But with an HTML and CSS foundation comes great responsibility. If an HTML or CSS feature doesn’t work in certain browsers, we need to ensure that we offer those browsers a secondary or fallback experience.

DRY CSS: Don’t Repeat Your CSS - If you’re not familiar with DRY, it stands for don’t repeat yourself, which is hopefully something we can all get behind. It’s why we want variables and functions. Many are moving to css preprocessors for this reason ..

Optimize Your CSS With RequireJS - we’ll review the awesome RequireJS optimizer to handle the process of merging and compressing our stylesheets. While preprocessors continue to become increasingly popular, there are still plenty of folks who stick with regular CSS.

Speed up @fontface loading time - My partial workaround for this is to instruct the users browser to cache the font so it doesn’t have to redownload for each page view. You can also add a local source in your css that will look to see if the font is already installed on the users computer.

Everything You Never Knew About CSS Floats - Floats can trip up even experienced developers and understanding their behavior can really set you free from many of the woes that you face with CSS. Even if you think you already know all about floats, we’ll dive deep enough ..

CSS pointer-events and a pure CSS3 animating tooltip - The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. Although it was originally intended for SVG elements, browser support for pointer-events on other elements is pretty good, except for IE.

Saving the Day with Scoped CSS – One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future. The implementation for scoping is simple.

Let’s Talk about Semantics - I’m talking about HTML semantics. Semantics are the implied meaning of a subject, like a word or sentence. Understanding the thinking behind the naming of elements will help your markup shine.

Decoupling HTML From CSS - For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean.

CSS Compatibility and Internet Explorer - With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved.

JavaScript Package Offers a Smarter Way to Serve Hi-Res Images - Remember when limited bandwidth was a huge problem? Then bandwidth was infinite. Now it’s a problem again. And that means serving up images is once again a complex problem with no elegant solution.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

The 10 principles of mobile interface design - Mobile computing represents a staggering opportunity for web designers and developers who want to become productive on mobile. Yes, there is a bit of a learning curve, but much of a web professional’s legacy experience, skills, ..

Responsiveness is a characteristic - What was not implicitly said in Luke’s article (and I think bears discussion) is that choosing responsiveness, as a characteristic shouldn’t necessarily define the wider implementation approach.

User Experience Is The Heart Of Any Company. How Do You Make It Top Priority? - The closer you are to your customers, the more relevant your product will be and the more likely you make it for people to choose you. It may seem obvious, but the gap between those ..

Building fast and responsive websites - HTML5 is a set of technologies consisting of semantics, new CSS rules and properties, and new JavaScript APIs which could be used to build better structured web pages and powerful web applications.

Responsive viewport units - With all this new fangled talk of responsive web design, its about time that we had a poster child CSS unit to go with it. So move over em, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight.

Mobile Patterns and Why Use Them in Design - Mobile patterns are structured, organized and well researched before going online. These patterns are suited for use when the designer understands how they work properly and the reason behind it.

Why We Shouldn’t Make Separate Mobile Websites - There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should ..

How media queries allow you to optimize SVG icons for several sizes - Using media queries inside the SVG file. Different widths set on the img tag pointing to the SVG file then will trigger different max-width/min-width media queries to be triggered.

Webdesign in Common, Web Typography, jQuery, Tools, etc.

Visual Direction in Web Design - One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works.

Tips in Designing a Single Page Website - Single page websites can only become useful if it is designed in the right manner. No doubt, single page websites give a challenge to the designer on how it can still be effective despite some limitations.

A Beginner’s Guide to jQuery - Although it consist of pure JavaScript and everything is also possible using it alone, jQuery is much easier to handle, learn and master. So sit back and follow me through this course of everything you have ..

Linking to jQuery: Always Reference a Specific Version - If you use jQuery, then you probably have something a URL in a