Posts Tagged ‘grid’

Mobile Toolbox for WordPress (Tutorials, Plugins and Themes)

Mobile browsing clearly does have its limitations, mainly from its smaller physical design, but it also limited by web sites not having a mobile version tailored for the smaller screen. Current mobile web browsing stats stands at 4.5% of total world-wide internet usage and, with the prediction for the next five years being that more users will connect to the internet over mobile devices than desktop computers, it is now time to act and make your website mobile friendly.

Of course, it does depend on the size and complexity of your site, but creating a mobile version of your site does neither have to be over-expensive nor very time-consuming, especially if your site has been built using WordPress. As everybody knows, WordPress is by far and away the most popular CMS, and with it comes a thriving community of designers and developers that constantly push its boundaries further and ever-more improving its functionality. Its community has realized for some time that the mobile phenomenon has been coming, and as such does have a multitude of themes, plugins and resources available that will help you create a mobile version of your site with the minimum of fuss.

In this article, Mobile Toolbox for WordPress, we highlight themes (free and premium), plugins and easy-to-follow tutorials that will help you create a mobile version of your site.

iPhonsta 1.1

iPhonsta 1.1iPhonsta 1.1
Despite its name iPhonsta does not exclusively only work on the iPhone, it works on most mobile devices, like Android, Palm Pre and Blackberry. The theme has a fluid layout, configures the font size automatically and is WordPress 3 compatible.
iPhonsta Home →View the Demo →

Smooci 2

Smooci 2Smooci 2
This basic free theme works in conjunction with the Smooci (WordPress on Mobiles) plugin which is used to display the mobile optimised theme when your WordPress site is visited via a mobile device.
Smooci 2 Home →View the Demo →

WordPress Mobile Theme

WordPress Mobile ThemeWordPress Mobile Theme
This is a minimalistic and lightweight theme that will fit perfectly with all the mobile phones resolutions. The three key features of this theme are: You can choose your own theme color from the theme options; The theme can have 100% width if you want the theme to fit on every mobile phone, or you can define a fixed width in pixels to target special users; The front page will dynamically create thumbnails for your posts.
WordPress Mobile Theme Home →View the Demo →

jQuery Mobile

jQuery Mobile
Built with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberry or Android.
jQuery Mobile Home →View the Demo →

Mobius

MobiusMobius
Mobius is a feature rich free theme that is compatible with all touchscreen mobile phones (iPhone & iPod Touch, Android, BlackBerry, Windows Phone, Palm Pre, Symbian…). It comes packaged with three variations (Sky Blue, Amethyst & Rain Forest), its widget ready, native support of non-web fonts (@font-face) and also has optional Twitter and Facebook icons.
Mobius Home →

The dotMobi WordPress Mobile Pack

The dotMobi WordPress Mobile PackThe dotMobi WordPress Mobile Pack
The dotMobi WordPress Mobile Pack is a complete toolkit from dotMobi to help mobilize your WordPress site and blog.
It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.
The dotMobi WordPress Mobile Pack →

Carrington Mobile

Carrington MobileCarrington Mobile
Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices.
Carrington Mobile Home →View the Demo →

touchPress

touchPress
A beautiful 4 in 1 theme (Blackboard, Wood, Leather, Nature), with 2 widget ready areas, gestures based navigation and auto-resizes images. Automatic detection if a user visits your website from an iPhone and iPod touch, thanks to its built-in plugin that comes packed with the theme.
Price: $22
touchPress Home →

1ST Giant Leap

1ST Giant Leap
1stGiantLeap Mobile is a HTML5 /CSS3 template tuned to look perfect in mobile browsers. The markup is device orientation (landscape/portrait) sensitive, so when you change device orientation by rotating it 90 degrees CW or CCW this template will look nice.
Price: $15
1ST Giant Leap →

WPtouch 2.0 Pro

WPtouch 2.0 Pro
WPtouch 2.0 Pro allows you to setup a feature-rich and fast version of your website for touch-mobile devices with just a few clicks. It does come packaged with a wide variety of pre-built themes, or you could build your own custom theme with WPtouch’s Skeleton theme template. It scales post images, captions and videos automatically and breaks up content with ‘Load More’ links that use ajax to make browsing easier for visitors.
Price: Its FREE for the basic version, $39 for Pro, $69 for the Pro 5 pack and $199 for the full developer pack.
WPtouch 2.0 Pro Home →

Mobility WordPress Theme for Web and iPad

Mobility WordPress Theme for Web and iPad
Mobility is an iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin. Both the regular and iPad versions have seven color options and the choice between a single or three-way JavaScript slider on the homepage. The iPad version can switch between portrait and landscape mode upon rotation.
Price: $30.
Mobility WordPress Theme for Web and iPad Home →View the Demo →

WordPress Mobile Theme Framework from Obox

WordPress Mobile Theme Framework from Obox
Obox Mobile is a WordPress Mobile Theme Framework that gives your site a unique and beautiful layout which is compatible for mobile devices. Obox Mobile comes packaged with two Obox Themes (MobiLight & MobiDark) as well as WooMobile from WooThemes.
We currently use Obox Mobile for Speckyboy.
Price: $50.
WordPress Mobile Theme Framework Home →View the Demo →

Simple Mobile

Simple Mobile
Simple Mobile is feature-rich theme that works parallel with another theme and presented to mobile users only. It comes with 8 color schemes, collapsible multi-level menu, WP 3.0 custom menus support, 43 social media icons, a slick Twitter implementation (optimized for speed) and much more.
Price: $20.
Simple Mobile Home →View the Demo →

PadPressed

PadPressed functions as a WordPress plugin and allows publishers to take their content and make it perfectly formatted for the iPad. The most important aspect of PadPressed is its 100% design for the tablet touch experience. Each skin plays to a specific touch dynamic. SwipePad focuses on swiping to advance and a swipe featured slider. It notices the orientation (portrait or landscape) of a reader’s iPad.
Price: $49 for a single license and $149 for a developer license.
VIDEO
PadPressed Home →View the Demo →

My Mobile Page

My Mobile Page
The My Mobile Page WordPress Theme is a minimal mobile WordPress theme with a modern look and a lot of cool features. This theme can be used for personal mobile pages, web designers mobile pages, artists mobile pages and many other. The theme use automatic resolution detection so you can use for small screen resolutions and bigger resolutions.
Price: $20
My Mobile Page Home →View the Demo →

On Demand Mobile

On Demand Mobile
This is a joint collaboration between WPtap (plugin developers) and Press75 (theme developers) to release a mobile version of the video theme On Demand, providing a fully featured video solution for mobile platforms.
Price: On Demand Mobile for $49, or with On Demand iPad for $90.00
On Demand Mobile Home →View the Demo →

Tap News – iPhone App Style Mobile Theme

Tap News - iPhone App Style Mobile Theme
Tap News is an iphone-app style mobile plugin/theme package that instantly converts your wordpress site into a mobile web-application experience. It is specially designed for iPhone/iPod touch, Android, and Blackberry touch mobile device. The theme features elegant iPhone-style sliding layout, and it will truly turn your site into a mobile application. Other features include thumbnail pictures, full support for twitter, social bookmarking, and email.
Price: $49
Tap News Home →View the Demo →

iBusiness iPhone-iPod Template

iBusiness iPhone-iPod Template
iBusiness is a website template designed especially for the iPhone/iPod. It comes with 9 different themes, 3 page templates, 3 widget areas, PSD source files, Twitter stream, and much more.
Price: $15.
iBusiness Home →View the Demo →

Video Theme for iPhone & Android

Video Theme for iPhone & Android
The Video Tube theme is specifically designed for video blogging and content sharing on your mobile site. It fully supportsthe iPhone/iPod Touch, Android, and touch-based Blackberry devices.
With all WordPress features and customized insertion functions, it makes adding Youtube and MP4 videos to your mobile site exetremely easy.
Price: $49.
Video Theme Home →View the Demo →

SOFA iBloggr

SOFA iBloggr
Sofa iBloggr perfectly fits to the iPhones 320px wide screen without the need for screen orientation switch. You can easily turn this theme into Blog + Flickr + Twitter mashup. iBloggr supports widgets, it has a built-in Plugger system, almost everything can be controlled from theme options page – including quick translation table, image size, Post excerpt length…
Price: $15.
SOFA iBloggr Home →View the Demo →

News Press Mobile Theme

News Press Mobile Theme
The News Gallery theme is designed with the photography blogger in mind featuring frontpage slideshow, thumbnail picture and gallery style layout options. It is the perfect choice for image-centric and magazine style WordPress websites. It comes with six stylish colors designed to fit your sites’ unique profile and style.
Price: $49
News Press Mobile Theme Home →View the Demo →

iWorld

iWorld
iWorld is a jQuery powered feature-rich mobile theme. It comes with 10 color schemes, built-in slider & contact form (including validation plugin), Twitter & Flickr widget, a selection of social icons and comes with PSD source.
Price: $25.
iWorld Home →View the Demo →

Video Elements Mobile

Video Elements Mobile
Video Elements Mobile Home →View the Demo →

WordPress Mobile Plugins

MobilePress – Enable The Mobile Web →
MobilePress is a free open source plugin that is flexible in that it allows you to customize your mobile presence by creating your own themes, creating themes for specific mobile browsers (iPhone and generic devices) and also allowing you to decide when to display your mobile blog.

WPmob Lite →
WPmob automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices. The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site

WP Mobile Detector →
WP Mobile Detector is a simple plugin that automatically detects standard and advanced mobile devices and displays a compatible WordPress mobile theme.

Mobile Kit →
MobileKit is a small WordPress plugin created to make the development of WP mobile themes and apps simple, allowing theme designers to create more immersive user experiences across platforms and devices.

BAAP Mobile Version →
The BAAP Mobile Version is a complete toolkit to help mobilize your WordPress site and blog.
It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

BuddyPress Mobile →
This is a Mobile BuddyPress theme that has been optimized for viewing onthe iPhone and iPod Touch, and will also work on Android and some Blackberry devices.

WordPress Mobile Tutorials

Mobile WordPress Theming →
In this four part tutorial series, from Mobile Tuts+, you will learn how to create a powerful mobile WordPress theme that can be applied to your blog making the site easily accessible to mobile users.
Mobile WordPress Theming: Day 1 →
Mobile WordPress Theming: Day 2 →
Mobile WordPress Theming: Day 3 →
Mobile WordPress Theming: Day 4 →

Making your WordPress Blog Android and iPhone Friendly →
This article is intended for those who already have a web or WordPress background. If you don’t quite understand how to put together your own templates, this detailed tutorial may not for you.

Mobile Browser Detection →
This tutorial covers everything you will need to know about mobile browser detection covering a spectrum of various options, including a WP solution and a PHP solution.

Redirect Mobile Users to a Mobile WordPress Theme →

Detect Mobile Browsers – Mobile User Agent Detection →
This PHP function lets you choose how to manage your mobile visitors, they can be redirected to a page built for mobiles or you can use it to decide which markup language and stylesheet to show that user.

Add a Mobile Landing Page to Your Site →
This tutorial isn’t about creating an entire mobile version of your site, instead it is a means of offering a quick introduction to visitors from the mobile world before passing them through through to your main site.

You might also like…

WordPress Shopping/Ecommerce Toolbox (Plugins and Themes) →
30 Grid-Based WordPress Themes →
40 More Stylish, Minimal and Clean Free WordPress Themes →
20+ Free and Stylish Typography WordPress Themes →
30 Brand New Quality WordPress Themes →
10 Blank/Naked WordPress Themes Perfect for Development →
25 Fresh, Clean and Unique WordPress Themes →
40 Awesome and Fresh WordPress Themes →
Essential WordPress Plugin Development Resources, Tutorials and Guides →
20+ Powerful WordPress Security Plugins and Some Tips and Tricks →


Essential Tips for Maintaining and Speeding Up WordPress

WordPress is one of the most popular and widely-used blogging platforms and CMSs (content management system). The reason is it’s easy to install and use, so you can focus on creating content rather than building and maintaining your website. Everything from small personal blogs to big digital magazines like Smashing use WordPress to run their sites. Chances are you’re using WordPress for your own site or are planning on using it. Well, although WordPress is fine out of the box, it’s not optimized – and worse, it can crash when you start getting more traffic. Lucky for you, this article brings you essential tips for maintaining and speeding up WordPress.

Using these simple and free tweaks and plugin installations, you can:

Maintain your WordPress site to be in tip-top error-free shape using automated methods so you don’t need to waste your precious time

Speed up your WordPress site so it not only loads faster but holds up to traffic spikes

Monitor your WordPress site so you’re aware when a problem pops up and how to quickly fix it

All of which will ultimately free up your time to focus more on creating content and great work, not wasting time fixing your site when it goes down. So without further ado, here are the essential tips for maintaining and speeding up WordPress…

1. Regularly backup your database

In case your WordPress-powered blog breaks or you need to reinstall WordPress. You’ll have all of your latest pages, posts and comments in a handy file. Automate this by using the WP-DBManager plugin. You can set it to regularly backup your database and save a file on your hosting or by emailing an attachment.

2. Optimize your database

Again, you can use the WP-DBManager plugin to automate this.

3. Regularly backup your WordPress files

This means your images and plugins. Automate this by using the WordPress Backup plugin. You can set it to regularly backup your WordPress files and email an attachment.

4. Reduce spam comments

Have Akismet plugin running and filtering out the spam comments. This will save you time by helping speed up comment moderation/reading/replying.

5. Make sure you don’t have unnecessary 404′s

This is when people try to access your pages and posts and get a 404 error message page instead. Use the 404 Notifier plugin to identify the 404 errors and fix them with redirection by using the Redirection plugin.

6. Switch to pretty permalinks

That is if you haven’t already. Go to Settings > Permalinks panel and choose a pretty permalink style (like “example.com/date/post-name/“). Like the URL style that Speckyboy here has, rather than the “/?p=X” permalink style that WordPress for some reason still insists on defaulting to. This not only helps with SEO (search engine optimization, since the keywords people would use to find your post will be right there in the URL) but with human readability. It becomes obvious what you’re going to read as well as making it easier to share.

7. Automate basic SEO (search engine optimization)

Install the All in One SEO Pack plugin. Add your title, keywords, and description in the plugin options screen. This will make it easier for people who are searching for what you have to find you.

1. Use caching

Install the WP Super Cache plugin and enable the Gzip option. This will load only the appropriate cached content to visitors rather than loading every single script and element of your WordPress site. Your bandwidth is greatly reduced and you avoid your site going down during traffic spikes (and if you’re making a kick-butt site with kick-butt content, you should expect them more often than not).

2. Reduce the CSS files to as few as possible

Combine multiple custom CSS files into one big one. The less individual CSS files the theme needs to read the faster it’ll load. Simply copy/paste the code from individual CSS files into the main style.css or a custom.css file in your theme.

3. Reduce the Javascript files to as few as possible

Combine multiple .js files into one big one. The less individual .js files the theme needs to read the faster it’ll load. You can copy/paste the code from individual Javascript files (/js/jquery.js, /js/jquery.slider.js, /js/jquery.tooltip.js) into a new single Javascript file (/js/jquery.js,jquery.slider.js,jquery.tooltip.js).

3. Put as much Javascript code as possible in the footer

In the footer.php file of your theme, or in the footer section in your theme’s customization panel if applicable. This is so that the Javscript calls load last. This way, your visitors will be able to quickly read the content while the Javascript loads in the background.

4. Use as few plugins as possible

The less plugins need to load the more stable your WordPress site can be (and slightly faster in certain cases if a plugin isn’t properly coded). Do that by seeing if you can copy/paste code or hand-code the functionality into your theme, or using a theme that has the functionality built-in, or having it designed or customized for you. This doesn’t mean don’t use any plugins, especially since this article is suggesting plugins for WordPress optimization – just stick to only the essential ones rather than random sidebar widgets and whatnot.

5. Speed up image loading

Use the Amazon S3 storage service to upload and host your files. The images will load faster and your visitors won’t have to wait as long for them to load – especially important for web and visual designers with lots of images and portfolios to showcase. You can use the Amazon S3 for WordPress plugin to streamline image uploading and inserting into your pages and posts.

1. See your basic hosting server info and WordPress PHP memory usage

Install the WP System Health plugin. This can let you see if there are memory issues so you can identify and fix the problem rather than blindly trying things when your WordPress site is slow.

2. See more detailed hosting server info

Install the Hosting Monitor plugin. This will let you know if slowness or any other performance issues are something to do with WordPress or your hosting, and you can fix it or contact your hosting accordingly.

3. Have any WordPress errors logged and notifications emailed

Install the Error Reporting plugin. Since you’ll be notified right when an error occurs, you can fix it right away.

By using these tweaks and installing these plugins, you’ll not only take your WordPress site’s performance and stability from merely okay to great, but you’ll automate a lot of it so that you don’t have to spend time maintaining your site. Not to mention you won’t have to waste time fixing and trying to get your WordPress site back up when it crashes from a traffic spike or whatnot.

All of which boils down to why you should even care about any of this in the first place: you free up time to focus on creating content and great work.

Over to you: what are some other essential tips for maintaining and speeding up WordPress that weren’t featured here? Feel free to share your useful additions in the comments section below.

You might also like…

20 Plugin Replacing Tutorials, Tips, Snippets and Solutions for WordPress →
Dummy Content Filler Resources for WordPress, Drupal and Joomla Developers →
10 Useful WordPress Search Code Snippets →
30 Grid-Based WordPress Themes →
40 More Stylish, Minimal and Clean Free WordPress Themes →
20+ Free and Stylish Typography WordPress Themes →
30 Brand New Quality WordPress Themes →
10 Blank/Naked WordPress Themes Perfect for Development →
25 Fresh, Clean and Unique WordPress Themes →
40 Awesome and Fresh WordPress Themes →
Essential WordPress Plugin Development Resources, Tutorials and Guides →
20+ Powerful WordPress Security Plugins and Some Tips and Tricks →


20 Useful Free iPhone and iPad Apps for Designers and Developers

Big shocking news of the day: iPhones and iPads are increasingly popular and widespread and are being used by more and more people. But what’s interesting is this also includes web developers ie. you. And the following list will feature 20 free iPhone and iPad apps for web developers.

While iPhones and iPads appear to be more consumer-driven devices, there are apps on there that can assist in your web development and make your development and design life much easier. Think of it as having sketchbooks, notepads, calculators, communications devices, and more – all in one device. Of course, there are paid apps that provide much more robust development tools, but these free apps will be more than enough to get you started using your iPhone and/or iPad as a web development aid.

Without further ado, here are 20 free iPhone and iPad apps for web developers:

Dropbox


DropBox lets you sync and share files across computers and your iPhone and iPad.

SugarSync


SugarSync is in case you want an alternative to Dropbox. Sync and access files from your other devices and computers.

2X Client


2X Client lets you remotely connect to and work on your Windows computer.

LiveView


LiveView is a remote screen viewing app that can help you design quick simulations and demos and try out prototypes of your designs. Also useful for designing for mobile apps or web apps for use on mobile devices.

Adobe Ideas


Adobe Ideas is a digital vector-based sketchbook for drawing and capturing design ideas – which you can then send for further working on to Photoshop and Illustrator.

Doodle Buddy


Doodle Buddy is a doodling app which can let you quickly sketch out design ideas and anything else with your fingers. Colors included.

Evernote


Evernote lets you capture and store design and development notes, ideas, snapshots, recordings, and anything else for easy finding later on. Paid in-app upgrades if you need more features.

Note Hub


Note Hub is a note-taking app that lets you create projects and add notes, to do lists, drawings, and whatever else.

TaskPad HD


TaskPad HD is a task manager that lets you sync tasks across all of your devices as well as manage your tasks via a web browser.

Twitter


The official Twitter app for when you need to talk to clients and collaborators via Twitter.

Twitterrific


Twitterrific is for those who prefer a different interface for using Twitter to stay connected with clients and collaborators – choice is good.

Skype


Skype on your iPhone or iPad – need more be said? Really useful for talking to clients and collaborators, especially when they’re in different parts of the world. It’s free to call if you’re both using Skype, otherwise affordable rates let you call landlines and cell phones.

Fring


Fringe is an alternative to Skype. Text chat with people via Skype and other instant messenger accounts and get free calls if you’re both using Fring.

WordPress


WordPress has an iPhone and iPad app that lets you create and edit posts and pages, moderate comments, and other tasks for your WordPress.com blog or WordPress-powered website.

Adobe Photoshop Express


Adobe Photoshop Express is a super-slimmed down version of Photoshop for when you need to quickly edit and upload photos and images on your iPhone or iPad.

PCalc Lite Calculator


PCalc Lite Calculator is a scientific calculator for when you need exact measurements and calculations for your web development projects and designs. This is the free fully-functional lite version of the paid full calculator app.

MedCommons Prototyper


MedCommons Prototyper helps build SplitView layouts for easy presenting of web content on an iPad by letting you test your HTML5 and Ajax designs for things like rotation and resizing.

Craigsphone


Craigsphone is Craigslist for iPad – ’nuff said. For when you need to find clients or work, people to outsource to, and anything else related to your web development and design work.

FontShuffle


FontShuffle is useful for finding the right font for your project or just browsing for typography inspiration – hundreds of font families are sorted by similarity.

SkyGrid


SkyGrid is a better RSS feed reader – an easy way to browse relevant design and development information and articles.

Over to you: what are your favorite free iPhone and iPad apps for web developers? What other apps should be on this list? Feel free to share your useful additions in the comments section below.

You might also like…

30 Brilliant iOS Applications for Freelance Designers and Developers →
Showcase of Beautiful and Unique iPhone Apps →
iPhone and iPad Development GUI Kits, Stencils and Icons →
15 Useful Free Android Apps for Web Developers →
Android App Developers GUI Kits, Icons, Fonts and Tools →
45+ Cool Google Android Apps – The Perfect iPhone Replacement →
Mobile Web and App Development Testing and Emulation Tools →
14 Free Mobile Application Development Icon Sets →


50 Free Tools and Apps for Web Designers and Developers

Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.

So, having all of these amazing bookmarks, I thought I would share my 50 favorites with you.

I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
The apps also don’t include frameworks, Javascript plugins nor template tools, they are all strictly small tools that can help with your development productivity.

Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!

ProCSSor – Advanced CSS Prettifier

ProCSSor - Advanced CSS Prettifier
ProCSSor is a useful tool that will 'prettify' and format CSS files on the fly.
ProCSSor – Advanced CSS Prettifier →

ScriptSrc.net

ScriptSrc.net
Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.
ScriptSrc.net →

HTMLform.com

HTMLform.com
With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.
HTMLform.com →

Spritebox

Spritebox
Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.
Spritebox →

HTML Purifier

HTML Purifier
HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.
HTML Purifier →

Tiny Fluid Grid

Tiny Fluid Grid
Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny Fluid Grid →

TABLEIZER!

TABLEIZER!
TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.
TABLEIZER! →

Try Ruby! (in your browser)

Try Ruby! (in your browser)
If you haven't as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.
Try Ruby! (in your browser) →

Plupload

Plupload
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.
Plupload →

Favigen: Favicon Generator

Favigen: Favicon Generator
Favigen: Favicon Generator →

Super Conversion Button

Super Conversion Button
A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds
Super Conversion Button →

Subfolio

Subfolio
Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.
Subfolio →

jsFiddle

jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
jsFiddle →

A/B Split Testing Calculator

A/B Split Testing Calculator
A/B Split Testing Calculator →

Frame Box – Lightweight online tool for creating mockups

Frame Box - Lightweight online tool for creating mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly
Frame Box – Lightweight online tool for creating mockups →

App Inventor for Android

App Inventor for Android
To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.
App Inventor for Android →

HTML-Ipsum

HTML-Ipsum
HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.
HTML-Ipsum →

CSS3 Button Maker

CSS3 Button Maker
CSS3 Button Maker →

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs
Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart by Impressive Webs →

CSS3 Generator

CSS3 Generator
CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column
CSS3 Generator →

CSS3 Menu

CSS3 Menu
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Menu →

0to255

0to255
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.
0to255 →

Wordmark

Wordmark
Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.
Wordmark →

Awesome Fontstacks

Awesome Fontstacks
With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.
Awesome Fontstacks →

Google Font Directory

Google Font Directory
With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.
Google Font Directory →

Fillerati – Faux Latin is a Dead Language

Fillerati - Faux Latin is a Dead Language
If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.
Fillerati – Faux Latin is a Dead Language →

Wirify: The Web as Wireframes

Wirify: The Web as Wireframes
Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.
Wirify: The Web as Wireframes →

maki

maki
Just drag the maki bookmarklet to your toolbar, go to a page where you're working on the HTML/CSS, and click the bookmark. You'll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.
maki →

Browize – Online Browser Resizer

Browize - Online Browser Resizer
Browize – Online Browser Resizer →

The HTML5 Test

The HTML5 Test
The HTML5 test – how well does your browser support HTML5? This tool will let you know.
The HTML5 Test →

Support Details

Support Details
Support Details →

resizeMyBrowser

resizeMyBrowser
resizeMyBrowser →

iPad Peek

iPad Peek
iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.
iPad Peek →

Moniitor BETA

Moniitor BETA
Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…
Moniitor BETA →

Uptime Robot

Uptime Robot
Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.
Uptime Robot →

WooRank

WooRank
WooRank →

Clue

Clue
Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.
Clue →

Wridea.com

Wridea.com
Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.
Wridea.com →

Domainr

Domainr
When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.
Domainr →

Thoughtboxes

Thoughtboxes
Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.
Thoughtboxes →

Create Free Privacy Policy

Create Free Privacy Policy
With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.
Create Free Privacy Policy →

Recurse

Recurse
Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.
Recurse →

Launchlist

Launchlist
Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click 'Submit Report' you will be either given a 'Go For Launch' or, if issues found, 'Not Advisable'.
Launchlist →

TitanPad

TitanPad
TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a 'public' pad or you can create a 'private' pad for your team with a custom URL.
TitanPad →

CeeVee

CeeVee
Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.
CeeVee →

Billable

Billable
If you don't likes the tedious task of invoicing, then you will love Billable. It really doesn't get any simpler than this.
Billable →

Bounce

Bounce
Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.
Bounce →

TinEye Reverse Image Search

TinEye Reverse Image Search
TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.
TinEye Reverse Image Search →

CopyPasteCharacter.com

CopyPasteCharacter.com
CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.
CopyPasteCharacter.com →

NounProject

NounProject
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language. The symbols can be downloaded completely free.
NounProject →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →