Wednesday, February 24, 2010

10 Great Tools to Create a Mobile Version of Your Site

84% of Americans currently own a mobile phone. Sadly, there are no figures showing how many of these devices are ageing bricks without internet capabilities, but you can bet that, within a few years, the majority of mobile phone users will be able to browse the internet, wherever they are.
Right now, most websites are completely unsuitable for mobile viewing, taking 60 or more seconds to load and looking jumbled and confused as they’re squashed onto smaller screens.
Every day, however, thousands of people are releasing mobile versions of their websites and seeing greatly increased levels of traffic as a result. Unless you optimize your website for mobile phone users soon, you could be left behind by the competition. Creating a mobile-friendly version of your site sounds like a daunting task, but it couldn’t be easier to do. Using one of the excellent tools below, you’ll be able to build, host and launch your mobile site with absolutely no coding knowledge whatsoever.

1. MoFuse (from $7.95 per month)

MoFuse
MoFuse is one of the most popular mobile website builders around, which is unsurprising considering its excellent customizability. Visit the MoFuse website, click “Launch a New Mobile Site”, choose a mobile domain and insert your URL. Next, click on “Add Elements” to add dynamic and static content to each page. Click on “Layout” to transfer elements to your live site, dragging and dropping them to create the optimal visual arrangement before, finally, previewing your new site using MoFuse’s emulator, which brings up a mobile phone screen on your computer’s monitor. For bloggers, MoFuse is completely free and even easier to set up.

2. Mippin (free)

Mippin
Mippin is an absolutely fantastic tool for those who want to mobilize an RSS-driven site. It doesn’t offer the same level of customization as MoFuse, but it’s much quicker to use and the results look great, every time. What’s more, your site will be optimized to work on over 2,000 handsets and the service is completely free. It provides users with basic analytics in reports, as well as the ability to earn money through mobile advertising.

3. Mobilize by Mippin (free)

Mobilize by Mippin
Mobilize by Mippin is a terrific WordPress plugin, which automatically displays your blog to mobile visitors from your normal URL. Once installed, everybody accessing your site from a mobile phone will be automatically redirected to the mobile version. Photos are scaled to fit the horizontal dimensions of a phone screen and videos are converted to the 3GP format, commonly used on most 3G, 2G and even 4G phones.

4. Wirenode (free basic package)

Wirenode
At last count, 31,912 websites had been optimized for mobile phones using Wirenode, a tool which lacks the customization potential of MoFuse, but offers slightly more in this regard than Mippin. From Wirenode’s dashboard, users can configure their domain name, upload pictures, track visitors and page views and preview their site on an emulated phone. Wirenode’s simple Editor interface lets users personalize their mobile site with colors and images, and create, edit, rearrange and delete individual pages.

5. 2ergo (contact for a quote)

2ergo
2ergo has mobilized huge organizations like Rightmove and The National Guard, creating mobile-friendly websites for them which look great and load quickly. 2ergo’s customers can choose to use the self-service mobile publishing and content management tool, Mobile Site Builder, or let 2ergo design a custom site especially for them. The latter, obviously, is the more expensive option of the two. 2ergo’s service includes automatic device and carrier detection, data capture and collection forms, an integrated ad service platform, real-time tracking and top-notch technical support.

6. Zinadoo (free)

Zinadoo
Zinadoo is a really slick, free tool, which lets users build a mobile site quickly and easily. Users can make the most of Zinadoo’s web and mobile widgets, as well as its text and email services, to promote their site to an online and offline community. Furthermore, they can optimize their site for Google Mobile with keywords and tags, and upload videos using Zinadoo’s Mobile Video. As if that wasn’t enough, users can also gain access to Zinadoo’s online Business Directory and Mobiseer, a Web 2.0 service for organizing, tagging, sharing and managing favorite mobile sites.

7. Winksite (free)

Winksite
Winksite is an excellent W3C mobileOK and .mobi standards-compliant mobile website builder which focuses heavily on the community element of website promotion and social interaction. It’s packed full of mobile-community-type features like forums, chat and polls. Users can use Winksite to create their own mobile portal for communicating with friends, sharing feeds and favorites. Users can also divert all of their texts, emails and Twitter messages to one mobile destination which people can interact with.

8. MobiSiteGalore (free)

MobiSiteGalore
MobiSiteGalore offers a mobile website builder, which can be used just as easily from a mobile phone as a computer. Its Quick Start Wizard, accompanied throughout by Help Movies, makes setting up a mobile website incredibly easy. Once you’ve added pages, chosen a color scheme, added content and checked your new site for compliance with ready.mobi standards, you can add items to your new site from the Goodies List. Goodies include click-to-call, add to phone book, Google search and links to PayPal.

9. mobiReady (free)

mobiReady
You can’t build a mobile site using mobiReady. What you can do, however, is test your existing site for mobile usability. Enter your URL and press “Go” to get free reports, detailing how well your site displays on mobiles and any potential problem areas. You’re even given information regarding how much people in different parts of the world are charged to view your site.

10. Google Mobile Optimizer (free)

Google Mobile Optimizer
Google Mobile Optimizer is the quickest possible means of transforming your website into one suitable for mobile user consumption. Navigate your way to google.com/gwt/n, enter a site URL and a lightweight version will appear, without headers, ads or images. It’s completely un-customizable and renders a minority of websites useless, but it’s a very useful bookmark for your phone.

Monday, February 22, 2010

Free XHTML Template Pack: Classic Luxury

Free XHTML Template Pack: Luxury Classic

Classic Luxury is a high quality, clean and simple CSS-based template with three custom pages created by CssTemplateHeaven exclusively for Six Revisions readers.
It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.
Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).
You may use this template in any projects you like (both personal/non-profit and commercial), but you cannot resell this pack’s source files.

Features

  • 3 custom page templates
  • Photoshop PSD files included
  • Valid XHTML
  • FancyBox support (jQuery plugin for modal windows)
  • Dropdown menus
  • Social media icons for Facebook, Twitter, and LinkedIn

Previews

Home

Luxury Classic

Gallery

Page

Page

Luxury Classic

Demo

Click below to open live demos of Classic Luxury’s page templates included in this pack.

Download

Thursday, February 18, 2010

A Collection of Printable Sketch Templates and Sketch Books for Wireframing


At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated :-)). This way I won’t pay too much attention to some details that should be taken care of later, but stay focused on general layout and functionality.
Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list.
And, of course, don’t forget to share your wireframes on I ♥ wireframes :-)

Printable sketch templates for websites

These are some pretty good, printable sketch templates for website design.

Browser Sketch Pad (PDF)


Browser Sketch Pad by Design Commission — see original source

960 grid template


960 grid template by Nathan Smith — see original source

Graph paper


Graph paper by Konigi — see original source

Paper browser


Paper browser by Rain Creative Lab — see original source

MBTI sketching paper for ideation


MBTI sketching paper for ideation by Concept7 — see original source

Sketching grid paper


Sketching grid paper by Concept7 — see original source

6 pages template


6 pages template by nunile — see original source

Paper wireframe templates


Paper wireframe templates by Jason Robb — see original source

Sketchboards


Sketchboards by adaptive path — see original source

Wireframe template


Wireframe template by Alfonso Bozzelli — see original source

Printable sketch templates for mobile applications

Due to raising popularity of iPhone and Google Android platforms, you might get a few mobile application design projects from time to time. So be prepared. Below you’ll find a few of them that I used and recommend.

iPhone UX Sketch Templates


iPhone UX Sketch Templates by Erik Loehfelm — see original source

iPhone Sketch Pad (PDF)


iPhone Sketch Pad by Design Commission — see original source

iPhone Application Sketch Template


iPhone Application Sketch Template by Oliver Waters — see original source

iPhone Wireframe Templates for Sketching


iPhone Wireframe Templates for Sketching by Evan K. Stone — see original source

iPhone App Wireframe Template


iPhone App Wireframe Template by full of design — see original source

Sketch Books

You may prefer to buy a finished product, a sketchbook. Or perhaps you’re just too lazy to print the ones that are downloadable :). Anyway, here’s the list of sketchbooks I recommend:

Browser Sketch Pad

Graph paper pad with browser chrome on top.

Browser Sketch Pad by Design Commission — see original source
  • 8.5 X 11 Inches
  • 50 Sheets in a pad
  • 70 lb Paper
  • Chip board back

Wireframe Graph Paper Notepad


Wireframe Graph Paper Notepad by Konigi — see original source
  • 50 sheets
  • 8 1/2 x 11 inches on white opaque vellum paper

Storyboard Notepad


Storyboard Notepad by Konigi — see original source
  • 50 sheets
  • 8 1/2 x 11 inches on white opaque vellum paper

Dot Grid Book


Dot Grid Book by Behance — see original source
  • Semi-Hard Suede-touch Cover
  • 9 x 10.5 Inches
  • 50 pages, 80lb Premium Blend Paper
  • Double spiral (black)

App Sketchbook

Quickly put your iPhone® app designs on paper.

App Sketchbook by Stephen Martin — see original source
  • 50 Double-sided pages
  • 3 real-size iPhone® templates per page
  • Pixel (20px) ruler and title bar markings
  • Ruled section for your development notes

iPhone Sketch Pad


iPhone Sketch Pad by Design Commission — see original source
Has one phone silhouette on the front side and three on the back. 200 possible screens per pad.
  • Printing on both sides
  • Grid lines
  • 8.5 X 11 Inches
  • Project name, Screen, and Date fields
  • 50 sheets, 70 lb paper
  • Cardboard back

Notepod


Notepod by Jacky Winter and Inventive Labs — see original source
  • Three 60 x 110mm
  • 100pp Notepods printed on both sides
  • 80gsm laser throughout with a stiff black strawboard back

Make your own sketch templates

Free Online Graph Paper / Grid Paper PDFs

Downloadable and very printable.

Free Online Graph Paper by Incompetech — see original source

Thursday, February 11, 2010

How to Do Everything in Google Buzz (Including Turn It Off)

How to Do Everything in Google Buzz (Including Turn It Off)


Google Buzz
Google's new social media service Google Buzz will show up in your Gmail account this week. Here's how to customize and use Buzz--or opt out of its inbox-cluttering updates completely.

Add Your Sites to Buzz

Once Buzz becomes available in your Gmail account, click on the Buzz link below the Inbox on Gmail's sidebar to check it out. You'll see a "Welcome to Buzz" message with a list of all the people Buzz has you automatically following (based on who you email the most).
Above the Buzz posting box, next to your name, click the "# connected sites" link to see and configure which of your social media streams get piped into Buzz, and add more. By default your menu of potential connected sites includes your Picasa Web Albums, Google Reader activity, Google chat status, Flickr photos, Blogspot blog, and Twitter feed.
Google Buzz
However, some folks are seeing even more options, including Tumblr and FriendFeed. If those are in your Google Profile when you set up Buzz, you'll see them in your list of connected sites. (Hint: when you add them to your GProfile, tick the "This is a profile page about me" checkbox.) For the more technically-minded, Google has published instructions on how to connect external sites to Google Buzz.

Post Buzz Only Certain People Can See

You can use Buzz like you would Google Reader--to just keep up with your friends' social network streams from around the web. But you can also post status updates via Buzz, and limit who can see those updates. From the Buzz posting text area (which looks a whole lot like Twitter's), add your text, links, photos, or videos, and from the drop-down choose Private to limit access to that post. Check off the Contacts groups who are allowed to see the update.
Google Buzz

Get a Permalink to Specific Buzz

Every Buzz post and its ensuing comment thread is a web page in and of itself. To get a link to that page to IM, email, or link from another web page, click on the down-arrow to the right of a Buzz post and select "Link to this buzz." Here's a Buzz post I published this morning.

Send Buzz via @ Replies

If email is just too old-fashioned for you, send someone a Buzz update by using Twitter-style @ replies. Start a new Buzz post with the @ sign, and an auto-complete drop-down of your Contacts will appear. Choose the recipient, and that Buzz update will appear in your contact's inbox (assuming he or she has Buzz enabled).
Google Buzz

Post Buzz via Email

You can also post a Buzz update via email. From your Buzz-enabled Gmail account, send a message to buzz@gmail.com to post to Buzz. You can send image attachments (like via your cameraphone) to Buzz this way as well.

Silence Chatty Buzz Posts

With Buzz turned on in your Gmail account, comments on all the buzz you post or comment on automatically shows up in your Gmail inbox as new mail in an email conversation. If a particular thread gets too chatty and annoying, use Gmail's Mute feature to silence it. From the "More Actions" menu in Gmail, choose "Mute"; if you have keyboard shortcuts enabled, you can tap the "M" key to mute an individual thread. You can mute a post from within Buzz, too: from the Comment drop-down, choose "Mute this post."
Google Buzz

Buzzkill: Turn off Buzz Completely

If you don't want to get Buzz updates in your inbox or have access to the Buzz link in the Gmail sidebar, there's a kill switch. At the bottom of your Gmail account, next to the "turn on/off chat" link, there is a "turn off buzz" link. Click it to opt out of Buzz updates and hide the Buzz link permanently.
Google Buzz
If you want to be able to browse Buzz, but not get updates in your inbox, create a Gmail filter that makes Buzz updates skip the inbox automatically. In Gmail, click on the "Create a filter" link, and in the "Has the words:" field enter label:buzz. Click Next Step (and ignore Gmail's warning about filtering labels), then choose "Skip the inbox" as the filter action, and save.
Google Buzz

Buzz Mobile

Finally, you can ditch Foursquare or Gowalla on your mobile phone and go totally Google by visiting buzz.google.com on your iPhone or Android device. From the location-aware Web app, you can post updates that include where you are, and see buzz posted from nearby locations, too.
In addition to iPhone and Android users, Windows Mobile and Nokia S60 folks can get Buzz on Google Maps; visit m.google.com/maps on your mobile phone to enable the Buzz Maps layer.

Tuesday, February 09, 2010

This Weeks Twitter Design News Roundup

State of the Internet Explained In One Giant Infographic [PIC]

State of the Internet Explained In One Giant Infographic

15 Secrets That Can Make Your Next Blog Design More Effective

15 Secrets That Can Make Your Next Blog Design More Effective
Have you ever thought about what a huge impact a blog’s design has on its perception by readers? If you’re going to run a blog as a business (or part of your business), branding should be one of your biggest considerations.
And if you’re going to pull off a successful branding job, design is essential. Having a clean, reader-friendly design that is structured to accomplish your goals is, next to having excellent content, one of the best things you can do to help your blog succeed. In this article the author offers 15 secrets that will help your next blog design stand out and be successful.
15 Secrets That Can Make Your Next Blog Design More Effective »

The Art And Science Of The Email Signature

The Art And Science Of The Email Signature
Email signatures contain alternative contact details, pertinent job titles and company names, which help the recipient get in touch when emails are not responded to. Sometimes, they give the recipient an idea of who wrote the email in case it has been a while since they have been in touch. They are also professional: like a letterhead, they show that you run a business (in some countries, you’re required to do so). Here are some tips on how to create a tasteful signature that works.
The Art And Science Of The Email Signature »

Don’t Touch That Dial — Lessons Web Designers Can Learn From Television Broadcasts

Don’t Touch That Dial — Lessons Web Designers Can Learn From Television Broadcasts
Television broadcasts continue to have a major impact on society — both in positive and negative ways. Whether you have a long-standing love affair with your television set, or you just use it to kill the monotony when you’re taking a break from the internet, I’m sure you’ll agree that, due to the overwhelming impact TV has had on modern society (and on television producers’ pocketbooks), techniques and principles unique to television broadcast production and marketing are worth examining.
Don’t Touch That Dial — Lessons Web Designers Can Learn From Television Broadcast »

How to Grow as a Web Designer

How to Grow as a Web Designer
The field of web design is constantly changing and growing. Getting in a rut is often the result of not staying up to date with the latest trends and technologies in the industry. Even if we do stay up to date, many of us at one time or another feel anxious about whether we’re advancing. If you’re at a firm, you may be working towards a raise or promotion, or perhaps you’re thinking of jumping ship to a bigger and better company.
For the freelancers out there, we of course determine our own destiny; but far too often our careers feel stagnant, too. This article goes over some ways to reignite your growth as a web designer.
How to Grow as a Web Designer »

Everything You Need to Know About Image Compression

Everything You Need to Know About Image Compression
Proper use of image compression can make a huge difference in the appearance and size of your website image files. But compression is an often-misunderstood topic, partly because there’s a real lack of understanding on what the different types of compression are good for. If you don’t understand which type of compression to use for different types of images, you’ll likely end up with one of two results: either images that don’t look as good as they could, or image file sizes that are way larger than they need to be.
Everything You Need to Know About Image Compression »

The Principle of Contrast in Web Design

The Principle of Contrast in Web Design
A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. The tricky part is being able to communicate this visually and effectively. This is where the principle of contrast comes into play.
The Principle of Contrast in Web Design »

The Secret of Getting Things Done When Working with Freelancers

The Secret of Getting Things Done When Working with Freelancers
Anyone who ever hired a freelancer to realize a project knows that sometimes you get a great job done, while other times you only get one big headache. However, few people know what the result ultimately depends on — thi9s author does, and he is going to tell you about that.
The Secret of Getting Things Done When Working with Freelancers »

BBC News – 'Internet addiction' linked to depression, says study

Twitter News
There is a strong link between heavy internet use and depression, UK psychologists have said. The study, reported in the journal Psychopathology, found 1.2% of people surveyed were "internet addicts", and many of these were depressed. The Leeds University team stressed they could not say one necessarily caused the other, and that most internet users did not suffer mental health problems.
BBC News – 'Internet addiction' linked to depression, says study »

42 Striking Examples Of Snowboard Designs

42 Striking Examples Of Snowboard Designs

Showcase of Popular websites Developed using Drupal CMS

Showcase of Popular websites Developed using Drupal CMS
Showcase of Popular websites Developed using Drupal CMS

Information is beautiful: 30 examples of creative infography

Twitter News
Twitter News

Firefox Themes – 60 Most Popular Themes You Must See

Twitter News

47 Amazing CSS3 Animation Demos

Twitter News

A Look into Registration Buttons in Web Design

Twitter News

Modern Bicycle Concepts That Will Blow Your Mind

Twitter News
Twitter News

Movie Inspired Wallpaper For Your iPhone

Twitter News

Create a minimalistic button with a ribbon in Photoshop

Twitter News

Making a Photoshoot Effect With jQuery & CSS

Twitter News

5 Practical Ways for Using Ajax

Twitter News

iPad GUI PSD

Twitter News

20 Amazing 3D social icons

Twitter News

Vintage Stamp Social Media Icon Pack

Twitter News

Free 76 High Quality Icons From Elegantthemes

Twitter News

Free Sleek Web Buttons Set Download : PSD File

Twitter News

20 Free Payment Option Icons

Twitter News

Typography – 46 Cool & Useful Dingbat Fonts

Twitter News

Free WordPress e-Commerce Theme: Kelontong

Twitter News

CropZoom another Jquery Plugin

Twitter News

David DeSandro: jQuery Masonry v1.0 Released

Twitter News