Web Developer Plus » Design

40 Fresh & Beautiful Examples of Websites With Large Backgrounds

Satbir — Mon, 09 Nov 2009 08:15:23 +0000

Using large sized pictures or illustrations as your website’s background adds a great visual appeal to your website’s design. Many web designers use large images as backgrounds as more and more users are now opting for high resolution monitors and high speed internet connections. Here’s a showcase of 40 Fresh and amazing websites that are using large background images.

1. The Pixel Blog

2. Copimaj Interactive

3. Flourish Web Design

4. Abduction Lamp

5. Morphix Design Studio

6. Final Phase

7. Make Photoshop Faster

8. WebSarga

9. Suie Paparude

10. Duirwaigh Studios

11. BlackMoon Design

12. Sepitra

13. Le Blog de Gruny

14. Piipe

15. Mozi Design Studio

16. Electric Current

17. Lora Bay Golf

18. Life Style Sports

19. ligne triez

20. Oliver Kavanagh

21. World of Merix Studio

22. Le Web Defi

23. How host

24. Productive Dreams

25. Gary Birnie

26. Glocal Ventures

27. GDR UK

28. Absolute Bica

29. Le Nordik

30. Leaf Tea Shop & Bar

31. Paul Smith

32. EwingCole

33. Dolphins Communication Design

34. Danny Diablo

35. Inner Metro Green

36. Matt Salik

37. Revyer

38. Yodaa

39. Dripping in Sunshine

40. Big Break ’09

13+ Fresh and High Quality Texture Sets & Collections

Satbir — Fri, 09 Oct 2009 08:34:01 +0000

Textures are very useful for web and graphic designers as they liven up the overall look and style of the design. Here are 15 fresh high quality texture sets that have been released in last 50 days which you might find useful for your next web or graphic design project. All of these texture sets and collections are free to use in personal or commercial projects.

1. Bokeh Textures Pack

2. 10 Free High Res Surface and Rock Textures

3. 2 Old PostCards Textures

4. 10 Free High-Quality Jeans Textures

5. 50 High Quality Free Leaf Textures and Resources

6. 75 High-Quality Free Wood Textures

7. Free High Quality Grunge Metal Textures

8. Free and High-Quality Cloud Textures

9. Glitter Bokeh Texture Pack

10. Fractal Textures

11. 12 Free and High-Res Grungy Wall Textures

12. Tree Bark Texture Pack

13. 60+ Totally Free Rusted Metal Textures For Designers

14. 9 Free Rusty Photoshop Textures

15. 11 High Resolution Free Fabric Textures

40 Fresh & Beautiful Examples of Websites With Large Backgrounds

10 Ways To Make Your Blog’s Comment Form Stand Out

Satbir — Tue, 22 Sep 2009 15:41:58 +0000

WordPress comment form is usually the left out portion of most blog designs. Most blog designers do not care to make the comment form unique and stylish but just create it in a hurry. Here are 10 ways with examples to make your blog’s comment form stand out from the crowd.

1. Change the Layout

Most wordpress theme developers do not give much thought into changing the layout of comment form and usually use the same layout as in the default wordpress theme. By creating a different layout of comment form, you can make your blog stand out from the crowd. Here are some nice comment form layouts you can get inspiration from to create a different and unique layout for your net blog design.

Name, Email, URL in line

Name, Email, URL in line at bottom

Name, Email, URL to right

Name, Email, URL to the left

Name, Email, URL after comment area

2. Using tabindex

tabindex is the attribute for form elements using which you can decide the tab order that is where to focus next when user presses tab to proceed to next input field. By default, tab index will be the order in which input fields are present in html code. But if you change the layout, it will be better to specify tabindex attribute with input fields.

3. Use label and fieldset

The comment forms should be accessible to all, even those who use screen readers, they should be able to comment on your blog. label and fieldset tags make your comment form more accessible as screen readers use information in label tag to specify input fields.

4. Highlight Field in Focus

Highlighting the input field currently in focus makes your comment form more usable. You can use the :focus pseudo CSS selector to define styles for highlighting field in focus.
But the CSS technique does not work everywhere as older versions of IE do not recognize :focus pseudo selector. For that You can use JavaScript. Here’s the sample code in jQuery to highlight field in focus.

$('input').focus(function(){
	$(this).css('border-color', '#000');
})
.blur(function(){
	$(this).css('border-color', '#666');
});

5. Add a Formatting Toolbar to Comment textarea

This one is not that necessary but if you want to enhance user experience by providing them with options to format their comment, you should consider adding a WYSIWIG text editor toolbar to your comment textarea. Here’s a nice plugin called TinyMCE Comments that utilizes the same editor which is used in WordPress Admin area.

6. Let Users Subscribe To Comments

This is a must have feature for any WordPress blog as it lets users know if anyone has replied to their comment or added some useful information to the article. You can use Subscribe to Comments WordPress plugin to add this functionality.

7. Show Errors Instantly

In WordPress, if comment form data has some errors, users are taken to a new page that only displays error message and nothing else. As a result user has to click back button and sometimes comment data is lost which will have to be typed again.

It is always a nice idea to have form validation on the spot using JavaScript and display error messages to user as he leaves a particular field rather than form posting back to server and then coming out with errors. Here’s a nice tutorial on adding form validation with jQuery.

8. Preview Comments

Letting the user have a chance to see what they are about to post prevents not only spell mistakes or grammatical errors but also gives them a chance to have a second thought over what they have written. There are some nice plugins like Live Comment Preview to add this type of feature into WordPress comment form.
But the question is not only the preview functionality but also where the preview will be shown, Lorelle VanFossen has written a good tutorial about live comment preview position.

9. Edit Comment After Posting

An option to edit comment after posting will certainly make your site more usable as user will have the option to correct any mistakes in the comment text or it is possible that user has changed his mind and wants to change or add something to the comment. WP AJAX Edit Comments plugin for WordPress will give users an option to edit their comments within set time interval after posting comment.

10. Spice Up With Graphics

Using some fancy graphics to style your comment form will give it a unique appearance and brand. Moreover, graphics say more than words and will help catch user attention and will motivate them to comment on your blog. Here are some spicy comment forms with appropriate use of graphics.

That’s It! With a litlle thought and time, you can make your blog’s comment form more usable and enhance the user experience.

Ultimate Guide To Speed Up Your Website

Satbir — Thu, 10 Sep 2009 11:39:44 +0000

Load Time of a website is a major factor that affects usability and user behavior. Internet users hate to wait for slow loading web pages while snappier web pages lead to more satisfied and happy user experience. But as the internet connections have gone faster in terms of speeds, many web developers do not think of optimizing their websites for speed, which is an important factor in terms of user experience. Here are some ultimate essential steps that you can take to optimize your web pages for speed and increase the usability of your web application.

1. Reduce Number of Files

Reducing the number of files within a webpage reduces the number of HTTP connections required to load the page leading to a faster page load. Here’s how you can reduce number of files required to load a web page:

Use CSS Sprites

Instead of using separate background images for various elements, combine multiple background images into one and use CSS Sprites technique to use that file. By doing this, number of HTTP connections will be heavily reduced which will speed up page load.

Combine multiple CSS/JS Files

If you are using multiple CSS/JS files on your webpage, consider combining them into single file to reduce the number of requests.

2. Reduce File Sizes

Heavier files will obviously take more time to load, so here are some techniques you can use to minimize file sizes.

Minimize size of HTML file

Use HTML minimization tool like HTML Tidy that removes excessive blank spaces and white space characters from HTML.

Minimize size of CSS/JS files

Use tools like CSS Clean, JSMin to minify JavaScript/CSS files by removing white space and line-break characters. Use it only when you are ready to move our code into production.

Use JavaScript Compressor

JavaScript compressors like Packer can pack up your JavaScript code and reduce the size of JavaScript by a good amount as they reformat the source code or obfuscate source code to remove long identifiers with short ones.

Optimize Images For Web

Before adding images to your web page, optimize them for web. If you have created or edited a graphic image in a software like Photoshop, use the Save Image for Web option(if available) to save images in optimized way.

You can also use tools like Smush.it, Online Image optimizer to optimize images for web.

3. Server Side Optimization

Cache Dynamic Pages

Caching your dynamic page outputs to static files will heavily reduce the time required for server to respond to request sent by the browser. Web servers like Apache are optimized to serve static content very efficiently. If you are using WordPress, use WP-Super Cache plugin to cache post pages.

GZip Components

Most modern browsers can accept gzipped content these days, use gzip compression on server side to compress html, CSS/JS content before sending it to browser, this will reduce the time involved in transferring content over network.

Use Expires header for static content

For content that is not likely to change over time like images, CSS, JS files, add an Expires header to use the browser caching facility. By setting an Expires date in future will tell the browser not to re request the specified resource and use it from cache.
Here’s the code to use for setting Expires header in Apache using .htaccess file:
Header set Expires "Thu, 31 Dec 2012 12:00:00 GMT" Header unset ETag FileETag None

Using Expires header for static content will significantly improve the experience of returning visitors to your site as all the static content will be served from local cache.

Add Trailing Slash to URLs

This method is lesser known but is known to improve performance. Always Add trailing slash(/) at the end of URLs in hyperlinks. This reduces the server overhead as it needs to remap the URL and sometimes a 301 HTTP Redirect is used, if trailing slash is not present.

Resolve 404 Not Found Errors

404 Not Found errors are just an overhead for server as well as browser. Check out your server logs or broken links if any to find out links that return Error 404 and resolve them to reduce overhead.

Always use favicon.ico

Most browsers look for favicon.ico in for a domain name to fetch the tiny icon for a website irrespective of whether it is referenced in html or not. And if you plan not to use a favicon, place an empty favicon.ico file in your website root folder so that it does not give 404 Not found error.

4. HTML Optimization

Another great way to speed up your web pages is to optimize the HTML output of your Web pages so that page renders as quickly as possible for better user experience. Here are some tips to optimize HTML code of your website for speedier rendering.

Load Stylesheets At Top

Always put stylesheets at top of your web page in the head tag as it makes page load progressively. As browser starts receiving HTML content, the rendering of HTML will be done with CSS styles applied.

Put JavaScript files at bottom

When browser encounters JavaScript files in HTML, it starts downloading that and halts other resources. So you need to put all of your JavaScript code at the bottom of your web page except some important functions required for rendering of Web page. It is better to put all DHTML goodies at bottom of page to speed up page loading.

Avoid Using @import

If you are using @import to reference stylesheets, then stop using it as @import is equivalent to loading stylesheets at bottom of web page. Always use to reference stylesheets.

Avoid CSS Expressions

CSS Expressions might sound useful, but they are highly inefficient in the way they are evaluated by browsers. Browsers evaluate CSS Expressions on page load, page scroll and each time mouse is moved. A single CSS expression on a standard web page is likely to be evaluate thousands of time by browser. You can check that by using a counter within CSS expressions.

Specify Image height width

Always specify width and height within img tag so that browser has information about size of image to display beforehand while it fetches content from server. Otherwise, browser will only come to know about size of image once it has loaded.

Avoid scaling images in browser

If you are using height and width property of img tag to scale a large image file to display in small size, then avoid using it as it puts extra overhead on browser while rendering the page. Instead use a thumbnail file of that image.

Put JavaScript/CSS into external files

Try putting your JavaScript/CSS code into external file instead of coding directly within HTML. Browsers usually cache external JS/CSS files which will lead to faster page loads for returning users.

5. Other Optimizations

Besides, above techniques here are some other useful techniques to optimize your web pages for speedier loading.

Reduce DNS lookups

Browser has to map every domain address to IP address using DNS lookup, and each DNS lookup takes between 20-120 milliseconds. So if you are using resources from multiple domains e.g. referencing images, objects, scripts from multiple domains, consider putting content onto your own server to reduce DNS lookups.

Serve Static Content From Multiple Hostnames

Since there is a limit as to how many connections browser can simultaneousely make with a particular server, use sub-domains to sever your static content utilize parallel download facility of browser. e.g. if your site is on say example.com, put your static content on multiple sub-domains like static1.example.com, static2.example.com etc. This does not lead to a DNS lookup since the domain example.com has already been resolved.

Serve Static Content From Cookieless domain

If your website uses cookies, which most websites use these days, you should be aware of the fact that for each request the browser makes to server, it also sends cookies with the request. This is just an overhead for static content like CSS/JS/image files. Serving static content from Cookieless domain will save this overhead. Many larger websites use this technique, Yahoo, for example uses yimg.com to serve static content. YouTube uses ytimg.com to serve static files.

Using a Content Delivery Network

Using a CDN significantly improves user experience as content is served from nearest location to the user’s location. This saves the network lag between far off servers and users and also distributes the load over multiple machines. CDN is a highly efficient technique but it comes at a big price and is used only by large websites and corporations.

Use Optimization Tools

Use tools like PingDom, Firebug, Y Slow, Google PageSpeed to test your web pages. They will provide you with helpful insight into loading time of your web page and will show you the problem areas with suggestions which you can use to optimize your web pages and make them snappier.

No related posts.

23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts

Satbir — Tue, 14 Jul 2009 08:09:37 +0000

Adobe PhotoShop is an indispensable tool for web designers as it gives a web designer enough power to achieve almost anything he can imagine. Today, i’ve compiled a list of 23 really inspirational PhotoShop web layout tutorials which you can use or take an idea to build some impressive web designs.