No matter what kind of website or blog you own, you’ll definitely find something that will make your site better. Just like with clothes some plugins are one size fits all, and other are quite specific. Almost every blog will encounter spam, security concerns and will want to expose their content to the largest audience possible. This two article series focuses on the most essential and useful WordPress plugins every blog will find useful. Whether you’re bored with the default comments platform, want to try custom fonts or just add neat social sharing options, continue reading to find the best WordPress plugins out there. The plugins are sorted into categories and only a few of them have the same features so you can find the very right ones for you.

The first part will cover optimization, forms, comments, site backup, posts, security, design & theme customization and media. Stay tuned for part 2 which will contain even more specific and targeted WordPress plugins.

The second part will cover ecommerce, SEO, social media, marketing and lot of great miscellaneous plugins.

Optimization

1. WP Super Cache

WP Super Cache is a very fast caching engine for WordPress that produces static html files. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

2. WP-Optimize

WP-Optimize is a WordPress 2.9++ database cleanup and optimization tool. It doesn’t require PhpMyAdmin to optimize your database tables. It allows you to remove post revisions, comments in the spam queue and un-approved comments within few clicks.

3. W3 Total Cache

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

Forms

1. Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail content flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

2. Fast Secure Contact Form

A super customizable contact form that lets your visitors send you email. Blocks all automated spammers. No templates to mess with.

3. Gravity Forms (Premium –  $39)

Gravity Forms is hands down the best contact form plugin for WordPress. Build and publish your WordPress forms in just minutes. No drudgery, just quick and easy form-building.

4. AJAX Contact Forms (Premium – $10)

This is a jQuery based AJAX powered HTML / PHP contact form with Twitter Direct Messaging, easily integrated into WordPress via shortcodes and functions.

Comments

1. Disqus Comment System

Disqus, pronounced “discuss”, is a service and tool for web comments and discussions. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

2. GD Star Rating

GD Star Rating plugin allows you to set up an advanced rating and review system for post types and comments in your blog using single, multi and thumbs ratings.

3. Wizzart – Recent Comments

This plugin offers a highly customizable widget to show recent comments of your visitors in your sidebars.

4. Facebook Comments

Full Facebook Comments moderation and management for your WordPress site. Quick and easy to set up. Insert automatically or via a shortcode.

5. Thank Me Later

Automatically send a ‘thank you’ e-mail to those who comment on your blog. This plugin engages visitors by reminding them to check back for new comments and interesting content.

6. Disable Comments

Allows administrators to globally disable comments on their site. Comments can be disabled according to post type.

7. WP Customer Reviews

WP Customer Reviews allows your customers and visitors to leave reviews or testimonials of your services. Reviews are Microformat enabled (hReview).

Site Backup

1. WP-DBManager

Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of back ups, optimizing and repairing of database.

2. BackUpWordPress

BackUpWordPress will back up your entire site including your database and all your files once every day.

Posts

1. Editorial Calendar

The Editorial Calendar makes it possible to see all your posts and drag and drop them to manage your blog.

2. Yet Another Related Posts Plugin

Yet Another Related Posts Plugin (YARPP) gives you a list of posts and/or pages related to the current entry, introducing the reader to other relevant content on your site.

3. SimpleReach Slide

The Slide recommends related posts from within your site on a widget that “slides” in at the bottom of the page.

4. WordPress Popular Posts

WordPress Popular Posts is a highly customizable sidebar widget that displays the most popular posts on your blog. You can use it as a template tag, too.

5. Raw HTML

Lets you use raw HTML or any other code in your posts. You can also disable smart quotes and other automatic formatting on a per-post basis.

6. Auto Post Thumbnail

Automatically generate the Post Thumbnail (Featured Thumbnail) from the first image in post or any custom post type only if Post Thumbnail is not set.

Security

1. Akismet

Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

2. SI CAPTCHA Anti-Spam

Adds CAPTCHA anti-spam methods to WordPress on the forms for comments, registration, lost password, login, or all. For WP, WPMU, and BuddyPress.

3. Secure WordPress

Secure WordPress beefs up the security of your WordPress installation by removing error information on login pages, adds index.html to plugin directories, hides the WordPress version and much more.

4. BulletProof Security

WordPress Website Security Protection. Website security protection against: XSS, RFI, CRLF, CSRF, Base64, Code Injection and SQL Injection hacking att

Design & Theme Customization

1. Widget Context

Widget Context allows you to specify widget visibility settings – you can choose to display them only on certain posts, front page, category or tag pages etc.

2. WP Google Fonts

The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme.

3. WP Maintenance Mode

Adds a splash page to your site that lets visitors know your site is down for maintenance. Full access to the back- & front-end is optional.

4. Genesis Simple Sidebars

This plugin allows you to create multiple, dynamic widget areas, and assign those widget areas to sidebar locations within the Genesis Theme Framework

5. Shortcodes Ultimate

With this plugin you can easily create buttons, boxes, different sliders and much, much more. Turn your free theme to premium in just a few clicks.

6. All In One Favicon

Easily add a Favicon to your site and the WordPress admin pages. Complete with upload functionality. Supports all three Favicon types (ico,png,gif).

7. Font Uploader (Premium – $10)

This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.

8. WPtouch

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress website into an application-like theme.

9. Widget Logic

Widget Logic lets you control on which pages widgets appear using WP’s conditional tags. It also adds a ‘widget_content’ filter.

10. WP Content Slideshow

WP Content Slideshow is the perfect Slideshow for WordPress. It displays up to 5 Posts or Pages with Tile, Description and Image for every Post.

Media

1. Easing Slider

The Easing Slider comes with various options that allow you to choose different sources to get the images from and also multiple styling options so that you”ll never have to edit any files directly & with ease. Create your own unique elegant slider.

2. NextGEN Gallery

NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with dozens of options and features.

3. flickrRSS

Allows you to integrate Flickr photos into your site. It supports user, set, favorite, group and community photostreams.

4. WordPress Video Plugin

A filter for WordPress that allows easy video embedding of supported sites. Support for 65 different video sites.

5. oQey Gallery

oQey Gallery is a premium grade plugin for managing images and video, creating photo slideshows with music, photo & video galleries that works fantastic.

6. uBillboard (Premium – $20)

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options so you can customize it all you want without being overwhelmed with options you never wanted or needed.

7. WP Lightbox 2

This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.

Commerce

1. WP e-Commerce

WP e-Commerce is a free WordPress Shopping Cart Plugin that lets customers buy your products, services and digital downloads online.

2. Jigoshop

Jigoshop is an eCommerce plugin for WordPress developed by professionals with years of experience delivering online shops for global brands.

3. WooCommerce

Transform your WordPress website into a thoroughbred online store. Delivering enterprise-level quality & features whilst backed by a name you can trust.

4. uPricing (Premium – $15)

uPricing is the ultimate and unique solution for all your WordPress related pricing page needs. Creating pricing tables has never been easier. uPricing comes with easy to use jQuery powered admin interface that lets you create and edit your pricing tables.

5. PayPal Donations

Easy, simple setup to add a PayPal Donation button as a Widget or with a shortcode.

SEO

1. All in One SEO Pack

All in One SEO Pack is the best SEO plugin out there which will automatically optimize your WordPress blog for search engines.

2. WordPress SEO by Yoast

WordPress SEO is the most complete WordPress SEO plugin that exists today for WordPress.org users. It incorporates everything from a snippet preview and page analysis functionality that helps you optimize your pages content, images titles, meta descriptions and more to XML sitemaps, and loads of optimization options in between.

3. Google XML Sitemaps

This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Social

1. Add Link to Facebook

Automatically add links to posts or pages that are being published to your Facebook wall, pages or groups. Simple one time setup and forget. The way links appear on Facebook can be customized.

2. WP to Twitter

Posts a Twitter update when you update your WordPress blog or post to your blogroll, using your chosen URL shortening service. Requires PHP 5 and cURL

3. Digg Digg

Digg Digg allows you to integrate popular social buttons into WordPress easily.

4. ShareThis

The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more.

5. BuddyPress

BuddyPress lets users register on your site and start creating profiles, posting messages, making connections, creating and interacting in groups and much more. A social network in a box, BuddyPress lets you build a social network for your company, school, sports team or niche community.

6. bbPress

bbPress is forum software with a twist from the creators of WordPress.

7. The Google+ plugin

The Google + Plugin integrates WordPress with your G+ Profile and Page – now with BuddyPress and Post Format support.

8. Twitter Widget Pro

A widget that properly handles twitter feeds, including parsing @username, #hashtags, and URLs into links.

Marketing

1. Newsletter

This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in is law compliant and it means the user has to confirm the subscription following simple standard instructions sent to him via email.

2. WP125

Easy management of 125×125 ads on your blog. Ads can be run for a specified number of days, and will automatically be taken down. Track clicks too.

3. s2Member

s2Member (membership with PayPal) offers powerful membership capabilities. Protect members only content. The s2Member Framework integrates with PayPal very easily and fully supports recurring billing.

4. MailPress

The WordPress mailing platform.

5. Subscribe2

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

6. MailChimp Widget

Adds a widget that allows your users to sign up for your MailChimp mailing list.

7. Simple PopUp

A simple, attractive, extremely fast and non annoying pop up box for your WordPress Blog. It’s power lies in its ease of use.

Miscellaneous

1. WP-PageNavi

Want to replace the old ← Older posts | Newer posts → links with some page links? This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.

2. Jetpack by WordPress.com

 Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com.

3. Exclude Pages

This plugin adds a checkbox, “include this page in menus”, which is checked by default. If you uncheck it, the page will not appear in any listings of pages (which includes, and is usually limited to, your page navigation menus).

4. Broken Link Checker

This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

5. ManageWP Worker

ManageWP Worker plugin allows you to remotely manage your blogs from one dashboard. You can read our review here.

6. Redirection

Redirection is a WordPress plugin to manage 301 redirections and keep track of 404 errors without requiring knowledge of Apache .htaccess files.

7. FD Feedburner Plugin

Redirects the main feed and optionally the comments feed seamlessly and transparently to Feedburner.com.

8. Hotfix

Provides unofficial fixes for selected WordPress bugs, so you don’t have to wait for the next WordPress core release.

9. Google Analytics for WordPress

Track your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

10. WP-Polls

Adds an AJAX poll system to your WordPress blog. You can also easily add a poll into your WordPress’s blog post/page.

11. Ozh’ Admin Drop Down Menu

The lazy and the productive will love it : all admin links available in a neat horizontal CSS driven drop down menu. No need to click on “Manage” then “Pages” to edit pages. And plenty more space on your screen.

12. Pretty Link Lite

Shrink, beautify, track, manage and share any URL on or off of your WordPress website. Create links that look however you want using your own domain name.

13. 5sec Google Maps (Premium – $8)

Integrate Google Maps into your WordPress blog easily without using API or any code.

14. Advanced Access Manager

Advanced Access Manager is a new way of controlling access to your single blog or multi-site setup. This easy to use interface is a very helpful tool for experienced WordPress users.

Conclusion

Do you know and use any other plugins besides the ones we suggested here? We would really appreciate your feedback here, but we are pretty sure this list will be very comprehensive for you and will satisfy most peoples needs!

Final product:

What you’ll need:

• Subtle patterns
• Iconsweet 2
• Music player icons
• Picture of Nadia Ali
• Helvetica neue 55 roman
• Helvetica neue 65 medium

PSD Download

Prepare your tools

Okay so let’s begin! The canvas size depends on the size of your music player, my canvas is
1000 x 500px. Please make sure that you are using 72dpi before you create your new canvas.

You should have a nice canvas size to work with now, but if you’ve looked closely at the end
result, I’ve used a pattern on the background. Here’s where you’ll need the subtle patterns, load
the .pat file and pick a pattern you like and reduce the opacity.

Now that we know what the background looks like, we can make a nice color palette.

Start designing the player!

Let’s start by creating the base of the music player. Grab your rounded rectangle tool (U) and
make sure that the radius is set to 3px. I’ve used a gradient for the stroke because the bottom of the player would’ve ended up looking blurry.

These are the blending options I used:

• #000000 drop shadow

• #FFFFFF inner shadow

• #f7f7f7 to #ebebeb reversed gradient

• #bcbcbc to #d4d4d4 stroke gradient

You should have a pretty nice background for our player now, but there’s something missing. So let’s make it more glossy!

Select the rectangular selection tool (M) and make a selection at the bottom of the music
player’s background. Now that you’ve made a selection we can select the gradient tool (G), grab one color for the gradient and keep the other one transparent to accomplish a nice glossy effect.

You can deselect (cmd + d / ctrl + d) your selection after you made the gradient, since the layer underneath the gradient has a gradient overlay it’s not possible to make a clipping mask. So what we basically do is make a selection of the layer underneath and select inverse, you can
make the selection by ctrl or cmd click the box which I gave a red stroke.

What you should have this far

Lets make the album cover

You will need to use the first two colors of our palette to make the gradient of the background of the
album cover. Duplicate the background layer of our music player and make sure you put the
layer above the player’s background and glow. Rasterize the layer and make a nice square
selection, select inverse and press delete. You should have something like this:

But hey – wasn’t the background of the album cover blue?! Yes it is, so now we have to disable the layer styling and start adding new blending options.

• #ffffff inner shadow

• #2961aa to #45a6fa gradient

• #1c5297 stroke

Now that we have the base ready we can design the picture frame, just grab your rounded
rectangle tool and make a nice square frame. Please make sure that you give the picture frame area to breathe, I gave my cover a 20 pixel margin on all sides. We will have to use the blending options panel again to give the picture frame a nice border.

• #3379c6 drop shadow

• #2961a9 inner glow

• #164c91 stroke

Great! the frame is ready so now we can add a nice picture of Nadia Ali, just open the image with Photoshop and create a clipping mask, resize the image where needed. But we are not ready yet, we still need to add the glare, select your pen tool and make a nice curve, fill the path (#FFFFFF) and reduce the opacity to 20%.

The last thing you have to do is make a group of your album cover section, select the layers that are related to the album cover and press cmd or ctrl + g, rename to group to whatever you want.

What you should have this far:

Making the controls

What is a player without controls, right? So we are going to make a nice play/pause button, previous and next buttons.

Select your Ellipse tool(U) and drag a nice round circle, make sure that you hold shift. This first circle will be the blue stroke around the pause button, the requires some blending options.

• #000000 inner glow

• #2961aa to #45a6fa gradient

• #1c5297 stroke

Okay we have a nice blue circle now, just make a new circle on top of that circle with some
spacing on all sides. this circle will only need a gradient overlay.

• #e8e8e8 to #f6f6f6 gradient

Now you have to add a nice icon to the button to make it look like a play/pause button. Add a nice gradient and inner shadow to the icon.

• #000000 inner shadow

• #e8e8e8 to #f6f6f6 gradient

The play/pause button should be done by now. Now we’re going to make the previous and next buttons, these buttons require the same styling as the play button, so copy the layer style and paste it on those icons.

Also add these layers to a group and call it ‘Controls’.

What you should have this far:

Give the song a name

This step only requires 2 layers. This step can be accomplished with one single layer but I
personally prefer to make two separate layers.

The text color of the artists & song title is #2c69b4, the font size of the artists is 18pt and the font size of the song title is 12pt. Both are Helvetica neue 55 roman, and both layers have a white 1px drop shadow.

What you should have this far:

Making the love and repeat button

Make the love button

Let’s start with the love button, the love button has a nice orange gradient when hovered or
activated. Make a button with a nice size with the rounder rectangle tool, please be aware of the icon that we have to be put in later.

Now that you have a rounded rectangle shape you’re ready to give it some blending options.

• #FFFFFF drop shadow

• #FFFFFF inner shadow

• #db5825 to #ea6733 gradient

• #bd530d stroke

You should have a nice orange button if you’ve done this, but it’s not shiny enough, so we are going to repeat the step that we did to make the glow for the background and it should be fine.

Now it’s time for the icon to take place, take the custom shape tool (U) and find the heart shape, make sure that you hold shift while you make the icon. After you’ve done that, make sure that it’s white so that we can add a nice inner shadow to the icon.

• #bf540f inner shadow

Make the repeat button

Okay so now we have the love button. Add the layers that belong to the love button to a group, rename the group to ‘like button’. Duplicate the group and call the group ‘Repeat button, because the button is almost the same as the love button, we only have to redo some blending options.

Remove the heart icon and add a nice repeat icon to the button, also this icon has to be white (you can always make it white by color overlay).

On the button:

• Replace inner shadow color with #FFFFFF and reduce the opacity to 25%
• Replace the gradient with #d3d3d3 to #e2e2e2
• Replace the stroke color with: #c1c1c1

On the icon:

• Replace the inner shadow color with #c1c1c1

What you should have this far:

Make the track length bar

The track length bar we’re going to make has a stream, buffered stream and a played track. But we are going to start off by writing the track length text.

The track length text is written in 2 different colors the passed time text is #717171 and the
complete track length is #2c69b4. Add a 1px white drop shadow to the text and you’re done.

Total track

Make sure that you give this bar 20px margin from both sides to make it align well. Make a
shape with the rounded rectangle tool.

• #000000 inner shadow

• #000000 inner shadow

• #e0e0e0 to #f1f1f1 gradient

• #f8f8f8 stroke

Buffered track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. Make sure that you change the angle of the gradient to 180 degrees.

• #FFFFFF inner shadow

• #e8e8e8 to #f6f6f6 gradient

• #8faed6 stroke

Played track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.

• Crank up the opacity of the gradient to 100%
• Give the stroke the color #1c5297

What you should have this far:

Design the tracklist

Designing the background of the track list is simple, it’s simple because you can just copy the layer style & glow from the background of the player. Just make a wrapper for the theme songs with the rounded rectangle tool and paste the layer style on the layer and don’t forget to add the glow.

Now we only have to display the songs, make another rounded rectangle and make sure that you have 20 pixels free space from both sides. This one will look a a bit different from the others, so you can’t copy a layer style. Please make sure that the background of the shape is white, otherwise the gradient won’t work.

• #FFFFFF outer glow

• #e1e1e1 inner glow

• #d7d7d7 to #b4b4b4 reversed gradient

• #d4d4d4 stroke

Add the number of the song, and full name of the song in that rectangle and give the text the color #717171 and 1px white drop shadow. This is the same styling that you need to add to the track length indication.

Duplicate the love button and place it in the track’s shape, copy all the layer styles of the repeat button (or you can leave it this way if you want it to stay orange).

Add all the layers that belong to the track to a group.

What you should have this far:

Duplicate this group 3 times and place them underneath each other with a 10 pixel margin. You are almost done now, the only thing that we need to do is design the current song indicator. Pick one song and do the same thing as we did with the background for the album cover and add a Now playing text. This text is written with Helvetica neue 65 medium, has a white color and has a 1px #1c5297 drop shadow.

Yay we’re done! I hope you’ve enjoyed reading this tutorial and I highly recommend you to
make your own suggestions to make sure you’ve understood everything well.

Final result

And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!

Gamification is a whole branch in reader engagement which brings together game mechanics and marketing to create engagement and solve problems. What do we understand with game mechanics from a web standpoint? Well, that doesn’t necessarily has to be the traditional online games as we are used to seeing them. Gamification relates to things like points, badges, activity levels, leaderboards, challenges etc. Gamification is an excellent way to help shape user behavior and influence them to take actions. There are already lots of successful companies who’ve implemented these game mechanics into their services. Foursquare and Farmville are only two brilliant examples of efficient use of game mechanics.

How do you start then? While there are many ideas and tips to help you improve reader engagement this article focuses on tools and services that do the work for you. Polls, comment platforms, newsletter and gamification services – continue reading and check out these 15+ awesome tools to enrich the readers engagement. The post also contains some neat examples of user engagement and gamification techniques in use.

Tools & Services

1. Badgeville

Badgeville is the leading Social Loyalty and Smart Gamification Platform. Badgeville makes it easy to drive reader loyalty and increase retention by rewarding targeted behaviors, such as visiting, reading pages, commenting, and sharing links.

You can use Badgeville pertaining to retail & ecommerce, media & publishing, entertainment, health & fitness, education etc. Basically the principle stays the same. You implement a social rewards program into your website, in that way being able to offer a variety of rewards to make the experience more enriching.

The platform

Badgeville gives content, commerce and community brands the power to drive and measure user behavior with social game mechanics. Badgeville’s industry-leading customers are experiencing increases in key business objectives by more than 30%.

Dynamic Game Engine

Badgeville’s patent-pending Dynamic Game Engine (DGE) makes it easy for smart brand marketers and product leaders to use social game mechanics to drive user behavior across their web, mobile, and social experiences. Chosen by industry-leading brands, the DGE is the most flexible and lightweight gamification solution available on the market today.

Widget Studio & API

With the Badgeville Widget Studio, you have access to an extensive library of skinnable, turnkey widgets that make it possible to deploy a deeply integrated social loyalty program across your web experience in a matter of weeks. For additional customization, the Badgeville API can be quickly integrated into any digital property.

Social Fabric

Social Fabric is a groundbreaking technology that brings the social interactions found on Facebook, Twitter, and similar social sites to any web property, delivering relevant, real-time social experiences tied to site-specific user behaviors and content. Social Fabric offers real-time notifications, follow functionality, and relevant activity streams.

Engagement Analytics

Marketers can now take advantage of the same analytics that social game developers use to build compelling, revenue-generating user experiences. With Badgeville’s Engagement Analytics, you’ll gain deep, real time insight into the health of your user community, measuring daily active users, lapsed users, as well as a host of behaviors.

2. Polldaddy

With Polldaddy you can create stunning surveys, polls, and quizzes in minutes. Collect responses via your website, e-mail, iPad, Facebook, and Twitter. Generate and share easy-to-read reports.

Features:

• Create stunning online surveys. Use the survey editor to create surveys quickly and easily. Collect responses via your website, e-mail or on your iPad or iPhone
• Market-leading online polls. What does your audience think? Embed simple, one-question polls into your website to find out.
• Test their knowledge with an online quiz. The perfect tool for the classroom, colleagues or just for fun. Create quick and fun quizzes to test their knowledge.
• Get your content rated. Create simple five-star and Nero rating widgets to attach to your blog posts, images, videos, and more.

Pricing:

• Free (200 survey responses per month, 10 questions per survey): $0
• Professional (5,000 survey responses per month, unlimited questions per survey and more): $200/year
• Corporate (unlimited survey responses per month, unlimited questions per survey and more): $899/year

3. Outbrain

Outbrain is a simple way to increase engagement, generate new revenue and drive traffic to your mobile-optimized site. Outbrain automatically places your best content at the foot of your article to guide your readers towards more of what you have to offer.

Features:

• Improve site recirculation. Targeted content recommendations increase page views by 3-12% and move readers between your blogs, site sections, and other properties.
• Make money. Customers pay Outbrain to distribute great articles and content that they want read. When quality articles match your content, links to these articles may show and generate revenue for you.
• Editor friendly. With Outbrain, you decide which content sources will be recommended to your readers. You will also have a full control over the sponsored recommendations that drive you revenue.
• Extend to mobile platforms. Outbrain recommendations are a great addition to your mobile platforms.

4. Disqus

Disqus is a comment platform that helps you build an active community from your website’s audience. It has awesome features, powerful tools, and it’s easy to install.

Features:

• Realtime comment system. Comments become more like live discussions with realtime posting and updating.
• Notification and reply system. The notification system lets people know when they’ve received a response. Best of all, they can continue the conversation straight from the email.
• Inline media embedding. Full integration with media services such as Youtube, Flickr, and more. Attach media such as photos and videos right within the comments.
• Mobile commenting. Fully compatible with mobile websites for commenting while on the go.

5. The Slide

The Slide by SimpleReach recommends related posts from your site on a widget that “slides” in at the bottom of the page. You’ve seen a similar content recommendation widget on sites like NYTimes.com, and now SimpleReach is allowing anybody to take advantage of this awesome tool for free. The Slide uses ‘asynchronous loading’ and will not affect the load time of your pages.

6. Readability

Readability delivers a great reading experience that compensates publishers and writers without slowing down the web. Why would you want to use it as a publisher? 70% of all Readability membership fees are earmarked for writers and publishers. Every time a subscriber uses Readability on your site, a portion of that subscriber’s fees are allocated to you.

Features:

• Snappy auto-rendering of content on mobile & tablet devices.
• Innovative analytics that provide new insights into reading activity.
• A powerful API that is simple to integrate and build upon.
• Enhanced accessibility and instant printable + single-page views.
• A rich mobile experience — without installing an app.

7. Intervue

Intervue is a quick and easy tool for publishers who are looking to gather short video responses online from anyone with a webcam.

8. Zooshia

ZOOSHIA is a simple yet clever tool that arms websites and blogs owners with fresh content from across the social web. ZOOSHIA is the first and only social plugin that enables you to mix content that interests you and your audience.

9. BigDoor

BigDoor use game mechanics to increase user engagement, loyalty and monetization.It’s goal is to help web publishers, marketers and developers grow and engage their communities. BigDoor offers a cost-effective, flexible and easy to use suite of tools to quickly build game mechanics into your online experiences and applications.

Pricing:

• BigDoor is free as a widget and for developers, yet you have to pay for the enterprise service.

10. Bunchball

Bunchball is yet another gamifaction platform which allows you to influence users behaviour and optimize the way they interact with the website.

Nitro Platform is designed to make it easy for you to offer meaningful experiences to your users. Highly flexible and scalable, Nitro can be customized to your needs, but offers intuitive, easy set-up.

WordPress Plugins

1. Newsletter

This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in is law compliant and it means the user has to confirm the subscription following simple standard instructions sent to him via email. Newsletter Pro can send emails directly from your blog, collect statistics, has a built in feed by mail service and an auto-responder for follow up you new subscribers.

2. Subscribe 2

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

3. GD Star Rating

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin. Plugin includes advanced settings panels that will allow you to control many aspects of rating.

4. Sharethis

The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more. You can customize the ShareThis widget on your site and register with ShareThis to get access to enhanced share related analytics for your site.

5. Quick Chat

Quick Chat is WordPress chat plugin with support for translation, chat rooms, words filtering, emoticons, user list, gravatars and more.

6. Gigya

The Gigya Social optimization plug-in aggregates authentication and social APIs from Facebook, Twitter, Google and other OAuth & OpenID providers, giving sites the ability to authenticate users via social network and OpenID providers and increase site traffic by enabling users to easily share content with their friends and followers.

7. Facebook Comments

Allows your visitors to comment on posts using their Facebook profile. Supports custom styles, notifications, combined comment counts, recent comments

Examples

1. Foursquare

Foursquare uses badges as a reward for challenges completed. Badges is a great way to engage users and keep competitive mood around them. Bagdes will be the stimulus for existing users to keep using service and an attractive detail for the newcomers.

2. Dropbox

Dropbox is another great example of efficient use of user engagement. They’re offering extra free space for completing challenges. One of the challenges include inviting friends so in that way the service is being popularized.

3. Tribesports

Tribesports is a social network for people interested in sports and an excellent example of website gamification. In the screenshot above you can see the user profile page. Tribesports have implemented the whole package – activity level, leaderboard and badges. One the main site’s features is challenges. You can take them., challenge your friends, create your own ones and see the progress of others.

4. Mint

Mint has this fitness feature which allows you to do drills, take challenges and view your progress.

5. Dribbble

Dribbble is also a nice example of user engagemenet. As you get the status and gain more exposure you’re also promoting your business. Plus the exclusivity of the site also plays a role in user engagement.

Again Graphicriver is the answer. With just over 2000 backgrounds in sales you can be sure you’ll find the right one just for your needs. In this article we’ve compiled various backgrounds ranging from subtle textures and patterns to abstract desktop wallpapers to splendid lighting effects. Large part of these background are print-ready so you can use them in almost any way you can think of. Continue reading and check out these 60 useful and neat premium background from Graphicriver.

1. 101 Web 2.0 Backgrounds ($5)

Pack include 101 nice and clean web 2.0 style backgrounds for you site templates. 101 Jpegs + 1 PSD with all groups, organized layers, easy to change gradients, size. 150×800.

2. Wavy Abstract Background ($3)

This is a background in 6 different colors. The files are at height resolution and you can use it anywhere you like. There is a PSD file included so you can change the colors very easy.

3. Light Trails ($4)

5 unique and fully flexible light trails with 3 different colour variations per trail and 2 examples of how these light trails can be added to your graphics.

4. Extremium Lights ($2)

Modern backgrounds pack contain fuly customizable backgrounds, 1800×1000 resolution, fully layered PSD file, 7 background colors. Ready to be used for any web. project or aplication.

5. Lighting Backgrounds V2 ($3)

Lighting backgrounds, especially suited for use in web pages, twitter pages, or any type of project. The way these BG are made it, can enlarge them without losing quality. Changing colors is very easy, you can make the color combination that you like.

6. Backgrounds Web Kit ($4)

This file was created for every web designer that wants to work less when designing a web site, plus it can help you build an big number of web backgrounds.

7. Carbon Fiber Backgrounds ($9)

A collection of 20 exclusive background of carbon fiber, ready for the web.

8. Torn Paper Backgrounds ($3)

You can find included in the package 5 .PSD files (all the themes are separated in a diferent file) and 5 high resolution .JPG’s. CMYK, 300 DPI.

9. Space Web Backgrounds ($4)

Backgrounds especially for use in web pages, twitter pages, or any type of project. The way these BG are made it, can enlarge them without losing quality. Changing colors is very easy, you can make the color combination that you like.

10. ScratchBG ($2)

A collection of modern style grunge backgrounds, suitable for use on websites, banners, posters & more.

11. Venera Night Sky ($3)

Venera Night Sky is abstract background and you can use it anywhere you like. There is a PSD file included so you can make change very easy.

12. Infinite White Floor Spotlight ($5)

Six modern High resolution Web backgrounds 3000×1875 px 72dpi. Modern and fresh design great for faking a spotlight and photographic ambient.

13. Stylish Mosaic ($2)

Come’s complete with 7 pre-set color versions for you with an easy to change background to create your own variations.

14. WORN PSD Background ($2)

A set of six distressed PSD backgrounds in earth tones for you to use in your designs

15. Awesome web 2.0 incorporated clouds ($3)

Massive, beautiful and peaceful cloud background. Works great as a website background, artwork background, print, anything. Massive resolution of 3508×2480 at 300 dpi.

16. Shape Shift Background ($3)

Included is a full layered PSD file and 7 different colored JPG images. 3000x2250px.

17. Silk Light Abstract Background ($2)

4 color variations. Hi-res resolution. There is a PSD file included so you can change the colors.

18. 60 Retro Stripe Grunge Backgrounds ($2)

This set includes 60 retro stripe textured backgrounds for your design projects. Use them however you like to give your projects a professional look and feel. 1600x1200px.

19. Abstract Background ($2)

Beautiful backgrounds that are great for desktop wallpaper, web background, mobile phone wallpaper, etc. 3300x2550px, 300 DPI.

20. Beautiful Floating Islands Scene ($6)

Floating Islands Scene v1 is a page background that can be broken up into many segments and re-arranged completely for a unique look. Ready to go right out of the box. 3000x1230px.

21. Paper Backgrounds ($3)

Photorealistic pack contain 4 jpegs good quality and 1 PSD to change color and to edit structure of backgrounds. This backgrounds good for templates, blogs and other your stuff. 2700×2072 res. 300 dpi.

22. Vintage Wallpaper ($4)

Included in the zip file you will find a psd file that contains the illustration and an ai file that is the wallpaper pattern in vector format so you can use it in any way you wish.

23. Studio Backdrops ($3)

Simulate a realistic studio photo shoot with this 7 backdrops/backgrounds. Great to showcase your products, images, posters, webpages or any type of work. It can also be used for web backgrounds. 4000×2500 px 72dpi.

24. Grunge Old Paper ($2)

High resolution –  2827×4000px, layered PSD file where you can adjust the intensity of the texture and/or the intensity of the dark edges, 2 JPEG files saved from the PSD, optional torn edges.

25. Vintage Tileable Wallpaper Pack ($11)

Inside the zip file you will find a full set of individual jpg files of all the tiles for tileable backgrounds for your websites or whatever use you see fit and  a photoshop pattern file which you can load into your photoshop from the preset manager and use them as pattern fills.

26. World Map ($4)

This is clean layered psd world map classic black / white and lined version included. 4500x3000px.

27. Retro Rays Background ($2)

12 colors, high-resolution & quality backgrounds – 2400×1680px.

28. Premium Vintage Backgrounds ($5)

Classic look with an awesome style to use in any design project, website backgrounds, twitter accounts, desktop wallpapers, blogs, etc.

29. Abstract Waves In Colors ($3)

Abstract Waves In Colors #2 is abstract background at hi-res. There is a PSD file included so you can change the color very easy. 4000×3000, 300 DPI.

30. light & bokeh backgrounds ($4)

8 amazing colored backgrounds. Very nice light and bokeh effects. 2 styles (with & without lite noise effect).

31. Metal Backgrounds ($4)

6 Metal backgrounds, 1024×768, jpeg.

32. Massive Abstract Backgrounds ($3)

Massive Abstract Backgrounds 4 Light Effects. 3 Style of Background (Bokeh,Clean,Dust) 8 colors each. 2560x1600px.

33. Underwater Backgrounds ($2)

Clean underwater backgrounds at 2 variations, 4 colors, 2560×1600 res, 300 dpi. PSD included and well organized.

34. Retro Paper background ($2)

Retro Paper background. Full HD resolution (1920×1080px). Background to use in your web design projects andor as your desktop background. Pattern included (200×200px).

35. Faux Leather Textures ($7)

A collection of 5 faux leather textures perfect for backgrounds, 3D modeling and design projects. Images are all in JPG format sized 3000px x 2000px. Each graphic/texture has been rendered separately, meaning that each texture is unique.

36. 6 Darken Wood Backgrounds ($3)

6 HQ Wood Backgrounds, 2000×1500 px

37. Halloween Night ($3)

Scary Pumpkin within a graveyard. Background for designs.2524×3774px.

38. Linen ($2)

2560x1600px, PSD file included, easily changeable colors and saturation.

39. Abstract color waves ($5)

Abstract color waves that can be used for a website, presentation or print. Clean colors, well-organized and easy to edit. 2000x1500px, 300 DPI.

40. Plume Background ($3)

Layered PSD file – 3000×2250px, 72dpi, 5 color variation backgrounds included.

41. Backgrounds Pro 2012 Bundle ($5)

This file is a Bundle/Collection of 22 different professional backgrounds. These backgrounds come in handy when designing different stage environments to display products, photos and text. 3000x2500px, 300 DPI.

42. Fresh Grass Meadow and Tree ($3)

A fresh summer morning with mist and a solo tree.

43. Explosive Background ($4)

Full layered PSD File and 7 different colored jpg images. 3000×2250px.

44. Hi-res Textured Background ($2)

really textured and detailed. comes in 8 different colors. 2500x2000px.

45. Abstract Aurora Backgrounds ($4)

Abstract Aurora Backgrounds. 5 Backgrounds, 3 colors each, 15 variations. Use for print, web or design. 2500x1600px.

46. Background 5A ($2)

Ultra-high quality backgrounds that are great for desktop wallpaper, web background, mobile phone wallpaper, etc. 2 fully editable PSD files, 2400x2000px, 300 DPI.

47. Interior Backgrounds ($4)

Simulate a realistic studio photo shoot with these 18 background possibilities (3 clean interiors and 5 light set-ups). Great to showcase your products, images, posters, webpages or any type of work. It can also be used for web backgrounds. 4000×2500 px 72 dpi.

48. Paper Holes ($3)

4 Paper Hole Backgrounds. Including PSD and JPEG at 3072×2304.

49. Denim Background / Texture ($2)

PSD File Included in 2560×1600 resolution, customizable colors, customizable patterns and effects.

50. Hill and villages ($5)

Hill and villages with beautiful landscape. PSD included, 300 DPI.

51. Jute Wrap ($2)

Available for several common resolutions including i-devices, psd included for easy customizations, change color in one go.

52. 10 Retro Graphic Backgrounds ($3)

10 colored high-resolution & quality backgrounds with halftone elements. 3200×2267px, layered.

53. Vintage Floral backgrounds ($3)

Vintage Floral backgrounds in 6 colors 2448×3264px.

54. Subtle Wallpaper ($2)

5 JPEG with different color variations, layered .PSD file, 1920x1080px.

55. Stripes Vintage Background ($2)

Looks awesome for product presentation, 4 colors, various resolutions up to 2560×1920px.

56. Fabric Backgrounds ($2)

A palpable background resource for your premium websites or any graphics project.

57. Urban Backgrounds ($3)

1200×720px, 300dpi.

58. Geometric Grunge Pattern ($2)

A set of geometric pattern backgrounds with grunge effect (not tileable). Layered PSD file, 4167×2917px, layered vector geometric pattern included.

59. Patterned Paper Set ($3)

A set of high quality patterned papers. Ideal for use in backgrounds, designs, presentations, wallpapers etc. 3000x2300px.

60. Worn-out Carbon Background ($3)

The file can be transformed into clean carbon by hiding the “dirt” layer. Layered PSD, 2560×1440px.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean - wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School

Today, we have come up with an assortment of 45 Fresh and High Quality sets of PSD files. You can edit them anytime you want, and utilize them in your new design projects. Let us have a look at this assortment and feel free to share your opinion with rest of the community. Enjoy!

Important: All psd icon sets are free. Please read the license agreements carefully before using the psd’s for commercial use, the license can change from time to time.

1. Christmas snow globe icon

This set contains beautiful Christmas Snow Globe icons with psd format. This realistic illustration can be used as an icon for your Christmas related web and graphic projects.

2. Leather wallet icon

The wallet illustration is a brown highly-detailed web icon that can be used for your money or business related websites / programs.

3. Olira icons

This set contains 30 outstanding icons for mobile phone, in archive you can find 30 icons 100×100 px, PSD file for your imagination!

4. USB pen-drive icon

A beautiful USB pen-drive icon in PSD and PNG formats. You can use the icon for web applications, websites, graphic works, etc, includes PSD source file in shape layers. You can use it on both dark and light backgrounds. Zipped is also PNG transparent images of the icon in sizes 512, 256, 128 pixels.

5. ASUS Videophone Icon PSD

This set contains 3 beautiful ASUS Videophone Icons with PSD file.

6. Glass ball with liquid

This set contains beautiful icon of Glass ball with liquid.

7. Coffee cup icon

This set contains a beautiful Coffee cup icon with psd file.

8. Cloud computing icon

This set includes cloud computing icon with PSD file. Communication and network concept, data access and storage services symbol.

9. At @ icon

Blue at icon, @ symbol with shadow, glossy and transparency effects. Internet and mail sign, download customizable PSD source.

10. Flip clock countdown

This set contains flip clock countdown graphic in PSD format. The countdown clock is a pretty good idea for showing some product or service is going to be launched at a specific time in future.

11. White paper airplane icon

This PSD download is a white paper airplane icon in vector Photoshop format. This is a clean illustration of a folded paper airplane that can be used as web icon. The download comes as a PSD file with all the layers in vector shapes that can be scaled up without loss of quality.

12. Free Google Plus Icon Set

This set contains 13 Google Plus Icons. Each icon of G+ from this set is available in different px size. Source PSD files are grouped and layered, so you can easily copy/paste icon design elements and create custom icons. Enjoy!

13. Mail icon

This set contains some beautifull mail icon. Archive includes PNG and PSD files.

14. Vintage Radio Icon

This icon set contains a beautiful Vintage Radio Icon PSD design. Learn how to design old vintage radio using simple shapes, gradients, patterns and textures. Enjoy!

15. Comments / speech bubble icon

This set contains speech bubble icon in vector PSD format. The graphic is a 3D shiny and modern icon that can be used in your web-related projects.

16. 3D Glossy Icon Set

This free icon set features beautiful, pixel perfect, glossy 3D icons. Each icon comes in 5 sizes (PNG format), with Photoshop PSD files in case you would like to tweak the icons.

17. Megaphone Icon

The speaker icon is a shiny orange and grey with realistic details. You can use the icon for your web, blogs and graphic projects. This PSD file in full vector shape layers so this means you can resize it to any resolution without losing quality.

18. Three shopping web icons

Web icons for e-commerce shopping website usage. The simple shopping set includes “add to cart” and “delete from cart” icons. They can fit to any e-commerce web-design. The images were made with vector shapes. The .PSD file has well hierarchy.

19. Vector file icons

This set includes a PSD files of 8 vector shape file icons in 128×128 pixels size. Each icon is isolated on a transparent background in sizes 64×64 and 32×32 pixels in PNG format.

20. Financial graph icon

Financial graph icon, modern graphic design, blue glowing chart and diagram, office and business symbol, analyzing and financial report icon.

21. Compass icon

This set contains compass icon in vector PSD format. The compass graphic is a sleek modern icon that can be used in your web projects. The download comes as editable vector PSD file along with icon in standard sizes 512×512, 256×256, 128×128, 64×64 pixels.

22. Command line icon

Command line and shell commands icon, a simple black screen command prompt with root tree line. PSD graphic, can be used in user interfaces for customizing hosting and other server settings by typing commands.

23. Post Box Icon

Red post box icon layered in PSD format. Can be used on contact pages or in reference to a contact form.

24. Cloud icon & borders

A set of cloud icons and cloud borders in PSD format. Add nature element to your website or print artwork with these handy cloud graphics.

25. Coupon icon

This set contains coupon icon, white curled paper with border and red scissors, on-line coupon graphic illustration, shopping and business symbol.

26. 15 Shopping Icons

This shopping icons were drawn in a orange and green hues. The set includes 15 icons among them: tags, sign, shoulders, bags, gift box, bank cards, basket, trolley, delivery truck and more.

27. Computer monitor icon

This set contains computer monitor icon in PSD format. The monitor icon can be handy in your web design projects as well as a background graphic for showing up your portfolio thumbnails slideshow on a website homepage.

28. 20 Minimal Ecommerce Icons

This set contains 20 minimal e-commerce icons in PSD format, contains some popular and frequently used icons for e-commerce related projects, it includes 2 PSD files of 20 vector shape e-commerce icons in 128×128 pixels size on white and grey backgrounds.

29. Image Icon

This icon set contains some beautiful Image Icons and PSD file. Enjoy!

30. Magic wand icon

It contains Magic wand icon with an abstract yellow glowing stars effect. Magic and wizard symbol, download an editable PSD source.

31. 160 Tiny Icons

It contains 160 beautiful and useful Tiny Icons

32. Black tag

Black product tag with a shiny silver borders, PSD template. Blank label or sticker for your online shop, put price or symbol on it.

33. ToDo iPhone App Icon

An awesome ToDo iPhone App Icon with psd file.

34. Web Icon Set 01

This set contains 14 new icons made in Photoshop.

35. Gamepad icon

This set contains white gamepad icon in PSD format, video game controller against white background, with clipping path. Computer and game console joystick symbol.

36. Social Media Icons

This set contains huge collection of Free Social Media Icons PSD. Enjoy!

37. Dropbox Icon

This set contains an awesome Dropbox Icon.

38. Icon Shelf

This set contains beautiful Icon Shelf with psd file.

39. Photoshop Tool Icons

It contains some outstanding Photoshop Tool Icons for your next project.

40. Pencil Icons

Stunning PSD pencil icons featured with creative color effects. These highly detailed PSD elements can be used for various web design purposes. All layers are separated so you can easily edit colors, shapes and effects.

41. Switch Button

Free PSD button with rocker switch that can be used as an icon, illustration and can also be applied to any web or mobile user interface. All layers are separated and grouped properly. Available in high resolution (900x820px)

42. Glossy Shield PSD Icons

4 glossy shield icons that can be used as illustrations or icons for print and web projects. These stunning graphics represent security, protection and defense, therefore they can be applied to various of projects.

43. Basic control icons

Minimal icons for controls with a handrawn/watercolor feel. Layered psd file

44. Free Winner Cup Icon Set

Highly detailed winner cups with sweet cherry on top mixed with delicious cream. Ideal for adding winning feel to your featured products or services presented in business websites, headers, flyers, posters, collages, etc.

45. Set Of 7 User Icons

This is set of user icons: 4 women and 3 men. These icons can be used in different areas. Might be useful for profile applications, avatars, lists as well as for forums and blogs. The .PSD file is well hierarchy and ready to adapt with your needs.

1. Embrace or avoid the fold

There are many discussion about the fold on the internet and even if I don’t have a preference, I can see that each one of them has advantages and disadvantages. The fold (the part of the page visible without scrolling down) can be used to your advantage if you manage to make the user scroll down. People say the users do this anyway, but I might not agree. If the things above the fold are not interesting, I will not scroll – why would I, after all?

Although I do not think designers should expect people to scroll, if they have a nice teaser over the fold then they can put much more information about the campaign or product under it. For example, I’ve seen landing pages with illustration above the fold and with the boring and long text under it. The illustration got the user interested and now it is more likely for him to read the information, regardless of how boring it is. This is the way I usually like to advise people to do it.

The others say that animation or illustration should not be above the fold, because it loads slowly and it drives the user away. I consider this totally unfounded and stupid to say. We are all designers here, nobody uploads images of 5MB that load in 1 minute. If we still do that, it means we either do it on purpose or we should find other jobs. This argument is not valid. Moreover, if you manage to attract the interest of the user with the boring text, what good will the illustration under the fold do?

2. You need a clear call to action

The first point we’ve talked about is not the most important – this one is. Having a clear call to action will not distract the user’s attention and he can focus on the purchase (which is exactly what you look for). It is a huge mistake to design a cluttered landing page and not make the call to action clear, because in the end it all comes down to how much you’ve sold. The page has to be simple and explicit for all kinds of users. Bare in mind that not only IT experts and computer geeks visit the ads, so do beginners. The purpose of the website needs to be defined by the user within a matter of seconds.

It is not difficult to focus the call to action, you just need to use some of the following elements:

• Ask a question
• Make use of the graphics to direct the user’s eye (no Vegas Lights though, please – gradients or background images work well here).
• Keep the most important thing on the top of the page
• There has to be a contrast between the dominant color of the page and the call to action. It needs to stand out.
• Keep it short – one sentence should be enough; simplify everything as much as possible – you need to sell, not to tell stories.

Groupon has a great landing page which you can see below. If we take a look at the list above, we can see that Groupon used some of the elements I’ve named. They asked a question (which is not really a question, but the user still has to confirm the city), they keep the call to action on top (very close to the Golden Area), there is contrast between the green background and the light call to action box and the text is short (“Save 50% to 90% in Vancouver”). And voila, they have a very useful and productive landing page.

The Landing Page of Groupon

3. Use infographics

It should be clear for everybody out there that long blocks of text will not sell anything. People do not read too much anymore; therefore we have illustrations, animations and sound to replace the old way of doing it. Text does not grab attention, graphic elements do. Therefore you should try to maintain a balance between these two. I know it is difficult because people should be interested in text and what you offer, but they are not; and you are there to make them buy. So design the way they want it!

Text and graphics can easily be combined by a good graphic designer, so if you are not one of them, find one. This concept is called infographics. They are quite easy to notice and usually they get the point across to the viewer quickly. This way you can have both text and graphic in one interactive concept and make them work together.

If you are stubborn and really wish to insert blocks of text, look into a typography manual. Keep the font at a decent size, increase the line height and pick a friendly and easy-to-read font. People are more likely to run away (and they will, trust me) if they see a large block of text. It gives a feeling of the internet back in the 90s, for those who experienced it – you don’t want that on your landing page.

Below you can see two examples of how an infographic works. These two are not landing pages, I just want to show you how easily text and illustration can be combined.

Bankruptcies Infographic

Infographic by Coca Cola

4. No other links

Removing any other link besides the call to action buttons is important, because the last thing you want is to drive the user away to another page. You can have a Privacy Policy link which should open in a separate tab, but don’t include other links. Users get carried away pretty fast. As the experts advise, there are only two options for a user who hits a landing page: signing up or leaving the page.

There are many examples on the internet where landing pages are actually part of the website. In this case you should try to eliminate the navigation as much as possible or at least make everything open in a new tab. The second choice is quite annoying and I wouldn’t go with it. I would rather try to put the navigation somewhere else – or, for better results, I would actually never have a landing page as part of the whole website.

5. Offer something for free

There is nothing wrong with offering something for free in exchange for the e-mail address or whatever it is you are asking for. Most of the time it actually helps. Make sure your landing page specifies that you offer a product, trial or anything else for free. Is there anybody out there that doesn’t like free stuff? Free always works, so why not go for it.

Vinotrac offers access for free

Although free always works, this doesn’t mean you should literally have the word all over the place. Quotes like “No obligation”, “No charge”, “No credit card required”, “No commitment required” and many others work very well too.

6. Where to sign up?

Landing pages are not only made for selling something, but also for convincing users to sign up for future details or updates. But how do you do this?

Well, this might be a difficult one, because you have two options: you can insert a form or make a call to action button which links to a form completion page. Which one should you use? It depends on the type of form you have.

Mail Chimp has a nice call to action button instead of a form to fill in.

If you need only up to four fields to be filled in, then put the form. Otherwise just create a call to action button which will take the user to a separate page where he can fill in a form with more fields. If you choose this, then make the button big and let the user know he goes to a page with a long and boring form to fill. If he gets there, it has to be his choice and he has to know what he should expect.

7. Focus on security too

Don’t leave this behind. Security is one of the biggest issues on the internet right now. Don’t let it be on your website too. Do everything you can to protect your users. Start with having a visible SSL certificate and an HTTPS connection. As said before, a link to Privacy Policy should not be skipped. And there is also a reason that every program you need makes you check a small box before you can continue. Even if you don’t, they want to be sure you’ve read the policy before.

Both Secure (https) and SSL connection are featured here

Most of the users tend to feel more comfortable on any kind of page if they notice these elements, therefore try to have as many as possible. Don’t forget you’re dealing with personal information such as e-mails or phone numbers or, even more, addresses and credit card numbers.

8. Closely follow the progress

There are many tools on the internet which can help you track the progress of your landing pages. The best of them is by far Google Analytics, which gives you an insight to how the users interact with your page. Try to look as much as possible into that and increase the conversion rate of your landing page. At the end of the day it all comes to this.

Conclusion

Having a landing page is something everybody looks into nowadays. They may sell a product, write newsletters, tease people with gossip from the latest technology trends or even spam users, all of them look to have a landing page which collects as much information as possible. Try to follow the tips above and tell us how well they’ve worked for you. If you think we’ve missed something, don’t hesitate to leave us a comment. We would be really glad with some more insights from you.

Read more

101 Landing Page Optimization Tips on Unbounce

Top Landing Page Tips From The Pros on Seldomstatic

Ten Tips For Landing Pages on Lead Generation

Five Landing Page Tips to Boost Your Conversion Rate on Search Engine Land

50+ Examples of Highly Optimized Landing Pages on Smiley Cat

Today we’ve prepared a compilation of a niche which will always be in demand – flyers. Flyers have been around couple decades and probably will be couple more. Whether it’s web or billboard – every event needs a flyer. They’re on of the most powerful marketing tools so you have to be careful when choosing one. Fortunately, Graphicriver has plenty of wonderful option to choose from so keep reading and check out these 50 impressive and fantastic premium flyers from Graphicriver.

1. Electro Party Flyer ($6)

A modern, sexy and unique flyer, poster, invitation design for your next party. The final package includes a fully layered, renamed, grouped PSD file.

2. Full Page Magazine ($13)

Print ready. PSD clearly labeled and allowing text to be edited to desired needs and shapes to be changed to any color. Help file included.

3. Summer House Party ($6)

Summer House Party Flyer Template for a fresh flyer design in 3 different colors for a hot party or any other mainstream event. You can modify everything very easy and quick. Changing the color style, pictures and the typo is no problem. It is well-assorted in folders and layers. Print ready: CMYK , 400 DPI.

4. Ad And Party Flyer Template ($6)

An awesome ad and party flyer template with the super box effect. Just insert your image, text or any artwork and enjoy the output. CMYK, 300 DPI.

5. Indie Flyer/Poster ($6)

Indie Flyer / Poster – Designed principally for an Indie or Alternative Music Event, but also suitable for a festival, concerts, special evening in a club, concerts or parties. CMYK, 300 DPI.

6. Beach Party Flyer ($6)

CMYK, 300 DPI.

7. Flashy Nightclub ($6)

Tabloid size 300dpi CMYK Print ready (with bleed). Can be used as Poster, Flyer, E-Flyer template for nightclubs and any entertainment events.

8. Happy New Year Party Flyer ($6)

A modern, sexy and unique flyer, poster, invitation design for New Year party. The final package you download includes 4 PSD files fully layered, renamed and grouped.

9. Elegant Product Flyer ($6)

Elegant product flyer suitable for any product campaign. Simply change text and images with your own. CMYK, 300 DPI.

10. Get Minimal ($6)

It’s time to get minimal. Completely editable AI/PSD documents, you can change colors, positions and typefaces.

11. Cosmos Summer Party ($7)

Layered Photoshop file with all layers included, all objects on the background is a layer at full 300dpi. Every single adjustable layer used in creation of the background included. Organized in groups for easy navigation. 1 Click color change. Astonishing color variations. For any possible occasion. CMYK, 300 DPI.

12. Indie Flyer ($6)

Designed principally for a Rock / Indie / Pop / Underground / Alternative Music Event, but also suitable for a gig, concert, festival, night club special evening. Ideal for a indie pop event or a rock/pop band poster. CMYK, 300 DPI.

13. Business Flyer Template ($6)

The template pack contains 1 psd file, 4 JPG files for preview purpose and readme file. Inside the psd file, you will find 4 separated main layer groups/folders of template color schemes. CMYK, 300 DPI.

14. Business Sale Postcard Mailer ($6)

This post card mailer has a bold, eye-popping, look with a very universal design to accommodate almost any type of business who wants to promote a sale. All objects and text are super easy to change. Color combination could be endless. This postcard brings a modern unique look and feel for your business marketing. CMYK, 300 DPI.

15. Rap Battle Music Flyer ($6)

This graphic design template may have been designed for a particular theme, but if you like the way it looks you can change the wording and elements to suite your own need. Once you buy the file just open it, then change it however you like. CMYK, 300 DPI.

16. BOLD / COLORFUL / VIBRANT Typography Flyer/Poster ($6)

Bold, vibrant, colorful and fun, can be used and applied for just about any purpose. CMYK, 300 DPI.

17. Grunge Newspaper ($6)

Designed principally for a Rock / Indie / Grunge / Underground / Electro / Alternative / Pop Music Event, but also suitable for a gig, concert, festival, night club special evening. Ideal for a rock/pop band poster & festivals. CMYK, 300 DPI.

18. Stunning Nightclub Poster ($11)

Stunning, trendy, professional, top notch poster and flyer template. Can be used as a poster, flyer, e-flyer template for nightclubs and any entertainment events. Also works great as a website background, artwork background, print, anything. 300 DPI.

19. RW Swiss Style Flyer ($6)

Stunning business/corporate flyer. CMYK, 300 DPI.

20. Rock Music Event Flyer Postcard ($6)

This flyer has a nice outside country festival feel with a touch of water green. You can easily edit text and change colors how you wish. This Rock Music flyer can be for any style event with music. Also, the guitar image is a vector. CMYK, 300 DPI.

21. Clean Simple A3 Poster and A6 Flyer ($6)

The A3 poster and A6 flyer are made to stand out and get the important info that is needed to be advertised without distracting the person reading it with pointless images. Hence the name clean and simple. CMYK, 300 DPI.

22. Elegant Promotion Flyer ($6)

Elegant Promotion Flyer is suitable for any product promotion. With well-managed layer, no special skill required to understand how the layer’s work. You easily change the text, color and images as well. This flyer comes with 8 block spaces for product list so you can add up to 8 products at the bottom page of this flyer.

23. Green Valley Poster ($6)

Poster template. CMYK, 300 DPI.

24. Star Typography Party Flyer ($5)

Modern, clean & minimal party flyer, fully editable and well-organized. Print-ready design - 300 DPI, CMYK, bleed margins.

25. Typography Template ($6)

A4+5mm bleeds, CMYK , 300dpi, layered, all text fully editable (fonts free for commercial use, download links in the documentation file).

26. Minimal Event Poster ($6)

Minimal Event Poster Template- Designed for special music evenings or parties in night clubs, discotheques, concerts and even a music festival. CMYK, 300 DPI.

27. FunkyRock Flyer Postcard ($6)

Band entertainment promotion music flyer postcard. CMYK, 300 DPI.

28. Blackboard Flyer ($6)

CYMK, 300 DPI.

29. Event Instruction ($6)

A retro and unique flyers, poster, invitation design for a party or others.

30. RW Ultimate Fastfood Flyer Bundle ($7)

This package is a premium bundle for a wide perspective of businesses related to fast food restaurants and other foods. CMYK, 300 DPI.

31. Print Marketing Campaign Template Set ($7)

This is a perfect template for your next print marketing campaign. Easy to customize Print Marketing Photoshop Templates that includes a Full Page and Half Page Magazine Print Ad, a 4×6 Flyer, and a Postcard Business Mailer. CMYK, 300 DPI.

32. RW Essential Business Flyers Bundle ($7)

4 business and corporate flyers for a price of one. CYMK, 300 DPI.

33. Trendy Travel Flyer ($6)

A nice clean trendy travel flyer. All layers intact and fully editable. Very simple to edit and to adjust. CMYK, 300 DPI.

34. A3 Drinks Promotion Advertisement Poster ($6)

A clean, crisp, easy to use A3 multiuse PSD poster template, perfect for any type of drinks advert. CMYK, 300 DPI.

35. Retro Fancy Dress A5 Flyer ($6)

A clean, crisp, exciting, sexy, retro and glamorous A5 fancy dress multiuse PSD flyer template, perfect for any type of event. CMYK, 300 DPI.

36. Retro Party Poster ($6)

3 layered posters with editable text. CMYK, 300 DPI.

37. Valentine’s Day Template ($6)

Valentine’s day flyer / poster / postcard / lovecard / wallpaper / e-card template – designed principally for a Valentine’s Day party, but also suitable for music events or parties in a club, Mother’s Day celebration or just as a postcard for your beautiful love. All text layers are full type and can be easily edited. All hearts are 3d modelled objects – well organized and separated from each others and are easy to modify.

38. Alternative Flyer/Poster Bundle ($11)

Alternative flyer / poster template bundle vol. 1-3 – designed principally for a rock / indie / electro / grunge / underground / alternative music event, but also suitable for a gig, concert, festival, night club special evening. Ideal for a vintage/retro event or a rock/pop band poster.

39. Get Minimal – Presentation Poster Z-Fold ($6)

Completely editable print-ready PSD , AI and EPS files. Easy to change colors, fonts and styles. CMYK, 300 DPI.

40. Get Minimal – Flyer 04 ($6)

Completely editable documents, you can change colors, positions and typefaces.

41. Waves ($6)

Advertise your party, birthday or other event with this cool and shiny flyer. CMYK, 300 DPI.

42. 2 Corporate-Style Flyer/Ads Templates ($6)

The file pack contains 2 PSD files for two different flyer design templates. CMYK, 300 DPI.

43. Minimal Fashion Event Flyer ($5)

A clean, smooth and fashionable flyer ready to spark your presence in the city. Comes with additional 10 color variation and featuring 1 click color change option. CMYK, 300 DPI.

44. Intrigue Retro A5 Flyer Template ($6)

A quick & easy retro flyer template. Edit the text then replace image aligned to the text layer & hey presto. CMYK, 300 DPI.

45. Swiss Posters ($11)

Swiss Posters is a packet of five beautifully designed posters, inspired by old and new Swiss designs.

46. Earth Tones Flyer Template ($6)

Included are 2x PSD files, front and back cover design. All layers are well grouped and named. CMYK, 300 DPI.

47. Retro Colors Flyers ($6)

A Retro and unique flyers, poster, invitation design for a party or others. CMYK, 300 DPI.

48. Bar Crawl Flyer ($6)

A lovely simple flyer with splats of paint, available in 2D and 3D. Layered Photoshop file organized in folders with editable text and flexible layer styles. CMYK, 300 DPI.

49. Brand Manuals & Guides ($6)

A helpful and useful corporate identity manuals and guides template, will guide you to provide a professional identity manuals with quick and easy way.

50. Minimalist Event ($6)

A minimalist and unique flyers, poster, invitation design for a party or others. CMYK, 300 DPI.

Even if you scrolled down the list quite carelessly I’m pretty sure you’d have spotted couple of characteristics these designs have in common. Apple inspired designs have always attracted designers and delighted our sight. Lets take have a closer look at traits these designs share.

One page layout

Most of the app developers have a clear goal – popularize or sell their product. And single page landing pages seems to do the job well. Since most of the apps doesn’t offer tons of features and your goal is to call visitors to action there’s really no need for a multi-page layout. In some of the app web designs a nice jQuery accordion slider is implemented which helps to navigate through the page. I find that a nice well-built single landing page is the best choice for iPhone app web design.

Simplicity

One page layout and simplicity – it does make sense, doesn’t it? Like mentioned before, your goal is to sell, so don’t clutter your design with unnecessary elements. A screenshot, list of features and call to action button is basically all you need. A nice background, couple of bold fonts and you’re ready to go. Don’t stuff your visitors head with inessential information and you will get rewarded. One of the things Apple is famous for is simplicity so keep that in mind.

Illustrations

What’s the main thing that you’ll find in almost any iPhone app website? No doubt, it’s a large and sleek iPhone decorating half of the visible area. Features are cool and necessary but we all know that screenshots is what attracts visitors these days. Make sure to offer enough screenshots of the app at work. And no need to limit yourself to screenshots only. Bright and bold illustrations like in the Ben The Bodyguard website will also help to turn visitors into buyers.

Call To Action

This is what your website is about. Making the casual visitor click that shiny button and purchase the product. The default app store button is nice but try a more creative ways? Lots of the designs listed below are using custom buttons with great slogans. You can also find some creative uses of the default button. This is one of the most essential elements of a landing page so make sure to check out some websites if landing pages is something new to you.

1. Crowd Spottr

Beautiful design with trendy details like paper texture in background, sleek large fonts and illustrations. The page is using nice jQuery accordion slider which makes it easy to scan information.

2. piictu

Simple and captivating design with a noticeable and effective call to action button. What I like is the real time stream of pictures from the app.

3. Cero Ideas

Cero Ideas is a mobile content developer and this is their portfolio site. The design is rather rich and supplemented with some attractive illustrations. Each app has it’s own simple section which does what it has to do – describes the product and tells where you can buy one.

4. Weave

A couple of colors, couple of fonts and couple of paragraphs – what more do you need? Weave is an excellent example of minimal yet engaging iPhone app web design.

5. Ben The Bodyguard

Benthebodyguard has a modern, bold and clean design. It has huge headlines, great features descriptions and large call to action buttons. And have you seen the app’s trailer?

6. Photo Stats

Another simple one page layout with smooth slider on the top. Yellowish buttons look awesome on the textured background and call to action button is done neatly. Like piictu Photo Stats App also has a gallery with user generated content.

7. Zootool

Simple yet efficient landing page which justifies it’s purpose. There are several informative screenshots however I believe that the current lightbox solution ain’t so useful.

8. Localmind

Localmind has a bit different, more massive and businesslike design which is characteristic to more popular and business related apps. However the design is still held in pretty simple style and those trademarks doesn’t leave consumer confused.

9. Leaflet

Simple and beautiful just like every Envato website. Minimalistic color scheme, demonstrative screenshots and grid based layout – this website has what it takes for a pleasant and responsive layout.

10. imygarden

imygarden is using a neat grid based layout which contains all the information you would possibly want to know about the app. The textures have been implemented nicely and the content visibility isn’t disturbed.

11. Maad QR

12. Findmytap

13. Money

14. Ecoki

15. Faces

16. Sundance 2010

17. Prayer Engine

18. iVIP

19. 3do

20. Awesome Note

21. Billings Touch

22. Get Galleried

23. Instagallery

24. blip.me

25. Munch 5–a-day

26. Old Booth

27. Pretty Poo

28. Tea Round

29. Firetask

30. plazaa

31. Debty

32. Grillfest

33. Read Me Stories

34. Momento

35. YouSee TV Guide

36. Float

37. Movies Now

38. Camera+

39. Tweetbot

40. Dui Dodger

Responsive Web Design is another important concept which can be called “planning”, but it has a name of its own because it is widely used nowadays. A few years back we didn’t need to think about mobile phones, tablets and different screens, because there were not too many of them – or not at all. Well, the IT world has changed since then and now there are a bunch of screen sizes and platforms designers need to deliver for. Responsive Web Design is the concept of a website which should adapt to fit any device that chooses to display it. Not only mobile devices, but also stationery computers and tablets.

According to Ethan Marcotte, who wrote an interesting book, Responsive Web Design after starting this whole concept, there are three parts to this kind of approach: a flexible grid, flexible images and media queries.

This means old fixed-width layouts do not fit the new web anymore and the way we work needs to be changed. This is why, today, we will review the most important parts of the new approach and talk about each of them. As a designer, the faith of a project is always in your hands. You need to understand how the layout will work and what Responsive Web Design means in order to be able to take on this approach.

Grid system and background images

The grid system used in magazines, for example, needs to be used in Responsive Web Designs as well. It is impossible to design with this approach without having a grid system. Now, in order for the layout to be flexible, you need to give the measurements in percent, not pixels. This means that a 50% width will always be half of the screen the website is shown on, regardless of its size. This is where flexible and responsive web design starts from.

If you wish to use background images, it is OK, but you will have to properly select the right one. Photographs, illustrations or any other images that can’t be tiled are not proper for fluid grid systems. Therefore do not use horizontal gradients either, because they do not scale well horizontally. The texture borders will also suffer and look quite awful. If there is something you could use, then textures easy to tile are good, such as grunge, grain and so on.

Scale everything down

When you design with the responsive approach you have to scale everything down. This means the fixed-width approach you used until now has to disappear, exactly like the horizontal scroll. Instead, try to insert every information or web element in such a way that if you resize the browser width you will still be able to see every piece of information. With a flexible  wrapper made in percent instead of pixels this is possible. Most of today’s webpages are not flexible and this damages their chances of being properly shown on a mobile device.

Working in percent is the same as in pixels, there is not much of a difference and you don’t need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means. Regardless of the dimensions of the screen, the mentioned div will always be at a maximum width. If instead of percent you would have had pixels, then regardless of how the big the screen would be, the div will always be at 100 pixels. On an iPhone this is a lot. On my computer with a screen of 1600×900 resolution this is nothing. You see the difference? It is just more logic to work this way.

Consider the media queries

I am sure you all know what these media queries mean. But to explain the concept of modules better, you can take a look at the following image.

Media Queries for desktop, iPhone and iPad

This basically means that you have to consider the way your layout is going to be, by thinking of the platform you design for. The main problem on the internet today is that designers and developers do not think of more than the queries for desktop and, maybe, for iPad. Nobody thinks of the iPhone screen when designing a webpage for desktop use.

These modules need to be resized and moved when an iPhone browses through them, therefore the design has to be flexible. By using the media queries properly this is possible. In the end of the article you will see a list of further resources and by reading those you will find out more about the media queries and how to use them. The main idea behind this concept is that the modules change their place and size based on the screen size that the website is shown on.

What to do now?

The reason behind the internet not having flexible designs is the designer’s lack of knowledge about this issue. Therefore I always believed a designer should also be able to code HTML & CSS, because by knowing all the potential problems, you can also design in such a way that you avoid them.

I hope that by reading this article the graphic designers will understand there is a big need of flexible layouts on the web nowadays, as this changes and will continue to change and grow for many years to come. With the addition of HTML5 and CSS3 coding flexible layouts just got a bit easier, although the new mark-up language is still in development and experts say it will always be, so we can’t count on it to be done too soon.

The amount of information given is also something to think about, because a desktop website should have way more information and elements than a website designed for portable devices. There are very many things to think about before going responsive on the web, but it is also therefore the internet grows and becomes more and more important. With such a big amount of decisions to take before even starting to design, it should be clear to everybody that designing responsive is a challenge for even the finest experts out there.

Examples of responsive design

1. CSS Tricks

CSS Tricks full-sized

CSS Tricks resized

2. Simon Collision

Simon Collision full-sized

Simon Collision resized

3. Hardboiled Web Design

Hardboiled Web Design full-sized

Hardboiled Web Design resized

Further reading

To find out more on this topic, simply follow these recommendations. You can also see more examples by accessing the last link.

Beginners Guide to Responsive Web Design on Think Vitamin

CSS Media Queries on CSS Tricks

Fluid Grids on A List Apart

Responsive Web Design on Smashing Magazine

Showcase of Outstanding Responsive Web Designs on Line25