I have been building websites for over 10 years now. It’s usually the same drill each time. Use a graphics editing program to design the site and cut and optimize the images. Use an HTML editor to script the site. View, test, and debug in a browser. Normally, I go back and forth between these apps until I achieve the desired results in the browser. Well it looks like all of this will all be done inside the browser soon. Being able to design and edit in the platform I’m targeting is huge to me. So, I am very excited by all of the innovation in this space.

I have been following online, in browser, graphic editing programs for a while. Aviary provides Phoenix, one of my favorites. I haven’t had a chance to work with most of them, but here are a few on my list to review:

• pixlr.com
• picnik.com
• splashup.com

There are more, free and paid, but for the most part these are photo editors and not specifically suited to web design. The point is, if this is where photo editing is headed, a tool robust enough for website design is sure to follow. Splashup.com feels an awful like Photoshop, my favorite web design tool which is a traditional photo editor. None the less, these tools can be used to create web graphics or even a full website design.

So, we can create our website graphics in browser what about image optimization. If you want to use graphics on your site they have to be optimized to make your pages load faster. I use to use Photoshop exclusively to optimize my images, but have already moved this part of my process in the browser. My favorite tool hands down is Smush.it, a part of Yahoo’s YSlow Firebug plugin. Even when I optimize images in Photoshop I will run them through Smush.it to make sure I squeezed out every ounce of performance goodness. There are others and like the graphic editors I haven’t used most of them:

• dynamicdrive
• imageoptimizer.net
• GIFBot

Well we have created our graphics in the browser, optimized images in the browser, what about scripting the web pages. HTML editing in the browser has been common since Rich text WYSIWYG editors came in vogue. Also, developer tools like Firebug have allowed us to make small changes to HTML and CSS and see the results of the edits right in the browser, but you can’t save the edits and you have to transpose the edits to your HTML editor to save the updated page. What I have been missing is a tool that would allow me to build a page from scratch and save the results all inside a browser interface. Well, now there’s Builder Pro and Snap Pages both vying for my web design affection. I haven’t had a chance to actually use either of these tools. They have just peeked my interest and prompted me to write this post.

Both of these tools have great videos providing an intro into the capabilities of the tools, but Snap Pages may be more suited to consumer use than professional web design, but the jury is still out on that. Either way, Snap Pages looks great and produces some stunning sites, but I haven’t checkout out the source code it produces yet.

Builder Pro is more in line with what my idea of an in browser editor would be. When I watched the video of this tool redesigning twitter.com’s home page, my jaw dropped. Having used Firebug to do similar things on my sites, seeing a tool dedicated to making this easy just floored me. If you knew me, you would know that I don’t get excited about many things on the internet, but this one has me excited. I can’t wait to try it. If this works like I hope it will, it will save me time and make my sites better at the same time.

BuildorPro in action from James Law on Vimeo.

If I can edit in the browser and instantly see the results of my edits in Firefox, IE, Chrome, Opera, Safari or my mobile phone, that is a major improvement in my process. Can you imagine getting a call to make an emergency edit to a web page, pulling out your smart phone, make the edit in the browser, test, and publish? All from your phone. Work on any computer or device with a compatible browser and internet connection. I don’t have to buy multiple high price licenses for each software package I use for all of the computers I may want to design on. The browser has the ability to free use of our dependence on the old ball and chain OS. No more installation, no more incompatibility issues, no more worrying about getting a new computer ready to design websites. Granted we inherit new and unexplored problems with browser based software, but the vision of the freedom to be gained makes it look like the grass is greener on the other side.

I can definitely see myself designing a static website totally in the browser. Now only if graphic design, image optimization, HTML editing can all be integrated into one tool. Then on top of that throw in some server side and database development, project management, time tracking and invoicing, audio/video editing, and strategy development and that would be a tool that would allow me to throw away all of these expensive programs. Well that won’t happen anytime soon, but its good to see that it may be a reality in my lifetime.

View more posts in: Bits and Bytes