As technology changes and improves, the web shapes itself around it. If you told me two years ago that I could code a website using browser applications, I would have laughed and asked if you were kidding. Now, when I’m on the fly, I’ve found that coding on browsers has become as second nature as breathing, and I strain to remember the last time I installed an .app file into my system. There are some in-browser IDEs that let me do more than Dreamweaver.
My logic is that if I can find a Cloud-Based Alternative or if a website can do it for me, why bother wasting hard drive space? More often than not, some solution to my problem is available that doesn’t require me to install anything.
Like most designers, I’m a digital native—a product of Gen Y through and through. My memories of the early 2000s are covered in bloated browsers and applications that tried to be the best at everything. Development is a different playground now that Apps are more focused on helping the user get things done. Usability, experience, and interface now carry as much weight as programming.
Let’s take a then and now. Back in 2004, the AOL desktop application looked something like this:
10 years later, I can access the same format of content from my browser, with roughly the same functionality.
How much we can do on the web and the web’s evolution will never cease to amaze me, so here are a few web apps that will showcase the browser’s power and hopefully try to help you in your workflows.
Koding is social coding software on steroids. It’s being hyped around in the development scene and for fairly good reasons. There’s an almost limitless range of support, coupled with a built-in community for criticism and questions. I love what they’re doing with it so far, and I can’t wait to see where this is going.
02. Frooont
LINK TO WEBSITE
Froont is similar to Koding in that it’s also an IDE, but this one focuses primarily on responsive web design. It’s a gorgeous editor that lets you work on the visual side of responsive web design while still churning out validated code, proving to be more than just a simple visual tool.
Think of a remote desktop, where one user controls everything, and the other gets to watch. Surf.ly is sort of like that but for the browser. This app has a lot of potential when you’re telecommuting and need to hash things out with the designer/developer half of the creation process or show clients how things work and flow.
Responsive testing is the key to prosperity. This neat little tool showcases some of the more common formats to make things easier for front-end developers. If anything, it will help answer the question, ‘ Is this div too big?’
05. Flexible Math
LINK TO WEBSITE
It’s a lot more basic than the rest of the apps here, but good grief – a godsend nonetheless. Now, you don’t have to struggle with pixels and wrangle your calculator for percentage calculations. It cuts the coding process by half.
06. IXD Checklist
LINK TO WEB SITE
Have you ever worked on a site and asked yourself questions like, “Will the user understand this?” “What are they getting out of it, and how can I improve their experience?” This checklist is the holy grail of things you should double-check before your website goes live.
07. Alto
LINK TO WEBSITE
AOL Strikes again. Alto is a gorgeous e-mail client with a keen focus on typography. It lets you run through photos sent to you and attachments with ease. It also gives you a round up/pie chart on which social networks are taking up your inbox space. Bonus! It lets you sign into multiple Gmail accounts.
The screencap blurred due to privacy.
08. Icebergs
LINK TO WEBSITE
A crude way to describe Iceberg is that it’s basically the love child of Pinterest and Del.Icio.us but tailored for designers. It’s a more organized way to social bookmark. Installing the browser extension that comes with it is highly recommended. Primarily, I use it as a tool to filter and organize my inspirations. I’ve found that most designers/devs are like pack rats regarding links, so this is another nice way to keep them all in order.
09. Mural
LINK TO WEBSITE
Web Designers tend to be very visual thinkers. Murally provides an online whiteboard to map out your ideas. This is great for brainstorming projects, as you can collaborate and see things from afar.
10. Feed.ly
LINK TO WEBSITE
In this industry, it’s very important to stay on top of trends and know what’s going on. I can and will always stress the importance of being up to date when it comes to web design.
11. GoMockingBird
LINK TO WEBSITE
An old favorite, Go Mockingbird is the tool I use most frequently for wire-framing. It also supports 960gs, so you can mock up with a grid.
12. PSD Validator
LINK TO WEBSITE
Are your PSDs friendly for other designers, or do they make absolutely no sense at all? When we use Photoshop, we all have different file naming methods and quirks. The PSD validator tries to streamline things. I’d use it if I was working on a single PSD with a team of designers.
13. Clara.io
LINK TO WEBSITE
Clara is an amazing 3D program that’s accessible on any modern browser. It’s definitely not as powerful as MAYA or Zbrush, but I can see the potential to make some amazing results.
14. TriDiv
LINK TO WEBSITE
TriDiv is similar to Clara in that it’s an in-browser 3D rendering program. It’s a lot simpler in terms of functionality, but it does offer something different in that it exports to CSS3. The potential is limitless if you can creatively apply this to a web page.
15. Stylify
LINK TO WEBSITE
It’s hard not to look at a website with a gorgeous color palette and think, “What did they use?” or ask yourself what font that is. This little tool helps you peek at other designers’ style guides.
Did we forget anything, or did you have fun using any of these tools? Let us know your thoughts by leaving a comment below. You can also reach us on our Facebook, Twitter, and Google+ profiles. Lastly, our RSS Feeds are open for subscription so that you can stay creative.