If you are a big Apple nerd like me yesterday was a pretty exciting day for you. I know I was anxiously awaiting a roll out of the new iPhone and boy did Apple deliver. Here are highlights of some of the new features.

The Hardware

1. Complete Redesign
2. Retina Display
3. Front facing Camera
4. 5 Megapixel Camera

Apple completely re-designed the iPhone 4 to have extra strong glass on both sides and a aluminum band around the entire phone which doubles as the antenna. Here are a few pictures to see how pretty this thing is.

The Software

1. FaceTime – Video Calling
2. HD Video Recording
3. Multitasking
4. iBooks
5. iMovie

All of these features are extremely appealing to the average iPhone user and even more appealing to non-iPhone users. I want to briefly talk about a few of the features but I am not going to touch on all of them.

FaceTime – Video Calling

This is the new feature I think will change the way we communicate dramatically. Think about it… We knew this day would come where we can see the person we are talking to on the other end, but did we think it would be this soon?

FaceTime is what Apple is calling it’s new “Video Calling” feature. It allows two iPhone 4 users to call each other and see each other by using the front facing camera. There is a catch though… currently it only works over WiFi. Could you imagine how much bandwidth would be taken up by every iPhone user video calling every day. I really don’t think AT&T is ready for that. FaceTime also allows you to flip the camera feed to the back camera with a single touch of the screen.

“People have been dreaming about video calling for decades. iPhone 4 makes it a reality. With the tap of a button, you can wave hello to your kids, share a smile from across the globe, or watch your best friend laugh at your stories — iPhone 4 to iPhone 4 over Wi-Fi. No other phone makes staying in touch this much fun.”

This is a revolutionary new feature that Apple is bringing to the Smartphone playing field. Another interesting fact is that Apple is leaving FaceTime open so developers can implement it into their applications.

It’s really awesome when you get to video chat with someone way across the country and now we’ll be able to do it on our phones… crazy. Get ready for this to change the way we communicate.

View FaceTime in action here

HD Video Recording

The iPhone 4 will allow you to record 720p HD video on your camera phone. That is an outstanding feat. and I believe a first in the smartphone market (I could be wrong). It’s not enough just to be able to shoot HD Video but for $4.99 you can purchase Apple’s iMovie app for your iPhone 4 which allows you to edit your HD video right on your phone.

“No need to wait until you’re back at your computer to edit video. You can perform basic editing right in the Camera app. Just drag to select start and end points on a filmstrip.”

The iMovie app allows you to combine and trim video clips right on your new iPhone. This is another feature I can’t wait to get my hands on. I recently bought my fiance a new Nikon point-and-shoot that shoots 720p and we’ve been having a blast with it.

View HD Recording in action here

Multitasking

This feature has been a long time coming. I have a friend that is constantly in the Mac vs. PC battle and now currently owns an Android phone that always said that his blackberry had multitasking so why should he switch. Well now Apple has done it and done it right.

View Multitasking in action here

Release date is June 24th, 2010

You can bet that I will be one of the first one’s in line for this amazing product. I cannot wait to get my hands on the new hardware and software. See you at the Apple store.

Be sure to vote in the sidebar for your favorite new feature.

Apple has become so popular and their branding is so strong that manufacturing Apple Knock-off products is a Million dollar industry. If you travel around the world you will see all kinds of Apple knock-offs from iPods to iPhones, Macbooks, and even Shuffles. Here are a few Apple knock-offs for your viewing pleasure.

The Knock-offs

This is pretty close to the iPhone but has an extended bottom portion near the home button.

This is a crazy looking Macbook knock off. You better take a second glance at this one.

This iPhone knock off got almost everything right, but the home button is completely different.

This nano was done well except for the big on/off button at the top. The print and logo on the back of it are pretty close.

I actually think this is a cool shuffle concept.

This is obviously way off, but I’m sure it would fool my grandmother.

This nano knock-off looks very mysterious… not even sure how you would navigate its UI.

Looks like a bad version of the iPod Mini…

Pretty close to the original iPod nano except the button graphics are a little off.

Now where did they get this design idea from?

This one is called the iFone, and iPhone with buttons and a stylus.

Another knock-off of the gen 1 iPod nano.

This manufacturer took a little more time to even include nice packaging.

This is an actual computer made by HP which is a horrible knock-off of the new unibodies.

Awesome! Gotta love the fat nano.

Shuffle rip off with a screen!

Seriously? What a great looking UI…

The long awaited iPhone Nano!!!!

The Challenge

Make sure you leave a link to great Apple Knock-offs in the comments. I would love to see more of these fantastic products. Don’t forget to enter in our Grafpedia giveaway. We are giving away a Grafpedia account worth $199 for free enter here.

Here’s our run down of the essential apps available for web developers and designers. Rather than focus on one element of the web development or design process, we’ve pretty much covered all the bases here. You’ll find apps designed for code editing, file and data transfer, collaboration, database management, image editing, invoicing, time tracking, expenses tracking and much, much more.

The apps explored below are a rather disparate group, but there are two common threads tying them together. Firstly, as you might expect, they are all perfect for web developers and designers, greatly reducing the time, hassle and heartache needlessly expended during projects. Secondly, they have all been designed to be used on a Mac, by a dedicated Mac user, who expects his or her apps to operate in a certain Mac-like way.

Most of them are relatively inexpensive and almost all of them offer a free trial period, so pick the ones that are right for you and give them a go. You never know, they might just change your professional life!

Code Editors

1. Coda ($99)

Rather than have several windows open at the same time, all doing different things (one text editing, one saving files to the server, one previewing in Safari etc.), combine each aspect of web development into one unified window with Coda, to make editing CSS that little bit easier.

As well as syntax colouring, line numbering, auto-completion and block editing, Coda offers some unique features, such as Live Collaboration, which lets you edit code live with any co-worker in the world, and Clips, a floating window which lets you insert frequently used text CSS snippets quickly and easily.

2. CSSEdit ($79.90 with Espresso)

Unlike some of the other code editors available, CSSEdit is strictly limited to the coding of CSS. Luckily, it performs its sole function extremely well. Web developers with any level of expertise will be able to code more quickly and simply with this great program.

CSSEdit’s strongest features include Live Preview, which without saving or uploading, lets you preview any changes you make to your stylesheets in real time, and Milestones, which saves your work continuously so that you can tweak away to your heart’s content without the fear of screwing things up!

3. TextMate ($48.75)

TextMate, the self-styled “Missing editor for Mac OS X”, is a text editor inspired by Apple’s approach to operating systems. Lightweight and easy to use, TextMate offers programmers, developers and designers the ability to search and replace in a project, select and type in columns, use tabs when working with multiple projects, and bookmark visually to quickly jump between places in a file. It supports over 50 languages and comes complete with simple project management apps too!

File & Data Transfer

4. Transmit 3 ($29.95, $17.95 to upgrade from Transmit 2)

Transmit is quite possibly the simplest GUI FTP client to use. Mac users will instantly feel at home with its Finder-like interface. New features in Transmit 3 include column view browsing (Mac OS X style), a sidebar for the most frequently visited locations and tabs for multiple transfer sessions in one window. Transmit 3 can also be used as a Dashboard widget, and its Dock logo shows the status of your transfers at a glance.

5. Dropbox (free basic package)

Dropbox makes it easy for you to store and transfer files across any number of computers and/or smartphones. Once downloaded, a Dropbox folder is added to your desktop. Drag any file into the folder and it will ‘magically’ appear in the Dropbox folder on each one of your machines. What’s more, each file is automatically saved to another folder on the Dropbox website, which is accessible from any computer in the world. No longer will you have to continuously email yourself or transfer files between computers with a USB stick.

6. Meerkat ($19.95)

SSH tunneling is a way of shunting data securely across the internet on behalf of other programs. It’s often used to bypass firewalls and provide secure communication to programs with poor encryption capabilities. It sounds complicated, doesn’t it? Well, in fact, it is very complicated, which is why Meerkat, an SSH tunnel manager designed especially for Mac users, is so incredibly useful. With Meerkat, you’ll be SSH tunnelling in no time.

Collaboration

7. Basecamp (from $24 per month)

Basecamp is the world’s leading project collaboration tool, endorsed by National Geographic, Warner Brothers and thousands of very satisfied web developers and designers. Basecamp’s uncluttered, customisable interface encourages seamless collaboration between team members.

Write to-do lists, assign tasks to specific team members, store and share files effectively, write on your team’s messageboard, create milestones to keep track of what’s been done and by who, track time spent by team members on different tasks, and get an all-encompassing project overview.

8. GitHub (free basic package)

GitHub is another collaboration tool with glowing endorsements from giants of the business and web world, such as EMI and Yahoo! Unlike Basecamp, GitHub is specifically designed for collaborative coding, allowing you to fork and merge code, send pull requests and monitor web development at the touch of a button. It’s designed to function like a social networking site, with each user assigned a profile which tracks progress and participation. Follow specific developers to keep tabs on their activity.

Database Management

9. Querious ($25)

Querious is a great MySQL database management application, perfect for web developers looking for an alternative to the rather dated and fussy front-end of MySQL. Importantly, Querious lets you manage how your data is structured (through the Columns tab) as well as the data itself (through the Contents tab). With Querious, you can view, search, edit, import, export and structure your data easily and effectively. Furthermore, it operates in an intuitive way that all Mac users will be completely comfortable with.

10. Sequel Pro (free)

Sequel Pro is another MySQL database management application, but unlike Querious, it’s completely free. Again, unlike Querious, which will only connect to MySQL 5 servers, Sequel Pro connects to both MySQL 4 and MySQL 3. Sequel Pro performs the same basic functions as Querious, albeit in a less polished and less stylish manner. However, Querious easily outperforms Sequel Pro when it comes to running queries, offering both syntax highlighting and code completion, which make a huge difference.

If you don’t mind spending $25 (which really isn’t that much to ask), I’d recommend Querious over Sequel Pro every time, unless you need to connect to MySQL 4 or MySQL 3, in which case you don’t really have a choice.

Image Editing

11. Photoshop ($699)

Perhaps it goes without saying that Adobe Photoshop is the finest piece of image editing software on the market, used to some extent by almost everyone involved in web development and design. There’s no point in listing its features; they’re far too numerous to mention. All there is to say is that it’s very expensive, but unsurpassed in its field as yet. If it’s too expensive for you or you don’t need as much power, there are plenty of alternatives on the market to look into.

12. Layers ($24.95)

Layers is a unique screen capture application which lets you take multilayered screen and webshots. When taking a screenshot, which can be done simply by pressing “Alt Shift S”, each different element on the screen, including application windows, desktop icons, the Dock, menu bar, cursor and even menu bar icons, are saved as different layers in a PSD file. When opened in Photoshop, you can simply uncheck a layer to remove an element from the image, or select a layer to move the element around.

Layers works in much the same way when it comes to webshots. A shot of the full web page is captured, even if some elements are off the screen, and everything, including video frames and Flash, is included in the layers.

Miscellaneous

13. Charles Proxy ($50)

Charles Proxy is a web proxy which runs on your own computer. It records all data that’s exchanged between your web browser and the server when you access the internet, displaying this information in plain text for your consumption. With this invaluable information at your fingertips, you can quickly diagnose and rectify any problems you may be experiencing with your websites. Besides proxying, it also provides bandwidth throttling, which allows you to experience websites as a modem user.

14. Changes ($49.99)

Changes is a file and folder comparison tool which aims to unclutter your digital life by allowing greater folder comparison and merging. With Changes, you can easily sync folders, getting rid of .DS_Store files, .svn directories and other rubbish which accumulates over time, keeping up-to-date and organised in the process. You can even compare text files for code and prose, collapsing text and editing as you go.

15. xScope ($26.95)

xScope brings together seven great tools for measuring, aligning and inspecting on-screen graphics and layouts. These tools include: Dimensions, which gives you the dimensions of anything on-screen; Rulers, which measures pixels on-screen; Screens, which displays the usable screen content area for any screen size; and Loupe, which magnifies anything under your mouse. These tools, accessible via the Mac OS X menu bar, float above desktop windows, saving you valuable screen space.

16. FreshBooks (free basic package)

FreshBooks is a great app for tracking time and money. It gives you an instant overview of how you and other members of your team are utilising time, letting you update your timesheets from your smartphone if you wish. It lets you track your expenses and send and manage professional-looking invoices. Never again will you fret over a lost invoice, as each one is saved and stored exactly where you’d expect to find it.

17. Harvest (from $12 per month)

A similar application to FreshBooks, Harvest is a great app for keeping tabs on time and money, with packages designed for freelancers and individuals, small businesses and teams, and larger companies. Harvest presents information in a highly visual manner, giving you a snapshot of time spent on projects, expenses accrued and invoices created.

Like FreshBooks, Harvest is a web app, which means that nothing has to be downloaded and that all your information is accessible from any computer in the world (provided it’s connected to the internet, of course).

Add to this list

If you have any other applications web or not that you use daily as a designer / developer please leave it in the comments section.

Here is the follow up tutorial to my most recent tutorial on how to create Apple’s navigation bar in photoshop. This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.

Final Demo

What are CSS Sprites, and why use them?

In lamens terms CSS Sprites are multiple images combined into one to reduce the amount http requests and server load time. Have you ever used the hover attribute with a background image that shows up on hover? Yep that’s right, when you hover over it for the first time there is a slight flicker, or moment where the image does not show. This happens because the browser doesn’t load that image until the hover state, therefore causing a slight flicker the first time the image is hovered over. CSS Sprites get rid of that flicker because instead of using two images and calling a separate image on hover you combine the two images into one and position it on hover. This might sound a little confusing at first, but keep doing it and you will get it.

Ok, Lets Get Started

1. Click here to download our starting image for this tutorial

2. Create a new HTML file and a CSS file with your favorite editor.

Setting up the HTML

We are going to use an unordered list because they are great especially for navigation. So create an unordered list like the one below. You can see that we have an LI tag for each section on our navigation, this is very important. You can also see that each LI tag has an ID assigned to it. This is also very important because we will need to specify the width of each list item later.

	<ul id="nav">
	          <li id="list1"><a href="#"><span>Apple</span></a></li>
	          <li id="list2"><a href="#"><span>Store</span></a></li>
	          <li id="list3"><a href="#"><span>Mac</span></a></li>
	          <li id="list4"><a href="#"><span>iPod + iTunes</span></a></li>
	          <li id="list5"><a href="#"><span>iPhone</span></a></li>
	          <li id="list6"><a href="#"><span>Downloads</span></a></li>
	          <li id="list7"><a href="#"><span>Support</span></a></li>
	</ul>

That is all of the HTML code you will need for this technique, CSS takes care of the rest.

Setting up the CSS

Ok first and foremost I am hoping you have already linked your style sheet to your HTML file, if not do so now.

3. The first selector we will be working with is our Unordered list which we gave the ID of “nav.” We are going to set our main image as the background of our unordered list. Now, our images total height is 76px, but we only want half of the image to show at first correct? Yes thats correct, because we do not want the bottom half of the picture to show up until one of the buttons on the nav is hovered over. So we are setting the height of the Unordered list to 38 which is half of 76. Margin: 0 auto is just to center the Unordered list in your browser window that piece of code is not necessary. Check out the code below

* { margin: 0px; padding: 0px; }

#nav {
      background: url(nav.png);
      height: 38px;
      width: 876px;
      margin: 0 auto;
}

#nav span {
     display: none;
}

4. Next we need to get the list items to be horizontal because that is the orientation of our navigation. So we float the list items to the left so that they line up horizontally. We also want to get rid of the bullets because they are just getting in the way! The next step is to give a height to our anchor tags. The anchor tags determine which part is going to be clickable which we are giving a height of 38px. If we want all of those 38px to be clickable we have to use display: block.

#nav li {
	list-style-type: none;
	float: left;
}

#nav a {
	height: 38px;
	display: block;
}

It’s Measuring Time

5. Now we have to measure out exactly how wide each of the “buttons” on out navigation our, so lets head back to photoshop. Open up nav.png and grab your ruler tool which is underneath your eyedropper tool and click on the very left edge of the document and drag to the dark middle separator between the second button. Make sure you ZOOM IN so you can be more accurate

6. Repeat step five for each of the buttons until you get all the way to the other end. If you measure correctly they should all add up to be 876px wide. If yours do not match that width move on for now and you can change it later. Now we have to get all of our selectors ready for each individual list item.

#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }

7. Now that we have the widths set we need to position the rollover on hover. So how do we do that? We are going to use background positioning. So we choose our first selector which is #list1, and we set the background image as our nav.png. When using background positioning you have two choices move along the X-axis (horizontal) or the Y-axis (Vertical). Since are rollover image is underneath our active state we need to shift the image up the Y-axis. So how much do we shift it up? Well since our image is split directly in two we can just use the same height as we set for our Unordered list which was 38px, but we need to use a NEGATIVE 38 because the negative makes it go up the Y-axis where as a positive 38 would shift it down.

#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}

8. The -38px for the Y-axis will be the same on each one of the list items because we always want it to shift to the rollover section of our image, but the x-axis will change. The x-axis in the example above is set to zero because it is all the way to the left. So for the next list item we need to shift it over the amount of the previous list items width (Hopefully that makes sense). So we go back and look at the width of the first list item, which we see is 112px so we add that as a negative number to our x-axis on #list2.

#list2 a:hover {
      background: url(nav.png) -112px -38px no-repeat;
}

9. We keep repeating this process for the other 5 list items. Just keep adding the previous widths so by the time you get to the end you should be adding six widths together. Here is what it should look like complete.

#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}

#list2 a:hover {
      background: url(nav.png) -112px -38px no-repeat;
}

#list3 a:hover {
      background: url(nav.png) -232px -38px no-repeat;
}

#list4 a:hover {
      background: url(nav.png) -360px -38px no-repeat;
}

#list5 a:hover {
      background: url(nav.png) -485px -38px no-repeat;
}

#list6 a:hover {
      background: url(nav.png) -622px -38px no-repeat;
}

#list7 a:hover {
      background: url(nav.png) -753px -38px no-repeat;
}

All Done!!

If you have followed all of the steps I have laid out above you should have a beautiful Apple Navigation Bar coded using CSS Sprites. If you have any questions please comment on this post. Please subscribe to my blog if you enjoyed this post. Thanks everyone

Final Demo

Apple has one of the cleanest designed sites on the web, which is usually hard to achieve with so much volume, just look at craigslist. So today I dedicate this post to the awesomeness of Apple and their beautiful site. Today we will try to recreate the Apple navigation bar on their current website.

PART TWO IS HERE LEARN HOW TO CODE THIS EXAMPLE HERE – Which will show you how to code this using the CSS Sprite technique so Stay Tuned.

Here is a preview of what we are creating today:

Creating the background

1. Create a photoshop document that is 900 pixels wide and 75 pixels high. See below to get the exact settings.

2. Create a new layer (Layer > New > Layer…) Then choose the Rounded Rectangle Tool and set your foreground color to black (Hit the X key on your keyboard). Up at the top set your Radius to 8px. Then click on the Down arrow directly to the left of the radius box and click on FIXED SIZE. Set the width to 877px and the height to 38px

3. Now lets add the gradient instead of having just a black background. Right click on the layer we just added the shape to and select blending options. Check the Gradient overlay option. Double click inside the preview of what your gradient will look like which is directly to the left of the reverse check box. It should give you the dialog box below.

4. Double click on the color stop on the bottom left. There are four color stops showing, they look like small houses.

5. Once you do that it will bring up your color dialog box type in 848484.

6. Now double click on the color stop all the way to the right on the bottom and set the color to c7c7c7.

7. Now we need to add another color stop so click somewhere in the middle right below the gradient strip to add another color stop, another house looking thing should appear. Position in around the same spot you see in the screenshot below.

8. Double click on the newly created color stop and type in the hex code of #848484 like we did in step five.

The finished gradient dialog box should look like my screenshot below.

9. This is the conclusion of the background section this is what we should have up to this point. If you do not have this go back through and try again.

Adding Separator Lines

10. Now it is time to create the separators between each of the navigation items. Grab your line tool, and make sure your weight is set to 1px. CREATE A NEW LAYER. Put your cursor so it is flush with the top if the navigation click and then hold shift and drag down until it meets the bottom edge of the navigation then release. You should have something similar to below.

11. Once you have that line drawn successfully use the shortcut Control + J five times. This will duplicate that line you just made six times. Then evenly distribute each of the lines by pressing the “V” key on your keyboard and then using your right arrow key on your keyboard. See the example below to get the right spacing.

12. Once you have them all lined up select all of the lines you just created and drag them down to the new layer icon in your layers palette. This will copy all of the layers. Right click on any selected layer and choose merge layers. Hide the other horizontal lines for the moment. Right click and choose blending options. Choose gradient overlay and click on your bottom left color stop and change it to #565656 and then change the bottom right color stop to #8f8f8f.

Adding The Text

13. Set your font to Helvetica 12pt BOLD with the hex code #262626. Click in the middle of the first section and type Apple.

14. Continue to fill in each section, use the screenshot below as a reference

15. Now to add the pressed text look. Click on the text layer where you just typed Apple and hit control + j (pc) or command + j (mac). Now hit the “V” key on your keyboard and hit the down arrow once, what this does is it first duplicates the layer and secondly moves it down 1 pixel. Now move the newly created Apple Copy layer underneath the first apple layer.

16. Right click on the Apple Copy Layer and choose blending options. Check the color overlay option and put in the hex code #c1c1c1. This will make the text appear as if it is being pressed in.

17. Repeat steps 15-16 on each one of the navigation items Apple through Support. This effect must be applied to all of the text on the navigation bar.

Finished!!

Click for the finished product.

Click here to download source files

Technorati Tags: Apple Navigation tutorial, Navigation photoshop tutorial, menu tutorial, Apple menu tutorial

As some of you may already know, I am a HUGE Apple fanatic. Well, this
past Friday, the 28th of August, Apple released their upgraded version
of OS X which they so lovingly named “Snow Leopard”. Oh Joy. Now, before
everyone starts jumping up and down with giddy school boy excitement, you
should know that this isn’t a totally new OS.
Apple hasn’t introduced any
earth-shattering additions with Snow Leopard. In fact, when you finish
installing it, you may not notice anything new at all. But there are
quite a few subtle changes that will enhance usability and give you a
more enjoyable overall experience.

1. Faster Finder

Finder was rewritten in Cocoa to be completely compatible with newer technologies, including 64-bit support.

2. New Exposé and Stacks

Exposé is more convenient now that it is integrated into the dock. You can now click and hold on an application in the dock and it will exposé the windows you have open specific to that application.

Stacks gained the ability to scroll when you have the view set to Grid. Normally it would preview 20-25 of the files in a given folder, but now the folder can have hundreds of files and you can scroll through them without clicking out of stacks.

3. Faster Time Machine Backups

Snow Leopard not only increases the speed of your initial backup, it increases each subsequent backup by 80%.

4. Faster Wake up and Shut down

Your Mac will wake up twice as fast when you have screen locking
enabled, and the shut down process is now 80 percent faster.

5. Frees up a minimum of 7GB’s of hard drive space

Snow Leopard requires less than half of the space that Leopard
(the previous OS) required, freeing up at least 7GBs of space on
your hard drive. For me personally, my installation of Snow Leopard freed
up about 12GB’s, which can be summed up in one word: Awesome.

These are just a few of the small changes and enhancements that Snow
Leopard has introduced to the world of Macintosh. Even now, I’m constantly
finding new additions and improvements, and each new find impresses me
even more. All of the subtleties may not seem like much individually, but
put them all together and they equal one great OS, Snow Leopard OS X. You
can get your copy of Snow Leopard at an Apple store near you, or you can
order online at store.apple.com. It’s only $29, so do something special
for the Mac in your life.

Technorati Tags: Snow Leopard features, Apples operating system, Snow Leopard OS X, New Features

People can argue about features that the iPhone doesn’t have but in the end the iPhone is the most popular platform for developers right now. iPhone App developers are a hot commodity, because the device is extremely popular. I have had an iPhone since day one and this post is going to compile 10 of my favorite apps that help my web development workflow. See who makes the cut!

1. Analytics App

This app is extremely useful to any web developer. It links up to your Google Analytics account so you can track your website from your iPhone. It has support for Google Adsense and the overall statistics are very detailed. I can track all of my websites right through this app, which has an easy appealing user interface. This is number one on my list because I use it most often.

Screenshot:

2. Ego

This relatively new app is a great addition to any web developers iPhone app list. Ego performs similar tasks as the Analytics App above, but it has support for Twitter, Feedburner, Mint, Google Analytics, Google PageRank and more. The information is not as detailed as the Analytics App, but it provides quick access to views, page views, followers, latest tweet, subscribers, and PageRank. All of these features together in a clean user interface creates a highly useful app.

Screenshot:

3. WordPress App

The WordPress App is a great app for any developers like me, who run a blog. You can approve/ disapprove comments, make posts, edit posts, and much more. This app comes in handy when a friend emails you and says that you put the wrong URL on one of your posts, but your in the office with no access to a computer. Whip this app out and fix it on your phone!

4. What The Font

WhatTheFont is a great technology that is brought to you by MyFonts.com. You can take a picture of a heading on magazine and this app will tell you with stunning accuracy what font it is. Being able to identify font faces wherever your at is a huge feature that can boost your creativity. Happy font hunting!

Screenshots:

5. Colorpedia

Colorpedia is a clever little app that lets you create your own color palettes. You can choose a color, and this app will show you 7 different color schemes. To name a few: Monochromatic, Complementary, Analogus, and Triadic. Very helpful for some spontaneous color inspiration.

Screenshots:

6. Byline

Byline is an RSS Reader application. It has a clean and functional UI that has different styles built in. It allows you to set options such as flagging your favorite posts, offline reading, in application browsing, and badge icons on the home screen. Bring in all your feeds from Google Reader with this helpful app.

Screenshots:

7. Tweetie

Tweetie is my favorite app for viewing tweets. There are plenty of other twitter apps out there, but this app does plenty for me. It supports multiple twitter accounts and has full twitter functionality. You are able to search for tweets inside of the app and choose if you want to follow the author. This app also has a beautiful interface with multiple skins.

Screenshots:

8. BeejiveIM

BeejiveIM is a relatively “expensive” iPhone app coming in at $9.99 but I love it. It keeps you connected to many different chat services such as, Google Chat, AIM, Yahoo Messenger, IQC, Facebook, Myspace and Jabber all at the same time. Use this to keep in touch with your fellow web developers. This app uses Apple’s “Push” technology which allows you to receive messages even when out of the application.

9. Pandora

As web developers it is always a good idea to relax a little sometimes. Pandora is online radio that plays music that you want to here. First you choose a song or artist you enjoy, then Pandora finds songs from that artists genre and plays them for you. The service is free you just have to sign up for an account. Take some time and relax while listening to some tunes!

Screenshots:

10. iDisk app

This is Apple’s latest app, but is only available to Mobile Me subscribers. This allows you to view the contents of your iDisk, share files from it, and delete items from it. It has a great UI (of course) and is a great addition for any Apple geek (like me).


That’s it! There are many more apps that could be on my list, but these apps seem to be the ones I use the most. If you have any other apps as a web developer that you think deserve to be on this list leave a comment.

Technorati Tags: iPhone Apps for web developers, must have iPhone apps, 10 iPhone apps for web designers

This is a set of icons which are a replica of Apple’s macbook pro.  The resolution is surprisingly high in this set, which makes them easy to incorporate.    These Icons can be used in a variety of ways.  Use them to create wallpapers, show a website, or incorporate them into a portfolio.  Grab this set and be prepared to use your imagination.

This set is brought to you by GPERSAUD

Grab the set here!