“The trend now is to get away from stage bound sitcoms.”

And, if we talk about the world of web designers then, changes are mandatory and bound to happen. Because “a market is never saturated with a good product, but it is very quickly with a bad one.”
There is no doubt to the fact that the area where there has been witnessed a lot of change are the website design trends. Also,

“Compared even to the development of the phone or TV, the Web developed very quickly.”

Since the use of mobile phones have become prime, and the effective means to go online. What can be the reason? Is it just a trend, or that the computer systems are costlier and the weak broadband networks.
On a very general note, how many people you know who surf Internet on the mobile phone? A lot, I guess…! It is becoming an increasingly important element and, a recent research proves the same. It has been estimated on the facts almost 85 percent of the American population has cellphones, and 18 percent of those users are using smart phones for surfing the Internet between November 2009 and January 2010 and the rest cannot afford to be missed out who use normal phones to do the same. There are some of the operating systems that are the most popular amongst the mobile web design. They are as follows— Symbian OS, Android, Mobile Linux, Palm OS, iPhone Platform, the others.

Now that we have well acquainted ourselves with growing mobile web design trends, there arises the need to follow up with some of the advantages and disadvantages of the same:

• There is no doubt to the fact that there is mobility. You can access it from anywhere you can. Be it sitting on the toilet seat for instance. For the addicts, the use of mobile phones to be able to access the social networking site at large, and for the other useful information at any point of time have just become so easy. No need to start up with your systems and laptops.
• Because of the easy accessibility and the mobility, a growing demand for the mobile web pages has been witnessed.
• Despite of its advantages, it accompanies certain drawbacks as well, which have been encapsulated in the small screen size, the time taken by the site to load, and a completely different user-experience.

And, now, it is bound to witness some of the latest web design trends that have been listed as follows:

1. Simplicity Follows:

There is no doubt that the mobile’s screen size is small and there is a clear cut need for simple options that have been scaled down. The mobile screens lack space ad and obviously, the connections are comparatively slow. So, the most important and the foremost step are to shed off everything that is in excess.

2. Provide Some Place for the Eye to Rest upon:

Be it in any design, and any part of the web design industry, whitespace is a necessity in every web design. And, when the screen size is so small that the there is a possibility that the visitor would face problem in reading and making a difference in between the page. As you would browse through the pages, the lack of whitespace would be an irritant and the biggest turn-off. Therefore, it becomes really important that a mobile web page contains enough whitespace so as to have a user-friendly experience.

3. Set Priorities in the Content:

The content should be on the highest priority when we talk about setting up the simplicity of the pages. There is a need to set the content according to the user; a focused approach would do the same. The mobile websites are generally a more business-focused and there is no for the banner ads. Mostly mobile web pages are for gathering information and using the social networking sites per say. Therefore, the content should be on the utmost priority.

4. Sub-domains:

The first and the foremost advantage of using a sub-domain is that it ought to keep everything on one domain rather than landing into the hassle of spreading things in different directions, and lead them into confusion.

5. The Web Pages lack Images:

Remember that you are no longer using the computer systems or may be your net books, and are eligible to take advantage of the bandwidth and the hi-speed Internet connections. There is a lot of difference when it comes to the mobile websites because the use of more images and videos would do no good. The use of such images or let’s say, the videos as well, would ultimately slow down the loading time. However, better connections accompany smart phones, but there are still thousands of the mobile users that are dependent on the simple phones. Therefore, most of the mobile web pages still lack the use of heavy images.

6. Clean and Semantic Coding:

It is more than a necessity to have a clean and semantic coding because it would ensure that the browser displays the web page properly so as not to face ant difficulty and have a good user experience.

7. Contrast:

The background and the contrasting color pattern have always played a significant role. Obviously, a color pattern that is not able to successfully merge with the content and thereby making it difficult to read won’t be a success at all. Contrast has always played a key role in the presentation of the web page and it ought to be handled with the utmost care because of the utter variations in the small screen size, and thus, the readability of the page.

8. Navigation:

Navigation is very important particularly when you talk about the mobile website trends and after all, they tend to be scaled down in such cases. The user should not find it difficult to navigate from one page to another, and have to look out for the navigation menus instead. They should be compact and contain the necessary key items to be able to navigate from one page to another.
It has been witnessed that the U.S. and the Western Europe is witnessing a major trend in using these mobile as the new and the latest trend in accessing information on the Internet. Adding on to this, the traffic on the Internet has witnessed a growth by 25 percent while only 3 percent on the personal computers. Where Internet on the mobile is seen as the medium to take just a glace and ready to use information. Latest news, updates, status, information on the latest trend, restaurants, hotels, and social networking sites are the key where one has witnessed an increase in demand of the latest web trends.
There is no doubt to the fact that the mobile web pages face a lot of challenges, such as variation in the size of the screens, and the lack of understanding and readability issues sometimes. Therefore, it is very important that the testing stage ought to be handled with care and that can be done with yet another strategical approach and a well-planned mobile web design giving the utmost priority to the simplicity of the page and testing it both on the smart as well as the non-smart phones.

Related Posts:

• 15 Must Read Articles for Web Developers
• 12 Creative Peace of Web Design
• Using Visual Metaphors in Web Design: Part 1
• Things You Should Consider Before Building Your Website
• Letterpress Effects in Web Design- Trends and Tutorials

Today in this tutorial we are going to create very easy Slider using Coda javascript library.

So before going to the first step you can view the working demo of tutorial and download the source code below.

Step 1: XHTML

<div id="content">
<h1>Coda Slider | DEMO</h1>
<div class="wrapper">
    <div id="coda-slider-1" class="coda-slider preload">

    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title">Welcome!</h2>
            <p>Hello, welcome to the working demo of Coda Slider. You can see how image, lists or text looks or works on various tabs. I hope you like this tutorial. Enjoy great sliding effect and try out with the above tabs.</p>
        </div>
    </div>

    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title">Images can go Like this!</h2>
            <img src="images/demo.jpg" alt="demo image" />
            <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
        </div>
    </div>

    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title">Recent Articles</h2>
            <ul>
	        <li><a title="15 Must Read Articles for Web Developers" href="http://nikhilmisal.com/15-must-read-articles-for-web-developers/">15 Must Read Articles for Web Developers</a></li>
	        <li><a title="Why these 31 Blogs Rock (Always)?" href="http://nikhilmisal.com/why-these-31-blogs-rock-always/">Why these 31 Blogs Rock (Always)?</a></li>
	        <li><a title="Create Simple Navigation using CSS3 Styling" href="http://nikhilmisal.com/create-simple-navigation-using-css3-styling/">Create Simple Navigation using CSS3 Styling</a></li>
	        <li><a title="30 Superbly Done Creative Ads" href="http://nikhilmisal.com/30-superbly-done-creative-ads/">30 Superbly Done Creative Ads</a></li>
            </ul>
        </div>
    </div>

     <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title">Thank You</h2>
            <p>This tutorial is created by Nikhil Misal for Powerusers.</p>
            <p>Thanks for visiting this demo! If you like this tutorial then please share and comment on it.</p>
            <p>You can freely use this slider for your future projects so go ahead and download the <a href="#">Source Code</a>.</p>
        </div>
    </div>

</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<h3><a title="Go Back to Tutorial" href="#">Go Back to Tutorial</a></h3>
<p>Created By: <a title="My Portfolio" href="http://imnikhil.net">Nikhil Misal</a></p>
</div>

Here the content of each slide is include in panel-wrapper and each panel is included in panel. And all these panels are included in coda-slider.

Step 2: CSS

Lets add some styling to the above file.

/*Page Styling */
body {
            margin: 0;
            padding: 0;
            background: url(images/back.jpg);
}

#content {
            width: 940px;
            margin: 0 auto;
            padding-bottom: 50px;
            font: 1.5em Keffeesatz, Verdana, Geneva, sans-serif;
}

@font-face { font-family: Keffeesatz; src: url(fonts/YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(fonts/YanoneKaffeesatz-Bold.otf) format("opentype") }

h1 {
            color: #ddd;
            text-align: center;
            padding-top: 20px;
            font: 2.5em KeffeesatzBold, Verdana, Geneva, sans-serif
}

h2 {
            font: 2em KeffeesatzBold, Arial, Helvetica, sans-serif;
            color: #999;
            text-shadow: 1px 1px 2px #000;
}

/* Coda Bar */
.coda-nav {
            height: 30px;
            background: #eee;
            background: -webkit-gradient(
                        linear,
                        left bottom,
                        left top,
                        color-stop(0.23, #ddd),
                        color-stop(0.62, #eee)
                        );
            background: -moz-linear-gradient(
                        center bottom,
                        #ddd 23%,
                        #eee 62%
                        );
            width: 700px !important;
            margin: 0 auto;
            border: 5px solid #aaa;
            border-bottom: none;
}

.coda-nav ul {
            clear: both;
            display: block;
            margin: auto;
            overflow: hidden;
}

.coda-nav ul li {
            display: inline;
            overflow: hidden;
}

.coda-nav ul li a {
            background: url(images/button.jpg) top center no-repeat;
            color: #fff;
            display: block;
            float: left;
            margin-right: 1px;
            text-decoration: none;
            width: 30px;
            height: 30px;
            text-indent: -999px;
}

.coda-nav ul li a.current {
            background: url(images/button-active.jpg) top center no-repeat;
}

.coda-nav ul li a:hover {
            background: url(images/button-active.jpg) top center no-repeat;
}

/* Slider Styling */
.coda-slider {
            display: block;
            width: 700px;
            overflow: hidden;
            margin: 0 auto;
            margin-bottom: 50px;
            background: #eee;
            background: -webkit-gradient(
                        linear,
                        left bottom,
                        left top,
                        color-stop(0.23, #ddd),
                        color-stop(0.62, #eee)
            );
            background: -moz-linear-gradient(
                        center bottom,
                        #ddd 23%,
                        #eee 62%
            );
            border: 5px solid #aaa;
            border-top: none;
}

.panel-container {
            position: relative;
}

.coda-slider .panel {
            float: left;
            width: 700px;
}

.panel-wrapper {
            margin: 0 20px;
            overflow: hidden;
            padding: 20px 0;
}
            .panel-wrapper img {
                        float: left;
                        margin: 0 20px 20px 0;
                        border: 5px solid #999;
            }
            .panel-wrapper ul li {
                        margin: 10px 0;
            }

We are using some CSS3 properties here. Like Gradient background and external fonts embedding @font-face. You can learn more about these properties here:

1. Speed Up with CSS3 Gradients

2. The Essential Guide to @font-face

Step 3: jQuery

<script type="text/javascript">
			$().ready(function() {
				$('.coda-slider').codaSlider({
				autoHeightEaseDuration: 2500,
				autoHeightEaseFunction: "easeInOutElastic",
				slideEaseDuration: 2500,
				slideEaseFunction: "easeInOutElastic"
				});

			});
</script>

Add the above script in the <head> tag. This will initiate the slider operation. You can change above value and play with some functions.

I hope you like this tutorial. If you enjoyed it then please put your comments below and don’t forget to download the source code.

Related Posts:

• Create Simple Navigation using CSS3 Styling
• Why these 31 Blogs Rock (Always)?
• How to Add Social Sharing Icons in Your Post
• 15 Brilliant CSS3 Based Articles
• How to Create Beautiful Minimalist WordPress Theme in Photoshop

Anyways. Today web development has crossed many heights. HTML5 and CSS3 have really changed the face of web and developers approach towards creating it. If you want to develop a perfect website then the knowledge of basic things and some advanced tools is must. You cannot stop just making website cross browser compatible. Now we cannot ignore the increasing market of portable devices such as iPhones or iPads and their compatibility issues.

Also todays web developer is considered to be aware of application development (like for Facebook or Twitter), widget development, e-commerce websites, web typography, content management systems and other related technologies. So where will you find about all these stuff? Here! Following articles will help you to excel in web development and will also teach you about latest technology and requirements.

1. Five Goals to Strive for with Every Site You Design

Goals are important to have in life. They are especially important for website design, because without any goals, you have nothing to shoot for in the end and nothing to measure your success by. Goals help designers focus on the important things and not lose sight of what you want in the end; goals are what help designers deliver outstanding sites every time.

2. Improving The User Experience Of Your Website With Modal Windows

With new elements of design trending the web it’s no surprise a large portion of these aim towards enhancing the user experience. What better way to help create a more usable environment then to start by properly structuring the way your users interact with key aspects of your websites (i.e. the login process)? This is where the use of Modal Windows steps in.

3. Cross-Browser Testing: A Detailed Review Of Tools And Services

As you probably know, cross-browser testing is an important part of any developer’s routine. As the number of browsers increase, and they certainly have in recent years, the need for automatic tools that can assist us in the process becomes ever greater. In this article, we present an overview of different cross-browser testing applications and services. Surely, you are already familiar with some of them, and you may have even stumbled across another overview article, but this one takes a different approach.

4. Planning your E-Commerce Website

Whether theming an e-commerce website or doing a full-scale build, one of the most important parts in the whole process is the planning. Planning a build before you start can sometimes seem like a bit of a tedious and time-consuming task, but not only will it make everything run a lot smoother, it will also save a lot of time.

5. 10 Most Sought-after Skills in Web Development

In a time of economic crisis, web developers and freelancers everywhere have started chewing their fingernails. However, no matter how bad the economy worsens, there will always be work in certain booming fields of web development.

6. 10 Steps To A More Usable Ecommerce Website

The ecommerce marketplace is a very competitive one and a rival site is never more than a click away. If you want to attract and retain customers, you need to make sure that your site is as usable as possible.

7. Responsive Web Design

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.

8. 18 Dos and Don’ts Of Usability On The Web

Are you a web designer or do you run a website? Good, because this article is for you. If you’re designing websites for a living or running your business online, there are 18 tips in this article that you should definitely read and remember.

9. Web Designers, Don’t Do It Alone

Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.

10. The Importance and Different Types of Community Driven Websites

Ever since the web began to evolve out of its infancy from the mid to late 90′s online communities in one form or another have existed and flourished. Today we’ve taken the very same fundamental concepts of our ancestry and we have managed to build socially thriving networks that cater to a variety of individuals.

11. On Web Typography

There are many books and articles on typography, but considerably few explore typeface selection and pairing. With the floodgates poised to open and the promise of many typefaces being freed up for use on websites, choosing the right face to complement a website’s design will need to become another notch in the designer’s belt. But where do we start?

12. The Principles Of Cross-Browser CSS Coding

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.

13. The Essential Guide to @font-face

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

14. What NASA Can Teach You About Web Design

What does space have to do with becoming a better web designer? Actually, the real connection here is the folks who look at space. The people of NASA are brilliant when it comes to publishing content to the internet.

15. How To Engage Customers In Your E-Commerce Website

One of the most influential factors in our buying decisions is the opinions of our friends and relatives. Likewise, a large majority of online shoppers now trust what other customers say about the products they buy more than the e-tailers themselves. The reason is that we trust people who are “on our side,” even if we do not know them personally.

Further Reading:

10 Free Printable Web Design Wireframing Templates

Beautiful Examples of 3D Elements in Web Design

Start Using CSS3 Today: Techniques and Tutorials

10 jQuery Plugins to Help with Web Page Layouts

Web Development For The iPhone And iPad: Getting Started

Related Posts:

• 12 Creative Peace of Web Design
• 20 Great Web Design Tutorials and Inspirations
• Mobile Website Design Trends
• Why these 31 Blogs Rock (Always)?
• Create Simple Navigation using CSS3 Styling

The first question you have to ask yourself is; what are you writing for? Good ranking/PR, getting sponsors and earning money, providing information or teaching. Whatever you do; you have to be best in your field. As this blog is about design and web related contents so I will talk about this niche.

I have categorized the blogs in three fields.

1) Tutorial Blogs:

These are the blogs which provide tutorials and how to guides. Making a great tutorial blog depends on the way of writing tutorial and demonstrating it. While writing a tutorial following points should always keep in mind.

• Write it in STEPS
• Introduce with tools and basic idea behind the tutorial
• Include illustrative images wherever necessary
• Include Final product at the start and end

wprecipes.com

Net.tutsplus.com

Perishablepress.com

Line25.com

Tutorial9.net

Tutorialzine.com

Blog.echoenduring.com

Css-tricks.com

Sohtanaka.com/web-design-blog

Blog.spoongraphics.co.uk

2) Informative Blogs:

A good informative blog can be made with the quality of contents. You should be able to provide unique and complete information of the topic to your readers. Keep following points in hand while writing informative post.

• Always focus on content
• Use appropriate images and illustration for better explanation
• Include further resources or readings at the end of post

Bonfx.com

Sixrevisions.com

Webdesignledger.com

Webdesignerdepot.com

Designinformer.com

Thedesigncubicle.com

Smashingmagazine.com

Spyrestudio.com

Buildinternet.com

Uxbooth.com

Onextrapixel.com

Designshack.co.uk

Carsonified.com/blog

Webdesignerwall.com

Inspiredm.com

3) Roundup Blogs:

Many of the today’s blog falls under this category. Writing a good roundup post requires immense web browsing and finding quality contents. Following points can help you build a good roundup.

• Grab only quality content
• Don’t repeat or copy
• Provide link back to source
• Unique idea for roundup

Devsnippets.com

Noupe.com

1stwebdesigner.com

Speckyboy.com

Designm.ag

Hongkiat.com

Related Posts:

• 15 Must Read Articles for Web Developers
• 30 Superbly Done Creative Ads
• 12 Creative Peace of Web Design
• 25 Furiously Awesome Car Illustrations
• 16 Beautiful Typography Designs

In this tutorial we are going to use some of the basic techniques of the CSS3. We are creating simple navigation menu with linear gradient created in CSS3 style sheet. We are also going to use text-shadow effect to give our text a nicer look.

So let’s start with the HTML first.

STEP 1:

Create a new HTML file and add an unordered list containing the menu elements.

<body>
    <div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Support</a></li>
    </ul>
    </div>
</body>

Save the file and preview it in browser, it should look like this.

STEP 2:

Now create new Cascaded Style Sheet (CSS) and save it in the same folder as of HTML file.

Attach the CSS file to above HTML file.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>DEMO :: Simple Navigation using CSS3 Styling</title>
</head>

STEP 3:

Add the following style in the CSS file to give your navigation some clean look.

body{
	background: #666;
    font-family: Helvetica, arial, sans-serif;
}

#nav {
	width: 500px;
	margin: 50px auto;
}

#nav ul {
	float: left;
	list-style-type: none;
	width: 450px;
	height: 44px;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;

	text-shadow: 0 1px 0 white;
}

#nav ul a{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #454545;
	font-size: 20px;
	text-decoration: none;
}

Applying Shadow:

-moz-box-shadow is used for Mozilla. Syntax is
-moz-box-shadow: x-offset y-offset blur color;

-webkit-box-shadow is used for Webkit. Syntax is
-webkit-box-shadow x-offset y-offset blur color;

box-shadow is used for Standard Browsers. Syntax is
box-shadow: x-offset y-offset blur color;

Applying Gradient:

For Mozilla client gradient is applied using the following syntax

background: -moz-linear-gradient(position of start, from color, to color);

and for Webkit it is

background: -webkit-gradient(type of gradient, position of start, position of stop, from color, to color);

Creating Rounded Corners:

This is one of the most beautiful addition to CSS3. You can create rounded corners with just a two lines of code.

Syntax:

-moz-border-radius: radius size in px;

-webkit-border-radius: radius size in px;

STEP 4:

Let’s add some hover effect. Add the following code in CSS file to get cool hover effect.

#nav ul a:hover{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #ddd;

	text-shadow: 0 1px 0 black;

	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

Try with different color combination to get exciting results.
You can download my file below for experimenting.

Related Posts:

• 15 Brilliant CSS3 Based Articles
• How to Create Coda Slider in Minutes
• 15 Must Read Articles for Web Developers
• 12 Creative Peace of Web Design
• Best Links of July

So advertising has become the source of inspiration for the designers. Creative Ads with proper meaning or message to be transmitted to people outside are very rare to find. This post includes some of the fantastic, meaningful and beautiful ads.

1. More Trees

2. Bosch IXO

3. Play Seesaw

4. Frozen Flame

5. Fill it Prizes Camera

6. Danger From Water

7. Little Labour

8. Do Not Kill Blockbusters

9. Eagle Fighting

10. Pain Africa

11. Help Yourself

12. Sydney Opera House

13. Tsunami

14. Big Confetti

15. Game Playing

16. Action Inside

17. To Call and to Start Your Travel

18. Home Theater

19. New Skin

20. Let it All Out

21. Steady Shot

22. Wake Up

23. Easier to Get In

24. Eric Black

25. Ready for the Weekend With You

26. Open During the Summer

27. Change it

28. On Street

29. Intensely Mintastic

30. Dice Bag

Related Posts:

• 12 Creative Peace of Web Design
• 15 Must Read Articles for Web Developers
• Why these 31 Blogs Rock (Always)?
• 15 Innovative Offices Featured at Officeal
• 25 Furiously Awesome Car Illustrations

This Icons Set includes six social icons in two versions – Blue and White. I have included all the icons in four sizes – 32×32, 64×64, 128×128, and 256×256 for wider use. The icons are created in Adobe Illustrator.

Creative Commons License. You are free to use for personal and commercial purpose but not authorized to sell it by any means. Please respect the content creator.

Enjoy and feel free to use.

Related Posts:

• Free Under Water Wallpaper Pack #2
• 60 Best Places to Get Quality Stuff
• Free Excellent Icon Sets

So in this tutorial we are going to learn how to add these Social Sharing Icons in your post, to make it easy to share for all.

Step 1: Open single.php from your Themes folder

Head to your Theme installation folder and open the single.php file for editing in your favorite editor. We want to add Icons only in the single post therefore the code should also be added to this file.

Step 2: Add the Basic Code

Now add the following code just below the <?php the_content( ” ); ?> line. This line calls the content of the post.

<!-- Social Buttons -->
<div>
</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 3: Get the Required Code for the Icons

Now lets add the icons. Decide which Social Sharing Icons you want to add and get the appropriate code from following links.

DesignBump

Design Float

The Web Blend

Digg

Facebook Share

Stumble Upon

TweetMeme

Reddit

Delicious

Faqpal Code:

<a href="http://www.faqpal.com/submit.php?url=<?php the_permalink(); ?>" target="_blank" title="Add it to FaqPal!">
<img src="http://www.faqpal.com/images/buttons/faqpal48x48.png" alt="Add it to FAQPal!" border="0" height="48" width="48"></a>

Step 4: Adding Buttons

Add the code obtained from above links between <div id=”so_buttons”> and </div>.

Put <em></em> tag around each code. Your code should look like this.

<!-- Social Buttons -->
<div>

<em><script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script src="http://www.designfloat.com/evb2/button.php"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script><script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><a class="DiggThisButton DiggMedium"></a></em>
<em><script type="text/javascript">
tweetmeme_source = 'Powerusers';
tweetmeme_service = 'bit.ly';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script></em>
<em><script src="http://reddit.com/static/button/button2.js"></script></em>

<em><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></em>

</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 5: Remember

For Digg Button you have to add following code either in <head> or in <body>

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

In TweetMeme, do not forget to change the username in tweetmeme_source = ‘Powerusers’; field.

We are using <em> tag rather than <span> in HTML code because many of the above code itself have <span> tag inbuilt. So when you apply style to our <span> tag it gets applied to all the inbuilt <span> tags.

Step 6: Let’s add some Style

Open style.css file from your theme installation folder and add the following code for very simple and basic look.

/* Social Buttons
/* --------------- */

#so_buttons {
     width: 530px;
     height: 85px;
     background: #ddd;
}

     #so_buttons em{
          margin: 5px 10px 5px 10px;
          float: left;
     }

Do not forget that you can always change the feel and look by editing CSS file. And here is our final outcome.

For your inspiration check out the following collection of Sharing Block.

1. Blog.Spoongraphics

2. Design Informer

3. Build Internet

4. Productive Dreams

5. Tutorialzine

Related Posts:

• How to Create Beautiful Minimalist WordPress Theme in Photoshop
• How to Create Coda Slider in Minutes
• Why these 31 Blogs Rock (Always)?
• Create Simple Navigation using CSS3 Styling
• 8 Video Series: Every Web Developer Must Watch

Following are the creative offices for the creative minds. The only aim behind these great places is to reflect their business approach. These offices are featured at “Officeal- Gallery of Awesome Offices“. Visit their website to check more awesome offices.

1. AKQA

A veteran to the new media development field AKQA has worked with the likes of Nike, Xbox and ESPN over the past fifteen years. Thw Washington DC offices are highlighted by the industrial construction and open workspace.

2. Digital Garage

Digital Garage is an technology-based investment and development company located in Japan. According to their corporate site, the core technology focuses are financial, marketing, and information. Over the past two years they have participated in two rounds of investment for Twitter.

3. Google: Zurich

Google is no secret to the web and now has several campuses across the globe. The Google Zurich office is what we have come to expect from the online behemoth. Colorful and filled with stuff like a fire pole and spiral slide.

4. Wax Branding

Located in Auckland, New Zealand Wax Branding is a three woman web development and design company. Formerly a school for boys in the 1920’s, their office is offers an open floor plan and large windows for natural light.

5. ZURB

Zurb is a design company found just outside of San Jose, California with a unique atmosphere. Focusing on design rather than being pigeonholed within a niche, Zurb has helped over 75 start ups as well as working for high profile clients such as Facebook, Photobucket, Britney Spears, Zazzle, NYSE and eBay.

6. Go Media

Founded in 2003, Go Media offers a robust resume of design experience and ability. They cover several fields of media including: web, print and motion with clients such as Pepsi, The Killers and the Smashing Pumpkins. Along with their design work they also produce the design blog GoMediazine.

7. Yahoo: Barcelona

Yahoo is no internet secret seeing as it is second in search and the most widely used web portal on the internet. Founded by Jerry Yang in 1994 Yahoo has remained a web powerhouse for over a decade and a half. While its headquarters are located in Sunnyvale, California Yahoo has several offices spanning the globe, today we are taking a look at their Barcelona, Spain research lab.

8. Web.Burza

Web.Burza is a Croatian web design team with a big personality. Located overseas, they have a slew of impressive portfolio of past projects such as theDigitalni Trezor (Digital Vault) site and Hotel Atrium.

9. One Mighty Roar

One Mighty Roar is a web design company that also runs a network of blogs centered around creativity, including this one. They are behind The Nonsense Society (a fine arts community) and Build Internet (web design & development).

10. Seesmic

Seesmic was launched in June 2007 by French entrepreneur Loic Le Meur. It has recently been divided into two focuses: the video-based conversation community as well as desktop and web-based twitter applications. The video focus resembles a twitter-like experience revolving around conversations and replies while the desktop and web application streamline Twitter and Facebook use.

11. Fog Creek

Fog Creek is a software company located in New York City with plenty of personal perks for the employees. Located on 55 Broadway the office offers great views of the city as well as an accessible location.

12. Clearleft

Clearleft is a web design and development company from across the pond in Brighton, England. They cover all fields from optimizing potential markets, design and site structure.

13. Red Door Interactive: Denver

Red Door Interactive is an Internet presence management company found in Denver, Colorado. Our friends at One Mighty Roar were on site for a tour and photo shoot of the office.

14. Madison Ave. Collective

Found in Corvallis, Oregon Madison Ave. Collective is a design firm covering mediums from print to web design. A large portion of the workspace is constructed of non-traditional and recycled materials.

15. Traction Marketing Group

Traction Marketing Group is a well established firm found in Oklahoma City, Oklahoma. Their workspace is a converted warehouse fitted with colorful walls and plenty of open space.

Related Posts:

• 30 Superbly Done Creative Ads
• 12 Creative Peace of Web Design
• Most Popular Posts from Creative Blogs
• 15 Must Read Articles for Web Developers
• Why these 31 Blogs Rock (Always)?

On creativity Charles Mingus has said that

Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.

Charles Mingus

Source

Yes. You don’t have to make things complex for creativity; it is the form of “Less is More”. In the following examples of Web Designs, you can see that how the above principle is applicable.

1. Svanmark

2. Goin’ Nutty

3. Icreon Design Studio

4. Intensity

5. The Ship and the Sea

6. Alex Antuna

7. Brizk Design

8. Stripes

9. Ktgardens

10. Graphicurry

11. Six Clicks

12. Constantia

Related Posts:

• 15 Must Read Articles for Web Developers
• 30 Superbly Done Creative Ads
• 20 Great Web Design Tutorials and Inspirations
• Mobile Website Design Trends
• Why these 31 Blogs Rock (Always)?