28 Personal Portfolio Websites using Portraits and Background Photos

I always love to find personal sites that reference a photo of the person. It gives visitors a better look into who they are. Some creatives may be uncomfortable with this, while others simply adore the spotlight. Either way it is a wonderful design idea for Internet-based portfolios.

If you also like this idea then take a look at these awesome websites. Each one features an individual who does some form of creative work be it design, music, writing, or otherwise. I hope these layouts can provoke other ideas in designers who may want to utilize this same feature. A fullscreen background or even a small photo can bring out more of your character on the page.

View the original article here

How To Build a Tabbed Ajax Content Widget using jQuery

Blogs are usually full of different posts all with varying degrees of popularity. Readers don’t always know how to find related posts without using the search feature. It helps to build smaller widgets right into the page that can automatically sort through content based on different criteria.

In this tutorial I want to demonstrate how we can build a sidebar-based tabbed ajax widget to display related blog posts. Many times these widgets feature some type of thumbnail image, along with other metadata like the author and publication date. I’ve kept things real simple mostly focusing on the jQuery animations. Take a peek at my live demo to understand what the final outcome should be.

Live Demo – Download Source Code

First I am creating a new blank HTML5 document with a couple related files. The first is a local copy of jQuery and the second is a styles.css stylesheet. This will include some page resets along with the generic layout formatting.

The overall webpage is built to appear like a very simple weblog. The left-hand content uses some filler Ipsum to look like blog posts. While in the sidebar you will find a small widget using 3 top links organizing newest, popular, and random articles.

Newest Popular Random

I really like this design because it is sleek and conforms nicely into any layout. It would not require much effort to extend the design into more colorful examples to fit your own project. We also use a coordinated CSS class of .active to check which tab of content is being displayed at any given time.

Aside from my typical resets I have also included a new Google Webfont named Crete Round for our headings. The div IDs #left and #sidebar are both set to fixed widths floated within a clearfix container. This also means the widget itself has been set to a fixed width. It should be noted that mobile users may not even want to use this widget, and you might consider hiding it beyond a certain device width using media queries.

#w { display: block; margin: 0 auto; width: 800px; padding: 11px 16px; background: #fff; border: 7px solid rgba(0,0,0,0.35); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}#left { display: block; float: left; width: 460px; padding: 0 7px; margin-right: 14px;}#sidebar { display: block; float: left; width: 280px;}

The actual navigation links are centered in their own heading element. If you wanted to use tabs it would require some type of border, or possibly a box shadow surrounding the link. I’ve instead opted to use a simple background effect on hover which sticks to the active link. Also the full tabbed posts widget is fixed at 250px width for the sake of this demo.

/** tabber widget **/#tabbed-posts { display: block; width: 250px; margin: 0 auto; padding-top: 25px;}#tabbed-posts .navlinks { display: block; padding: 14px 0; font-size: 1.4em; text-align: center;}#tabbed-posts .navlinks a { text-decoration: none; font-weight: normal; margin-right: 5px; color: #588bc4; padding: 5px 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}#tabbed-posts .navlinks a:hover, #tabbed-posts .navlinks a.active:hover { background: #dde8f4;}#tabbed-posts .navlinks a.active { font-weight: bold; background: #e8f0f9;}

Now this block of code shouldn’t come as any surprise. Everything can be styled nicely if we include floating elements with a clearfix container. The biggest difference comes within each content section of the page. I am using three divs with the class .tabcontent and they each contain an unordered list of links.

.tabcontent ul li { padding-bottom: 5px; padding-top: 7px; border-bottom: 1px solid #cbcbcb;}.tabcontent ul li h3 { font-size: 1.5em; line-height: 1.4em; font-weight: normal;}.tabcontent ul li h3 a { display: block; width: 100%; color: #6a6e7a; padding: 3px 0; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 0 #fff;}.tabcontent ul li h3 a:hover { background: #dde8f4;}.tabcontent ul li h3 .featuredpic { display: block; float: left; margin: 0; margin-right: 3px; padding: 3px 4px;}.tabcontent ul li h3 .featuredpic img { display: block;}

The first div is always displayed on pageload because it focuses on the “newest” posts. As you click between links it’ll auto-hide the main content in order to show the new list. Generally this would require additional classes but I’ve opted to instead write inline CSS styles for display:none. This helps when dealing with jQuery’s fadeIn() and fadeOut() methods that use inline styles anyways.

In any website this widget is basically useless without some JavaScript to handle the dynamic content switching. It isn’t too overly-complicated so anybody with some familiarity in jQuery should be able to follow along. I have broken down my script into two blocks of code so that it is easier to understand.

$(function(){ $('#tabbed-posts .navlinks a').on('click', function(e){ e.preventDefault(); if($(this).hasClass('active')) { return; }

When somebody clicks on any of the anchor elements within .navlinks we first prevent the default action from loading. We simply do not want the HREF value loaded into the address bar. I’m then checking if the clicked link already has a class of .active then we know it’s already displayed and we don’t need to do anything. If the clicked link is already active then the jQuery return command will end the function immediately without processing any further codes.

else { var currentitm = $('#tabbed-posts .navlinks a.active').attr('id'); if(currentitm == 'newpostslink') { var currentlist = $('#tabbed-posts-new'); } if(currentitm == 'popularpostslink') { var currentlist = $('#tabbed-posts-popular'); } if(currentitm == 'randompostslink') { var currentlist = $('#tabbed-posts-random'); } var newitm = $(this).attr('id'); if(newitm == 'newpostslink') { var newlist = $('#tabbed-posts-new'); } if(newitm == 'popularpostslink') { var newlist = $('#tabbed-posts-popular'); } if(newitm == 'randompostslink') { var newlist = $('#tabbed-posts-random'); } $('#tabbed-posts .navlinks a').removeClass('active'); $(this).addClass('active'); $(currentlist).fadeOut(320, function(){ $(newlist).fadeIn(200); }); } // end if/else logic }); // end event handler});

Otherwise the link is not active and we begin the transition process. My widget is fairly circumstantial based on IDs I’ve written into the code myself. You should update these ID values based on your own code samples and which labels can work well for your project. currentitm is a variable targeting the current link while currentlist targets the currently-active container div .tabcontent, which each use their own unique identifier.

We then generate new variables which should be displayed after the animation finishes hiding the old content. newitm pertains to the new link while newlist targets the new div container. The switching process is very easy by using addClass() and removeClass() coupled with the jQuery fading methods.

One point worth noting is the fadeOut() method has to complete before the fadeIn() animation will be called. To ensure this happens I have written a callback function which only runs after the fade out completes. Then inside this callback function we can execute the display of our new tab content list, all of which should complete animating within less than 60 seconds.

Live Demo – Download Source Code

I usually love finding these smaller related widgets in sidebar designs because they show just how much is possible in modern blog layouts. CMS engines like WordPress have open APIs that allow you to build these widgets from custom-coded SQL queries. I have been really impressed with modern design trends and I would expect these widget ideas to continue advancing further into the future.

View the original article here

35 Website Layouts using Flat Design Techniques

Sorry, I could not read the content fromt this page.

View the original article here

29 Web Layouts using Big Oversized Background Images

View the original article here

How To Build an Alphabetical Page Index using jQuery

View the original article here

Code a Dynamic Photo Login Box using Gravatar

View the original article here

Consider Using Web Design Templates

Web design is a complex process which, at times, involves a good number of people. For those who have a moderate level of experience the use of Web design templates might be the way to go. A web design template cuts out the step of CSS development while leaving a lot of room for customization of the website. The use of design templates is one ethical option for designers as long as certain rules are kept.

Web Design Templates Save Time And Money

The wise old saying tells us to avoid Inventing the wheel every day. It is much faster and more efficient to build a website out of previously constructed blocks. Web design templates give us a framework to build on. Web designers often keep a few different templates to use as the basis of their work. When they need to build a one column site or a site with a left sidebar they have a template on hand. They may follow this rule regularly unless they receive an order for a custom designed website. After you have chosen a template you can make your minor changes in a hurry through the style sheet. This allows the designer to offer an effective design to a customer at a lower price. This gives the business person with a reasonable level of skill the chance to make a site without the lengthy and complicated process of design from scratch.

A person with the proper knowledge to update a template finds great options at his finger tips. Why not use different templates to give a different look to the various sections of your website. Some marketers use different looking sites for each different product they sell. Templates make this a workable solution.

Web Design Templates Bring A Consistent Structure

It is possible to fall into a number of design traps if you are not completely comfortable with web design. Those who have at one time used Microsoft FrontPage are aware that it is possible to build certain constructions that look the same but have different construction. This may look good when viewed only with Microsoft Internet Explorer. The same page view with Firefox or another browser may find that it is all out of shape and balance. The design skill that goes into the building of a good template will save a person from this danger. The template will have proper structure and consistency in its design. It will probably have commented areas which show where to type in the text. This consistency makes a good website and saves us from the pain of getting negative comments on our work.

A Web Design Template Gives The Webmaster Fast Access For Changes

If you make frequent changes to your website you are likely in a hurry for them. Changes made through a web design firm may lag behind your schedule. When you have your site based on a good template and understand that template it is easy to make changes quickly. With some skill it is possible to change ads, add articles and change prices.

A Web Design Template Gives A Structure Engineered For Good SEO

Good web design is not just about good looks. The effective site must have a structure that is good for SEO. The search engine spiders give the most credit to the text that they find first. Your most important text must come before the less important things in the sidebar or the site will suffer. Good web designers know how to design HTML so that the page will get the best SEO advantage. This is very important in a world where competition is fierce. Find and use a good template that has SEO optimization and you will be out in front of those who do not.

What You Need For Using Design Templates

It is not necessary to have a lot f software to use design templates. You will need a text editor to modify the template. Anything from Notepad found on Windows computers to Adobe Dreamweaver will work. Notepad is very simple and offers no help in understanding design. Dreamweaver is a top shelf WYSIWYG editor. Dreamweaver will aid in modifying the template with very little skill required.It is very expensive, however. You may want an image program to edit images. You will need an FTP program to upload the finished pages and images to your server. That is about all you will need.

Web Design Templates Have A License

There are both free and paid templates available for your use. With a few exceptions the free templates will come with a licence that gives rules for its use. Creative Commons licenses are often used by the creator of free web design templates. The rules may require that you use the template for only certain purposes. Attribution is often required which means that you must give proper credit to the author and not claim the design for yourself. The license is often included in the template download. If the license is not included in the download or the website you may assume that there is no license.

Paid templates have licenses also. They may restrict the template to one use per fee. It it usually stated that you may not repackage the template and sell it for yourself. The license of the paid template usually allows you to use the template and claim the design as your own. One service that I have seen sells templates under a more liberal license which gives extended uses and greater privileges. Be sure to follow the restrictions in your template's license for your own peace of mind.

Web design templates offer persons with moderate HTML skills the opportunity to put together nice websites. They are quick and effective. Usually, the use of a well designed template will give a higher quality design than that which comes from Quick Design Wizards. If you have a basic level of HTML skill, the web design template might be your best bet.

by Greg Nicholl - Certified Web Designer

Web design is a complex process involving many important steps. Online and desktop wizards help you make a nice looking site without taking care of the important hidden factors. The hidden features add all the power to your site. The hidden factors, which are unknown to most beginners, help you get more traffic to your site and more customers. Imagine the frustration of learning how to make a website and finding that it wasn't reaching its goal of getting customers. Since your site is such an important part of your business you should have a professional give direction and quality control to your site before launching it.

Greg Nicholl is a qualified Website Designer offering Great Linux Hosting.