Web Design Tools & Resources

Creative Project & Development Tools

Mind Mapping

Outlining

Note Taking

  • Text Edit
  • Notational Velocity (or more popular alternative nvALT)
  • Evernote (collect pictures, links, documents, etc.)
  • A plethora of other options these days.

Documenting your Process

You might consider blogging regularly, for instance on a BloggerTumblr or equivalent blogging community, or even better – the blog on your own WordPress site!

Another popular avenue is to post design examples or iterations to niche social networks such as Dribbble (graphic art), Behance (any type of design), or CodePen (code).

Wireframing/Mockups

Roll your own with some pre-prepared wireframe templates:

Prototyping

HTML/CSS (the responsible and responsive way of the future)

  • [Hammer](http://hammerformac.com/“Hammer for Mac – a web development tool for web designers and developers”) – New I haven’t tried it out yet but it looks awesome.

Code Editors

You can essentially use any plain text editor to write code. You could even use MS Word (as long as you save out as plain text format) but that’s kind of like using a mallet to unlock a door(?) I guess you could even write on the back of a napkin and OCR scan it if you had no computing device around you at the time. My point is, it’s the end result of the code in the correct format that matters, not how you get there. So don’t get too caught up in all the possibilities.

But nowadays there are some really excellent tools for the job. Let me review a few I’ve favorited over the years and then come back around to the free app (Komodo Edit) that’s been provided on the lab computers here. Overall I wouldn’t bother if it doesn’t have at a bare minimum: Syntax Coloring, Code Completion, Code Folding (I’ll review all of these later).

Cross-Platform

Sublime Text 3.0 Beta (unlimited free trial, $70)
  • The text editor you’ll fall in love with. That’s actually their byline, but I’ll admit I’m currently very smitten.
  • Currently has a large swath of the coding community behind it who have developed a smörgåsbord of plugins to help you expand it’s functionalities.
  • Available on Mac, Windows or Linux
  • Has an unorthodox Preference system, but once you get used to that it is super super powerful and has numerous ‘keyboard friendly’ time saving features.
  • Incidentally it’s written by an Australian!

Komodo Edit (Free)

  • A free open-source for Mac, Windows, Linux
  • Java app so it going to be a little slow, clunky, security-plagued and not feel like a native app in any OS.
  • Remarkably full-featured with all the bells and whistles you should need.
  • What’s on your lab computers.

All the rest of my suggestions are Mac only, but if you’re on Windows, seriously just get Sublime Text and call it a day.

Mac

TextMate 1.5.xx ($54)
  • Was my environment of choice prior to Sublime Text.
  • Huge mature plugin/bundle library
  • Where the current Sublime Text community flocked from when it became painfully obvious the developer had all but abandoned work on it after a year or so.
  • The 2.0 version that’s been in development for a long time has since become quasi-open source and free to download on GitHub – textmate, where a small group of developers continue to be dedicated to it.
  • Still super-powerful but it’s future is uncertain and the community is not around it anymore if you find that important.
BBEdit 10 ($50)
  • A stalwart in the mac developer community and highly respected. It launched 21 years ago!! so it’s very well thought out, fully developed and fairly up with the times as well.
  • It doesn’t suck ® – no seriously, that’s their motto 😉
Coda 2 ($80)
  • A truly pixel-perfect macalicious application.
  • The editor is integrated with a: file server (for local and FTP remote sync), terminal, code library(?)
  • Open plugin architecture
  • Not as deeply powerful as the above alternatives
  • Focused strongly around HTML/PHP coding, and live-editing files on the server (generally a bad-practice on live sites, but super quick & handy in a development context).
Dreamweaver ($$$)
  • If you have Adobe CS you’ve likely already got this.
  • It’s a lot better in recent versions, but still has been traditionally considered to be a bit too heavy of an app just for web coding (like the MS Word of text processors)
  • You very likely to encounter it in the commercial world though so it’s good to be familiar.

Honorable Mentions

Chocolat ($49)
  • New kid on the block, but worth keeping an eye on
  • Modelled closely around TextMate but lacking many of the deeper features.
Smultron ($5.50)
  • Was free for many years but recently gone paid through the M.A.S.
  • Very clean friendly interface with just the bare essentials.
TextWrangler (Free)
  • The little brother to BBEdit
  • No where near as powerful but a worthy free option.
  • Has a strong diff capability if your other code editor lacks this when you need it.

iOS Mentionables:

Textastic
  • can actually do some serious coding efforts with this.
  • Features include: syntax highlighting, code completion?, ftp server access, Dropbox sync
Diet Coda ($19)
  • a very lightweight companion app to Coda.
  • Not much of a standalone editor as you can’t develop locally on the iPad with it.
  • It’s mainly for editing live files on-the-fly on your server
  • Has a novel AirPreview feature where you can do quick iPad screen previews of the page you’re working on in the desktop version (XScope is a great app for doing just this purpose too).

Diff Tools

Every now and then you’ll find yourself wanting to compare 2 versions of the same file to specifically see what the differences are. What has changed from one iteration to the next. Whether they be:

  • changes you’ve made to your local version and you want to compare to the published live version.
  • those of others on a team and there’s potentially a conflict.

Options Include:

  • A plugin your editor may have available (Sublime Text, Komodo have this at least.)
  • TextWrangler (mentioned above)
  • File Merge (included in the free install of Apple’s XCode Developer Tools)
  • Kaleidosope ($70) – Definitely pricey but it’s amazingly powerful and not only compares differences in text, but also folders and images (for example photos or mockups ).

FTP/SFTP File Server Clients

If you’re hosting your site on an external server you’ll want to have easy remote access to that file space. (S)FTP has traditionally been the way to ‘mount’ a remote server folder on your computer. Some options include:

Transmit
  • Same company, Panic, that makes Coda, Diet Coda. Completely unrelated but they also made my favourite pre-iTunes music player many years ago – Audion (RIP).
Cyberduck (Free)
  • Very full featured, but occassionally buggy connection issues.
FileZilla (Free)
  • Free, open-source
  • Full-featured
  • Cross-platform.

Browsers

For the purposes of this class we’re developing exclusively in HTML5/CSS3 so only the latest versions of these browser matter. In the real world unfortunately we still have to consider older versions of IE (8,7, sometimes 6-egads!) which can often double your development and testing times. You should however have all the relevant web browsers on hand that you can – to test your design/site on:

  • Safari (based on Webkit, which in turn was based on Konqueror from Linux)
  • Chrome (Webkit too but has slight variances in support)
  • Firefox (based on the Gecko engine)
  • Opera (huge change for the better here as they just announced they are going all Webkit).
  • IE – tricky if you’re on a Mac. Options include:
    • running a virtual machine with Windows (takes up a lot of space, truly need 2 instances of Windows so you can test Windows7/8 with IE9–10, plus WindowsXP with IE8 and below). Here’s a totally free option for doing this: http://joemaller.com/2896/ie6-ie7-and-ie8-compatibility-testing-with-microsoft-virtual-pcs/
    • Use some online services (see below).
    • borrow a PC on and off during your testing phase.
    • have a test PC around. A cheap netbook almost costs less than buying Windows and some decent Mac Virtualisation software these day.

Online Multiple Browser Testing

In lieu of having every machine and browser version at your disposal to test, a more recent trend is to rely on sites that have organised the ability to see your pages simultaneously across every possible platform. They worry about maintaining all the systems and you just test your sites in them. Some current options include:

  • Browsershots – (Free) It can be a long wait in between page loads, and it’s missing some browser options but it gets the job done up to a point.
  • Adobe Browser Lab – (Free) A complimentary service of Adobe, comprehensive of latest desktop platforms only (no mobile). Can connect to local server using FireBug or to Dreamweaver or a CMS if you’re a Adobe CS customer.
  • Browserstack. (Paid) – If you’re doing this professionally it’s fully worth the cast as it’s fast, fully comprehensive of all platforms desktop & mobile, can choose different resolutions/orientations and you can even connect it to test live from your local development server.

Plugins for Developing/Testing

  • Firebug (Firefox, Chrome, Safari)
  • Web Developer Toolbar (Firefox, Chrome)
  • Built-in Browser Tools – most of the modern browser have their own built-in developer tools that come quite close and sometimes exceed Firebug. You can typically view the source for HTML, CSS, Javascript, etc. Make live non-destructive edits and see the results immediately. You can even save your modified stylesheets, etc. out externally and replace the one on your server. Chrome is working on making this possible for HTML editing as well, so soon completely developing in the browser will be possible (but maybe not preferable).

Online Resources for self-guided learning

General References

HTML5 Resources

  • HTML5 Reference – even though HTML5 is fast becoming the standard, it is not technically a complete specification yet.
  • HTML5 Rocks – A resource for open web HTML5 developers
  • HTML5 Doctor
  • HTML5 Please – a handy guide to see if an HTML5 feature is implemented in a browser version yet, and possible workarounds.
  • HTML5 Readiness – a scrumptious pie/bar chart that maps the timeline of HTML5 & CSS3 implementation in all the major browsers.
  • Can I use… – another index of specific HTML5/CSS3 elements and if a browser supports them.
  • HTML5 Boilerplate – a front-end template to ensure current and backwards compatibility for your HTML5 project.
  • SwitchToHTML5 – a novel experiment to convert your existing HTML4 content to HTML5.
  • WDG HTML Validator
  • The Working Design Groups validator to test your pages for syntax errors, compatibility and other bugs.

CSS3 Resources

  • W3 CSS – the W3’s dedicated portal to CSS.
  • CSS-Tricks – another popular online magazine dedicated to CSS.
  • CSS3 Please! – a neat sandbox to try out some CSS3 code live in the browser.
  • 960 Grid System – an effort to streamline the dev community by mapping out commonly used dimensions and alignment of elements based on a 12 or 16 column grid. Stuck in time a bit now as servicing the baseline screen dimensions of 1024×768 but still relevant to consider and adapt.
  • Unsemantic CSS Framework – the fluid/responsive successor to 960.gs

Online Courses & Blogs

  • Lynda.com – as QUT students you have free access to all online courses. An excellent, well-respected and very comprehensive archive.
  • net tuts+ – (FREE & PREMIUM) Even with free access there is a large cache of web development tutorials, from beginner to advanced.
  • C<>de School – an independent, fresh approach. You can work on assignments within the browser. Free intro levels but paid after that. Currently running a Free All Access Pass for 48 hours.
  • W3schools.com – You invariably will be inundated with links to this site during your searches. There’s no doubt they have a plethora of information on there. Some of their practices are considered by many however to be misleading and teach false standards and they claim to offer ‘certification’ that isn’t ratified by anyone, and as their name implies — they have no affiliation with the W3C. Google this yourself or check out w3fools.com. In the end, I recommend double-checking alternative solutions/practices at the very least and making you’re own assessment of what to trust here.
  • Smashing Magazine – a very popular online magazine for web design in general.
  • A List Apart – a well respected resources run be developers who forged the current standards. Also run an annual web design conference called An Event Apart.

Podcasts