In April, Jeffrey Way provided us with a list of the “20 Mac Apps You’ll Use Every Day.” Not one to be biased, if you prefer Windows, this article rounds up the best programs available for boosting your productivity as a web designer.

1. Skybound Stylizer

While I prefer to use Firebug, I’m finding this “out of the box” CSS editor to be really helpful. Skybound Stylizer has been out for a while, but the latest version, 4.0, is now out with a lot of incredible features to help you in the development process. One of the core features is that it supports Google Chrome, Firefox 2 – 3.6, and Internet Explorer 6 – 8.

Stylizer is an exotic visual CSS editor that keeps you in the drivers seat while delivering enormous productivity gains.

2. Notepad++

Notepad++ is by far my favorite text editor for Windows. It’s fast, flexible and offers a variety of plugins. If you want to increase your productivity with this editor, be sure to install the ZenCoding plugin. You can download the plugin here.

Notepad++ is a text editor and source code editor for Windows, one main advantage of Notepad++ over the built-in Windows text editor, Notepad, is tabbed editing, to easily work with multiple open files.

Alternative

• e-TextEditor

3. IETester

IETester is the most stable and useful IE test tool available for Windows. With tabbing navigation, a source code viewer, and the debug bar, it’ll help you through the process of “happy” IE debugging.

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Alternative

• Browser Sandbox

4. Filezilla

Filezilla is the most popular and free FTP for Windows, and, of course, is my favorite FTP client for this platform. It’s lightweight and easy to use.

FileZilla Client is a fast and reliable cross-platform FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface.

Alternative

• SmartFTP

5. Dropbox

Dropbox is a multi-platform sync system, which is available for Windows, Mac and Linux. You can use it as a backup folder to transfer files to your friends and family. It’s amazingly intuitive and fast.

Dropbox allows you to sync your files online and across your computers automatically.

6. Jing

Jing is a great tool to share images or videos in the Windows platform. It’s free, but you can order the Pro version with even more features.

Use Jing to capture anything you see on your computer screen and share it instantly… as an image or short movie.

7. XAMPP

For PHP/MySQL development, Xampp automatically installs MySQL, Apache and PHP in your PC.

XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use – just download, extract and start.

Alternative

• Wamp

8. FoxitReader

FoxitReader is the primary PDF reader in my PC; it’s very fast, and supports tabs to read my PDF files.

Foxit Reader is a multilingual PDF reader. Both the basic and full version readers can be downloaded for free. Foxit Reader is notable for its short load time and small filesize, and has been compared favorably to Adobe Reader.

9. doPDF

Print-as-PDF isn’t installed by default on Windows. That makes this tool particular handy when you need to quickly send a document.

doPDF installs itself as a virtual PDF printer driver so after a successful installation will appear in your Printers and Faxes list. To convert to PDF, you just have to print the document to doPDF, the free pdf converter.

10. Breevy – Text Expander for Windows

Breevy is one of the most responsive, intuitive text expander applications for Windows. Whether you’re a web developer, blogger or {your-occupation-here}, you’ll find this one very useful. It’s not free, but will save you hours upon hours of typing! It’s worth the cost.

Breevy is a text expander and AutoText program for Windows that helps you type faster and more accurately by allowing you to abbreviate long words and phrases — saving you time and money.

Free Alternative

• Texter

11. Everything

Everything is a search program. As LifeHacker said, “It does what you really want when you hit Search in Windows.”

“Everything” is an administrative tool that locates files and folders by filename instantly for Windows, 20,000 files will take about 1 second to index. 1,000,000 files will take about 1 minute.

12. Miro

Miro lets you play nearly every single video format in the world; but it’s not just a video player: you can even subscribe to podcasts, video channels, etc. It’s my video player of choice. And yes! It’s free!

Miro is the only internet TV you’ll need—it’s an application that brings together thousands of shows from all over the web. There’s TONS of great content, lots of it in HD, and fresh shows are added all the time. You can watch and organize video feeds when you’re offline or traveling, find TV programs on sites like Hulu, and download from sites like YouTube. Miro downloads in HD, whenever it’s available!

Alternative

• VLC

13. KeePass

KeePass is a nice and lightweight password manager for Windows. The amazing thing about it is that you can sync the database with Dropbox – But what if I own a Mac as well? Okay, just install KeePassX. There are numerous cross-platform password managers available (even one more in this round-up), but KeePass is simple and effective enough to get the job done.

KeePass is a free open source password manager, which helps you to manage your passwords in a secure way. You can put all your passwords in one database, which is locked with one master key or a key file.

14. Sobees

Sobee is one of those applications you’ll always love. It allows you to get the most out of your social sites. You can choose multiple layouts to display your social data, as it offers LinkedIn, Facebook, Twitter and MySpace support — even a New York Trending News widget. Be sure to check this one out!

Enjoy the convenience of tracking all your different social networks and news from a single place and share, like or tweet what’s on your mind easily.

15. Aptana

Aptana is, in my humble opinion, one of the best Integrated Development Enviroments (IDE) for Windows. It has great HTML, CSS, and JavaScript intellisense, JavaScript debugging tools, built-in support for JavaScript libraries, a DOM outline viewer, file transfer & synchronization, live previewing (Safari and Firefox), and much more.

Aptana Studio is the industry leading web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.

(Available for Linux and Mac)

16. Picasa

Picasa is a must have if you want to organize and share your photos on the internet. It’s light-weight, free, and just works!

Picasa is free photo editing software from Google that makes your pictures look great. Sharing your best photos with friends and family is as easy as pressing a button!

(Available for Linux and Mac)

17. Google Talk

If you’re one of the GMail lovers (like me), then Gtalk is the perfect Gmail notifier for you. And of course, you can chat with your buddies as well!

Google Talk (GTalk) is a free-of-charge Windows web-based application for instant messaging and voice over internet protocol (VOIP), offered by Google Inc.

18. Adobe Photoshop CS5

Adobe Photoshop CS5 is, for obvious reasons, the greatest tool available for graphics / web design available in the industry. Photoshop is open on all of my computers… at all times.

Adobe Photoshop CS5 software is the ultimate solution for advanced digital imaging, delivering all the editing and compositing capabilities of Photoshop CS4, plus breakthrough tools that let you create and edit 3D and motion-based content.

19. Pidgin

Pidgin is a simple instant messenger. I use it to chat with my friends and family, similar to Adium for the Mac. AIM, MSN, Yahoo, and Facebook are supported.

Pidgin is an easy to use and free chat client used by millions. Connect to AIM, MSN, Yahoo, and more chat networks all at once.

20. InstallPad

Although I don’t use InstallPad every day, it’s still a great tool, and is worthy of being listed here. It helps you to install all of your favorite Windows applications at once.

InstallPad takes a list of your favorite programs and will download and install the ones you pick. It doesn’t need to ask any questions, so you can go do more important things. InstallPad can resume downloads you’ve canceled, and can even try and find the latest version of your program online.

Alternative

• Ninite

21. 1Password PC (Beta)

The hugely popular Mac password manager, 1Password, is currently in Beta mode for Windows! Whether you need to store hundreds of website passwords, or track your software licenses, 1Password will do the trick!

“1Password for Windows has been a dream of ours for a long time and we’re thrilled to open beta testing to everyone!”

Free Alternative

• LastPass

22. Bubbles

Mac users have access to a nifty app, called Fluid, which allows them to turn any website (Mint.com, Producteev.com, etc) into a desktop app. It’s very helpful. PC offers its own version of this service, via an app, called Bubbles.

“Bubbles is an application platform, based on Browser technologies. It detaches Web Applications from the classic Browser and offers them with the familiar accessibility, capabilities and always-on nature of Desktop applications.”

Conclusion

These are the applications I use nearly every day on my PC. Did I miss any? Don’t agree with me? What do you recommend?

Related posts:

1. Modal Windows In Modern Web Design
2. Ajax.org – Open Source Application Platform for RIAs
3. 50 Powerful Time-Savers For Web Designers

And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine’s readers. Whether you like lists or not: this one will probably help you find those little nuggets out there that will help you avoid headaches and stress. Below we present useful time-savers for web designers.

You may want to subcribe to Smashing Magazine’s E-Mail Newsletter (32,600 subscribers) to keep updated about new useful tools, techniques and resources. The newsletter is sent out once every two weeks.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Time-Savers For Web Designers

LaunchList
This tool helps you review important items before the big launch. By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. Alternatives: Ultimate Website Launch Checklist and Paul Boag’s The Ultimate Website Prelaunch Checklist.

Pencil Project: Sketching and Prototyping with Firefox
Pencil is an open source GUI prototyping tool. It contains built-in stencils for diagrams and prototyping, on-screen text editing with rich text support as well as standard drawing operations. Works in Firefox 3.5+.

Zootool
Zootool is a bookmarking website and tool for collecting images, documents, links and videos from anywhere on the Web. A bookmarklet allows you to collect items quickly and easily. You can then tag and organize your saved items in Zootool’s back end. You can also integrate Zootool with Tumblr, Twitter, Delicious and FriendFeed to share what you find. Screenshot via MacStories.

Bounce
A fun and easy way to share ideas on a website. The tool allows you to make notes, write feedback in an overlay of every site and then share your notes with friends.

Ninite Batch Installer
Ninite lets you pick your favorite software from among an extensive list (Web browsers, messaging, media, images, documents, security, runtimes, file sharing, utilities, compression, developer tools and more), creates a batch installer for them and then installs them for you automatically. Alternative: Allmyapps allows you to bundle your favourite applications, install them in a single click and reinstall them whenever you need to.

Support Details
When in doubt, send your customers to this tool. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved.

MugTug’s Darkroom
When you need to modify a picture but don’t have your favorite software on hand, you can use the all-in-one image processor MugTug’s Darkroom which was created for photographers. You are able to adjust levels, white balance, exposure, contrast and saturation and apply a few photographic effects. In addition, Darkroom allows to upload pictures from Picasa and Flickr. Alternatives: Pixlr and Sumo Paint.

Visual Website Optimizer
Visual Website Optimizer is undoubtedly the best A/B, split and multivariate testing software ever created by mankind.

Keyonary
This site a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 250 Photoshop shortcuts have been added. Simply type the name of application in the search box, and it spits out a long shortcut list.

gridr buildrrr
This generators allows you to choose the grid for your layout, preview it online and generate the CSS code right away.

Instant Blueprint – Create a web project framework in seconds.
Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!

Hummingbird
Hummingbird lets you see how visitors are interacting with your website in real time. Hummingbird is built on top of Node.js, a new javascript web toolkit that can handle large amounts of traffic and many concurrent users.

jsFiddle
Online Editor for the Web, with support of JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. The tool lets you save and run your applications within the web browser.

String: create a multi-language website or app
Essentially, String is a version control for localization. This tool allows you to manage your language files – from PHP to PO to Rails to iPhone apps. You can invite users to translate your content, and keep track of changes. You can add new sections and languages as you go and then download your updated language files and place them in your app.

Titanpad
This tool allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color. Editing is done in true real time. Nice solution for everybody who works collaboratively on text documents, whether in the same office or on the other side of the world.

Pixelnovel Timeline: Version Control for Adobe Photoshop
This tool basically integrates a Subversion client in Adobe Photoshop with an Adobe Photoshop plug-in. You can preview versions right in Photoshop and manage version control directly from Photoshop. Not free.

0to255
A simple tool that helps web designers find variations of any color. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.

Load Impact: Website load/stress test
The tool lets you find out the performance limits of your website before you learn the hard way. It is an online service that simulates users accessing your site and creates test report graphs to find out how many users your site could handle.

Ideone: Online IDE & Debugging Tool
This tool is an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages, among them C++, Java, JavaScript, Perl, PHP, Python and Ruby. Nice alternatives online: PHP Anywhere (online PHP editor) and CodeRun (allows you to develop, test and debug ASP.NET, PHP and Ajax applications online).

Online Dummy Image Generator
This online tool generates dummy images for you site: you can specify size, background and foreground colors, image format and add custom text. You can also use shortcuts for several standard dimensions including ad sizes (mediumrectangle, skyscarper, leaderboard etc.), screen resolution sizes and video standards (ntsc, pal, hd720, hd1080).

HiFi RegExp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.

Tableizer
Clients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain. This tool generates HTML tables out of spreadsheet data. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and you have a properly formatted HTML table for your data.

FollowUpThen: Easy Email Reminder
If you don’t mind sending your e-mails to a third-party, try this tool for easy email reminders. On your next email just include time-interval@followupthen.com and the tool will follow up after the time interval you specify. No account is required.

Divine: Conversion tool from PSD to HTML
Divine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. Absolutely free.

Kaleido
This tool allows you to create meaningful visuals for code and can be used to plan, organize and navigate code in a more intuitive way.

Sketchpad
This application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.

Unicode code converter
Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.

Grid System Generator
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

ud.com namecheck
The tool checks availability of social usernames, domain names and trademarks.

Typograph — Scale & Rhythm
A useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.

ColorBrewer Intro – Selecting Good Color Schemes for Maps
ColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics.

CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier removes malicious code (better known as XSS) and make sure your documents are standards compliant.

Rendera
Rendera helps you learn HTML5 and CSS. Type in your HTML code and see it rendered in real-time. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports. The tool supports HAML and SASS, too.

RegExr
An intuitive tool for learning, writing, and testing Regular Expressions.

try ruby! (in your browser)
This tool allows you to try out Ruby code in the prompt command line online. It supports Ruby’s built-in methods, and contains a step-by-step tutorial for Ruby newbies.

Google Command Line
GoogleCL is a command-line utility that provides access to various Google services. It streamlines tasks such as posting to a Blogger blog, adding events to Calendar, or editing documents on Google Docs.

Tiny Fluid Grid
Simple tool that generates code for fluid grid-based layouts.

Fonolo.com
This online tool lets you skip the phone menus for hundreds of companies and makes it less frustrating to call large companies. For business owners, Fonolo allows your customers to actually see your phone menu options, before they call you.

Producteev: Creating To-Do Lists with Emails
Forward your important emails to task@producteev.com and the tool will create to-do lists on the fly and send you alerts when needed. It can be integrated in E-mails, IM, Web, iPhone, Gmail, Google Calendar etc.

AddUse – User research made easy
AddUse is a web based tool that helps you create, manage and present your user research in a simple, easy to use and cost efficient way. It’s a tool to use at any given moment in your development process. It presents the results from your user tests, surveys and questionnaires in a graphical way, efficiently helping engineering, marketing and management groups make the right decisions.

bookwhen
Online registration for events, workshops, classes and courses. The free version allows for 150 events with 300 bookings per month.

Further useful tools

see[Mike]code: tool for remote coding interview
This simple tool lets you conduct a short coding interview remotely: it creates a disposable page for the job candidate and allows you to discover people who struggle to code on big or small problems.

jsdo.it
This tool allows you to write code your browser, fork and modify any code, fix bugs and add features and also ask the community about your problems.

JavaScript Error Tracking
The service tracks JavaScript errors that occur on your site and provides you with a stack trace to help you debug. Similar errors are grouped together.

Old Version
Old Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.

Onbile
Onbile is a free platform for creating and managing your Mobile Website version for iPhone, Android and Blackberry users

Free Bookkeeping, Accounting, & Tax Services; Self Employment & Freelance Success
Easily import from online accounts to put your bookkeeping on autopilot and prepare taxes. Get up-to-date reports that give you visibility into your P&L, income, and expenses.

iSendr
iSendr lets you send files to your friends directly, without uploading to a server.

seekWP
WordPress documentation search engine.

speedtracer
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

the Awesome Highlighter
This tool lets you highlight text on web pages and then gives you a small link to the highlighted page.

OpenWith.org
This page provides detailed information about most file extension and links to free programs that can open and create each type of file.

Last Click

Kuku Klok
Online alarm clock and wake-up call for those of us who often work too much and fall asleep in front of the screen. Open the website, select the desired alarm time and set your favorite wake-up call. Keep the browser tab open. Happily, this online alarm clock works even if your Internet connection goes down. The available sounds are “Classic Clock,” “Electronic,” “Slayer Guitar,” “Military Trumpet” and “Cockerel.”

What the Hex?
Among the variety of methods of representing color values, some are easier to identify than others. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then this is a simple game for you. All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers.

Related posts:

1. 50 Extremely Useful And Powerful CSS Tools
2. 5个你应该知道的针对IE的 CSS HACK
3. 15 Essential Checks Before Launching Your Website

One of those limitations is of course the fact that an image wider than your screen goes out of bounds. Very annoying! And it creates ugly scrolbars.

As you might know, I have created a Panoramic Photoviewer in Javascript to fix the problem of images going out of bounds. And I thought to myself: “Why not try and implement PhotoNav on top of Lightbox?”. With this, even super large images would be viewable.

I created LightNav for this. It runs along Lightbox without changing the script, so you can always update Lightbox if needed.

Download
LightNav zip-archive Example
Open the LightNav examples

The example page is located here:
http://www.gayadesign.com/scripts/lightnav/

And the archive is downloadable here:
http://www.gayadesign.com/scripts/lightnav/lightnav.zip

Using LightNav is easy! I’ll tell you what you need to do in this step-by-step guide:

1. Download Lightbox and upload to your webpage.

Go to the Lightbox project page and download the zip: http://www.huddletogether.com/projects/lightbox2/#download

The files from the zip we are going to need are: lightbox.js, lightbox.css and the images in the images folder.

For this installation, we don’t need the prototype.js and scriptaculous.js file from this zip.

Now upload the files to your server. Check the lightbox.js file in the top section for the image paths. These settings are on line 49 and line 50. They have to be set correctly to get a good output on your page.

2. Download and use Scriptaculous.

Go to http://script.aculo.us/downloads and download the latest version of scriptaculous.

Upload the files to your server.

Now it’s time to make use of Lightbox and Scriptaculous on your webpage by placing this code in the head section of your webpage:

Fix the paths to the files as they are on your server. Now you have included the technology which will make Lightbox work. Now it’s time to include LightNav to upgrade Lightbox!

3. Download LightNav and use with Lightbox.

Download LightNav here: http://www.gayadesign.com/scripts/lightnav/lightnav.zip

Upload the contents to your server.

Now place the following code in the head section of your page (under the previous tags!)

LightNav will overwrite some functionality of Lightbox and make use of PhotoNav to create a navigation feature.

You are basically done now! But if you can configure LightNav to your needs in the following part of the lightnav.js file:

The maxWidth and maxHeight give the maximum width and height (in pixels) of the LightBox window, making it impossible to get bigger than that.
If you set these variables to 0 LightNav will create a width and height according to the browse window of the user, which will also fix the out of bounds problem!

I hope I helped some people with this. Follow my feed if you wish to see more Javascript tweaks.

Happy tweaking your Lightbox!

Related posts:

1. jQuery.popeye – an inline lightbox alternative
2. Modal Windows In Modern Web Design
3. Mollify – Web File Manager Hosted in Your Web Server

Free Bokeh Textures

Take a look at these incredible free bokeh textures available on the web.

Five Colourful Bokeh Textures (5 Textures)

Out of Focus: 30 Free Bokeh Textures (30 Textures)

Colored Grungy Bokeh Textures (5 Textures)

Raining Light Bokeh Pack (11 Textures)

Crazy Firework Bokeh Stock (1 Texture)

Heart Bokeh Textures (3 Textures)

Bokeh Collection (4 Textures)

Bokeh 2 (1 Texture)

Bokeh Textures Pack (10 Textures)

Bokeh Texture 3 (1 Texture)

High Resolution Bokeh Texture (5 Textures)

Bokeh Texture Pack 001 (20 Textures)

Rainy Night Street Light Bokeh (1 Texture)

Grungy Bokeh Pack (6 Textures)

Bokeh Collection II (5 Textures)

Bokeh Stock Images (11 Textures)

Glitter Bokeh Texture Pack (33 Textures)

Bokeh Texture Pack 002 (10 Textures)

Bokeh Pack 2 (27 Textures)

Regularjane’s Bokeh Textures (11 Textures)

Christmas Bokeh Stock Pack (15 Textures)

Bokeh Super Pack (14 Textures)

Bokeh Pack 5 (22 Textures)

Bokeh Texture Pack 003 (14 Textures)

Bokeh Pack 6 (30 Textures)

My First Bokeh (1 Texture)

Bokeh Texture Pack 004 (7 Textures)

Bokeh Pack 3 (39 Textures)

Royale Bokeh (4 Textures)

Lensbabie Bokeh Stock 2 (14 Textures)

Bokeh Texture (1 Texture)

Lensbabie Bokeh Madness Stock (13 Textures)

Bokeh Textures (5 Textures)

Bokeh Textures (10 Textures)

Freaky Distorted Bokeh (5 Textures)

Night Bokeh (4 Textures)

Color Bokeh Textures Pack (4 Textures)

Bokeh Pack 4 (20 Textures)

Bokeh Bubbles Icon Textures (24 Textures)

Grungy Abstract Bokeh Textures (3 Textures)

Heart Bokeh Pack (6 Textures)

Water Bokeh Stock (9 Textures)

Natural Bokeh (4 Textures)

Bokeh VII (3 Textures)

Premium Bokeh Textures

Take a look at these incredible premium bokeh textures available on the web.

Circle of Bokeh (1 Texture, PSD Included – $3)

Light Bokeh Abstract Background (14 Textures/Backgrounds, PSD Included – $4)

Bokeh Effect Background (10 Textures/Backgrounds, PSD Included – $3)

60 Bokeh Abstracts (60 Textures – $5)

7 Bokeh Textures (7 Textures – $6)

Bokeh Backgrounds (4 Textures – $3)

8 Bokeh Effect Backgrounds (8 Textures/Backgrounds, PSD Included – $4)

44+ Mosaic Bokeh with Pluses (44+ Textures/Backgrounds, PSD Included – $5)

8 Colorful Abstract Backgrounds (8 Textures/Backgrounds – $8)

Related posts:

1. 9 Tips for a Perfect Portrait Background
2. How to Create Glass Transparency in a Cute Photo Manipulation
3. Free CSS Layouts And Templates

The modal window has many advantages. For example, when a modal window contains a smaller element, the user doesn’t need to load an entirely new page just to access it (another way to achieve the same effect is e.g. by using AJAX-based tabs). By providing modal windows, you improve the usability of your website. Having to load pages over and over will annoy most users, so avoiding that is definitely a good thing. Modal windows also allow you to save space by getting rid of large elements that don’t need to be on the main page. For example, rather than putting a full video on a page, you can just provide a link, thumbnail or button of some sort.

In this article, we’ll go over best practices and trends for working with and building modal windows. We’ll also provide numerous examples of well-constructed modal windows and a few scripts to get you started with building them.

You may be interested in the following related posts:

• 30 Scripts For Galleries, Slideshows and Lightboxes
• How To Use Help Elements To Improve Your Designs
• 8 Layout Solutions To Improve Your Designs
• Designing Drop-Down-Menus: Examples and Best Practices
• Breadcrumbs in Web Design

[By the way, did you know there is a brand new Smashing WordPress Book? Push WordPress past its limits!]

When to Use Modal Windows

Modal windows are an excellent structural element, but they don’t work for every type of content or media. Here are few elements for which you should consider using modal windows.

Lightbox for Images/Videos

The most obvious use of modal windows is for the lightbox, which showcases images and video in a clean and usable fashion. By using a lightbox for images, users don’t have to load a new page just to view a single image or video. Modal windows also save space in the content layout by allowing you to show only the thumbnail of an image or video, which opens the modal window when clicked. By using a thumbnail instead of the entire element, you take up much less space and the layout looks more organized.

Furthermore, you would usually blur or fade out the background behind a modal window, putting the focus on the image or video itself, thus creating an excellent environment in which site visitors can view the media. For details on fading and blurring out the background of a modal window, see the styling practices outlined below.

When using a lightbox for an image gallery, be sure to link every image to the same lightbox, providing “Next” and “Previous” buttons to allow users to navigate the image set with ease. The user then does not have to close and re-open the modal window to view each image in the gallery.

Contact Forms

One often sees contact forms contained in modal windows. Modal windows work well for this purpose because you don’t have to create a full page for the function. In terms of usability, it is important for contact forms to be immediately available and easy to find. By using a floating window, contact forms are easily accessible on each and every page. Contact forms are generally small, so they will fit quite nicely in these windows.

Sign-Up/Log-In Forms

Instead of creating a separate page for users to log in to and sign up for your website, you can use a modal window, which is actually often used for this purpose. This approach makes the form available on each page for easier access. You can include a link to the log-in window in the header of the website.

Alerts/Notices

When you want to alert users of a critical function or an action taking place, the best way to do so is through a modal window. When a modal window opens on a page, the user cannot ignore it because it will appear directly in the middle of the screen, right where the user is looking. Furthermore, the rest of the content will be faded out and disabled, so the user can’t do anything else until they look at the window and click to close it. In the screenshot below, you can see a modal window being used to alert users to a download.

Please notice that you should not use modal window as an alternative pop-up-approach. Please make sure to alert your visitors only in case something cruical to the current browsing session has taken place. In many situations, a simple faded block in the layout would work better than a modal window.

Help Elements/Tips

Additional help elements and tips aren’t essential to the functionality and navigation of a website, so you don’t want them to take up space and get in the way of content. Not all users want to use them anyway. However, they need to be conveniently located for those who do want to use them, so it seems reasonable to show help elements and tips in modal windows. Users can easily open and close them, without them getting in the way of content and functionality.

Here below is a good example of a help element in a floating window. This window is much smaller than the other ones we’ve seen; but it contains similar functions. For example, a semi-transparent border for visual separation and an “exit” (close-) button in the top-right corner.

Search Boxes

This is a less common practice, but you will occasionally see modal windows containing search boxes. Advanced search functionality can take up quite a bit of room, so to prevent a large search box from taking space away from the content, you can put it in a floating window. You can see this in practice in the screenshot below.

Embedding PDFs

Sometimes you need to embed files on your website, such as a PDF of your résumé. Instead of providing a link that users can click on to download the PDF to their computer or embedding the PDF some other way, you can use a modal window for the same purpose. This way, the PDF can be easily viewed without disrupting the user’s experience of the website. By blurring the background, you also bring focus to the PDF, which improves usability.

Usability and Styling Practices

The following is a list of usability and styling practices and trends to keep in mind when building your modal windows.

Blur and Fade Out Background of Window

Foremost in importance for usability and styling is fading out the page behind a floating window. You will see this practiced nearly everywhere, most often with lightboxes for media. By fading out the page, you bring all of the user’s attention to the floating window. If the background doesn’t fade, the user may not even realize right away that the window is “floating” above the page and is not a part of the main layout. The appearance of a window physically floating above the page also gives your website dimension. It looks cleaner and eliminates confusion. Overall, the fading provides much needed separation between the window and the page, improving functionality and usability.

Make sure the fade is heavy, but leave a slight opacity, so that the user knows the page hasn’t disappeared. For example, a black fade with about 75% opacity would work well. But for websites with a white background, fade the page with white with a slight opacity, and use a drop-shadow.

Sometimes you will see a modal window that doesn’t fade out the entire page but instead has a strong drop-shadow below it to add dimension. This creates the same effect and provides a similar visual separation. You can see this technique used perfectly in the screenshot below.

Exit Strategy: Button, Click Outside Window, Escape Key

To improve functionality, always provide an exit button in an upper corner of the window. It is standard practice to use a simple circular button with an “x” graphic, which is clean and quite obvious for the user. In the lightbox shown below, you can clearly see the exit button.

Other methods of allowing users to close modal windows is to let them click outside the window on the page behind, to click on the displayed element in the modal window or to hit the Escape key once.

Disable All Other Page Functions

Disable all functionality of the page behind the window. It should be focused out, and no buttons should be able to be clicked when the modal window is open. The floating window should be separated from the rest of the content, so disabling the page below creates a better separation. Keeping page scrolling functionality is a good idea, though, so that users have at least some freedom to refer back to the page if needed.

Using Transition Effects

Transition effects are small details that look very nice if done correctly. One good transition effect for modal windows is fading in and out. But don’t overdo it to the point of annoying users. Keep the fade brief but slightly noticeable.

In the example below, the blurred gray backdrop fades in and out, creating a great effect.

Scripts, Tools and Plug-Ins For Lightboxes and Modal Windows

When you start the process of integrating modal windows, you’ll probably want something to build off of. Here are 11 excellent jQuery scripts and plug-ins on which to base your modal windows. Each has its own unique features and functions, so check them all out.

Fancy Lightbox
This is one of the better lightbox jQuery plug-ins. It’s well styled and very functional. It has clean styling, labeling features and website integration, and it works with AJAX.

Lightbox 2
This is the original lightbox script, built only for images. It’s simply styled and supports image set viewing.

Facebook Image/Content Viewer
Here is an excellent script, based on Facebook’s floating window. This one supports images and content and is styled similar to Facebook’s well-known window.

Woork Mootools Lightbox
This excellent tutorial from Woork shows you how to create a simple lightbox script. The script includes image set functions and label features.

nyroModal jQuery Plug-In
This simple window plug-in supports all types of media and file scripts, including AJAX. It also has some great show/hide effects.

jQuery Alert Dialog
This jQuery plug-in is for alert and dialog boxes. It has numerous functions and works very nicely for sending messages to users.

LightWindow
Here is a comprehensive lightbox script with many features, such as PDF embedding, multiple image gallery support, SWF implementation and more.

Prototype Window Class
Another in-depth set of scripts with different functions, such as dialog boxes, log-in windows, AJAX content windows, image lightboxes and more.

ThickBox 3.1
One of the more popular lightbox tools, ThickBox. It works with images, inline content and AJAX.

prettyPhoto
A well-styled image lightbox that works nicely with image sets.

jQuery Expose
This is a little different than a modal window script. This one exposes selected HTML elements. When you click a specific element, the rest of the page fades out. This is an excellent alternative to the modal window: it still fades out the page to bring focus to an element.

Showcase of Modal Windows

Grooveshark
Grooveshark is a well-constructed and well-styled application, and the modal windows are no exception. A modal window, with the page faded out, is used for the log-in and sign-up functions.

Digg
Digg is another user-generated website with log-in and sign-up functions in a floating window. The log-in link is in the header of the website. Notice that a semi-transparent border is used instead of a fade and drop-shadow. The border provides more visual separation.

Apple Movie Trailers
Apple uses modal windows in many places. Here you can see a window used for viewing movie trailers. The window is built just right so that large video files don’t impact the performance of the window.

Apple iMac: Design Gallery
Another example of modal windows on Apple’s website. These have a clean, simple style with a strong drop-shadow for visual separation.

Espionage
Another good example of an image lightbox. In this one, the image extends to the edge of the window, and the exit button is overlaid directly on the image. No border is necessary here because of the strong color contrast.

Daylite 3
A good example of a window with the background faded out. Multiple pages of content are integrated here in a single modal window.

Behance
Another contact form, this one with the familiar “Send to a friend” element, which is usually put in a modal window. Because the website has a mostly dark background, a light semi-transparent border is used for separation.

Facebook
Facebook’s very recognizable modal window. This one contains information linked to a help element in the sign-up form. Again, a strong semi-transparent border.

KISSmetrics
Here is an excellent log-in form in a modal window. The form is well styled and contains help elements to improve usability: just because the log-in function is in a modal window doesn’t mean you can neglect usability.

Nasi Briyani Lounge
Another log-in form, this one a little different. Instead of a full modal window, this is just a simple pop-up window with a small form.

Pixelight Creative
A lightbox on a freelancer’s portfolio website. When you click one of the portfolio items, a larger view opens in a lightbox.

Capo
Another well-styled window, this one a video featuring a tour of the software, which is a common practice. This one also contains a simple border with a slight drop-shadow.

Accept-Ideas
This floating window is attached to the search box. When you type a query, the results show up in the modal window itself. The window has basic functionality, including an exit button and border.

The Typographic Desk Reference
A very simple modal window with a strong shadow that adds a lot of depth.

Evernote Web Application
This screenshot shows an alert that you get when you open Evernote’s Web application. Notice how the page fades out strongly, which puts all of the focus on the window’s content.

Iceberg
Another sign-up form in a floating window. This one doesn’t have a fade or shadow but does have a border for separation.

Viewzi Corporate
A beautifully styled modal window. Notice the large clean exit button in the upper corner, the generous padding in the window and the semi-transparent background.

Mail Chimp
This lightbox has a semi-transparent border, and the page fades out.

The Resumator
Notice in this one how strongly the background of the image contrasts with the page background. A label is used here but not attached to the window, creating a very nice look.

Checkout App
A well-styled image modal window. This window has a slight drop-shadow to add depth and a solid border to provide more separation and frame the image.

Pixelmator
Another example of a nice download alert. This alert pops up immediately once the download starts. Notice the excellent styling, such as the slight opacity of the window.

Ballpark
Here is a modal window for a video, common for corporate and software websites such as this one. You most often see QuickTime and SWF videos in modals, but this one embeds a video from Vimeo. A great fade in and out transition, too.

Backpack
Another window with a video. Notice again how the page fades to a lighter rather than darker color.

Guifx
An image lightbox for a portfolio, always a great idea if you want to include larger images to show details of your work.

Related posts:

1. 20+ Required Windows Apps: Web Designer’s Choice
2. Web Design Trends For 2009
3. Web Design Trends for 2010