{"id":104,"date":"2013-03-06T02:40:16","date_gmt":"2013-03-05T16:40:16","guid":{"rendered":"http:\/\/www.jasonshanks.com\/?p=104"},"modified":"2016-08-03T01:48:56","modified_gmt":"2016-08-02T15:48:56","slug":"web-design-tools-resources","status":"publish","type":"post","link":"https:\/\/www.jasonshanks.com\/2013\/lectures-and-tuts\/kib204-web_interface_design\/web-design-tools-resources\/","title":{"rendered":"Web Design Tools &#038; Resources"},"content":{"rendered":"<h2 id=\"creativeprojectdevelopmenttools\">Creative Project &amp; Development Tools<\/h2>\n<h3 id=\"mindmapping\">Mind Mapping<\/h3>\n<ul>\n<li><a title=\"MindNode\" href=\"http:\/\/mindnode.com\/\">MindNode<\/a> (Free, Pro &amp; iOS versions)<\/li>\n<li><a href=\"http:\/\/www.ithoughts.co.uk\/iThoughtsHD\/Welcome.html\">iThoughts HD<\/a> (iPad)<\/li>\n<\/ul>\n<h3 id=\"outlining\">Outlining<\/h3>\n<ul>\n<li><a title=\"Top of Tree - Tree, outliner for MacOSX. Horizontally expanding outliner\" href=\"http:\/\/www.topoftree.jp\/en\/tree\/\">Tree<\/a><\/li>\n<li><a title=\"OmniOutliner\" href=\"http:\/\/www.omnigroup.com\/products\/omnioutliner\/\">OmniOutliner<\/a><\/li>\n<\/ul>\n<h3 id=\"notetaking\">Note Taking<\/h3>\n<ul>\n<li>Text Edit<\/li>\n<li>Notational Velocity (or more popular alternative <a href=\"http:\/\/brettterpstra.com\/projects\/nvalt\/\">nvALT<\/a>)<\/li>\n<li><a title=\"Remember everything with Evernote...\" href=\"http:\/\/evernote.com\/\">Evernote<\/a> (collect pictures, links, documents, etc.)<\/li>\n<li>A plethora of other options these days.<\/li>\n<\/ul>\n<h3>Documenting your Process<\/h3>\n<p>You might consider blogging regularly, for instance on a\u00a0<a href=\"http:\/\/www.blogger.com\">Blogger<\/a>,\u00a0<a href=\"https:\/\/www.tumblr.com\">Tumblr<\/a>\u00a0or equivalent blogging community, or even better \u2013\u00a0the blog on your own <a href=\"https:\/\/wordpress.org\">WordPress<\/a> site!<\/p>\n<p>Another popular avenue is to post design examples or iterations to niche social networks such as\u00a0<a href=\"https:\/\/dribbble.com\">Dribbble<\/a>\u00a0(graphic art),\u00a0<a href=\"https:\/\/www.behance.net\">Behance<\/a>\u00a0(any type of design), or\u00a0<a href=\"http:\/\/codepen.io\">CodePen<\/a>\u00a0(code).<\/p>\n<h3 id=\"wireframingmockups\">Wireframing\/Mockups<\/h3>\n<ul>\n<li>Powerpoint\/Keynote<\/li>\n<li><a title=\"Balsamiq Mockups\" href=\"http:\/\/www.balsamiq.com\/products\/mockups\">Balsamiq Mockups<\/a><\/li>\n<li>Photoshop<\/li>\n<li>Illustrator<\/li>\n<\/ul>\n<p>Roll your own with some pre-prepared wireframe templates:<\/p>\n<ul>\n<li><a title=\"Keynote Kung-Fu - Wireframe Toolkit for Keynote\" href=\"http:\/\/keynotekungfu.com\/\">Keynote Kung-Fu<\/a><\/li>\n<li><a title=\"Free Photoshop Wireframe Kit\" href=\"http:\/\/rafaltomal.com\/free-photoshop-wireframe-kit\/\">Free Photoshop Wireframe Kit<\/a><\/li>\n<li><a href=\"http:\/\/konigi.com\/tools\/omnigraffle-wireframe-stencils\">Konigi &#8211; OmniGraffle Wireframe Stencils<\/a><\/li>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/2010\/02\/05\/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files\/\">50 Free UI and Web Design Wireframing Kits, Resources and Source Files<\/a> &#8211; a bit out of date but gives you a sense of the many others you could search for.<\/li>\n<\/ul>\n<h3 id=\"prototyping\">Prototyping<\/h3>\n<h4 id=\"htmlcsstheresponsibleandresponsivewayofthefuture\">HTML\/CSS (the responsible and responsive way of the future)<\/h4>\n<ul>\n<li>[Hammer](http:\/\/hammerformac.com\/\u201cHammer for Mac &#8211; a web development tool for web designers and developers\u201d) &#8211; <em>New<\/em> I haven\u2019t tried it out yet but it looks awesome.<\/li>\n<\/ul>\n<h3 id=\"codeeditors\">Code Editors<\/h3>\n<p>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\u2019s 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\u2019s the end result of the code in the correct format that matters, not how you get there. So don\u2019t get too caught up in all the possibilities.<\/p>\n<p>But nowadays there <em>are<\/em> some really excellent tools for the job. Let me review a few I\u2019ve favorited over the years and then come back around to the free app (Komodo Edit) that\u2019s been provided on the lab computers here. Overall I wouldn\u2019t bother if it doesn\u2019t have at a bare minimum: Syntax Coloring, Code Completion, Code Folding (I\u2019ll review all of these later).<\/p>\n<h4 id=\"cross-platform\">Cross-Platform<\/h4>\n<h5 id=\"sublimetext3.0betaunlimitedfreetrial70\"><a title=\"Sublime Text: The text editor you'll fall in love with\" href=\"http:\/\/www.sublimetext.com\/\">Sublime Text 3.0 Beta<\/a> (unlimited free trial, $70)<\/h5>\n<ul>\n<li>The text editor you\u2019ll fall in love with. That\u2019s actually their byline, but I\u2019ll admit I\u2019m currently very smitten.<\/li>\n<li>Currently has a large swath of the coding community behind it who have developed a sm\u00f6rg\u00e5sbord of plugins to help you expand it\u2019s functionalities.<\/li>\n<li>Available on Mac, Windows or Linux<\/li>\n<li>Has an unorthodox Preference system, but once you get used to that it is super super powerful and has numerous \u2018keyboard friendly\u2019 time saving features.<\/li>\n<li>Incidentally it\u2019s written by an Australian!<\/li>\n<\/ul>\n<h4 id=\"komodoeditfree\"><a title=\"Komodo Edit is a Free Open Source Editor for Perl, Python, Tcl, PHP, Ruby &amp; Javascript\" href=\"http:\/\/www.activestate.com\/komodo-edit\">Komodo Edit<\/a> (Free)<\/h4>\n<ul>\n<li>A free open-source for Mac, Windows, Linux<\/li>\n<li>Java app so it going to be a little slow, clunky, security-plagued and not feel like a native app in any OS.<\/li>\n<li>Remarkably full-featured with all the bells and whistles you should need.<\/li>\n<li>What\u2019s on your lab computers.<\/li>\n<\/ul>\n<p>All the rest of my suggestions are Mac only, but if you\u2019re on Windows, seriously just get Sublime Text and call it a day.<\/p>\n<h4 id=\"mac\">Mac<\/h4>\n<h5 id=\"textmate1.5.xx54\"><a title=\"TextMate \u2014 The Missing Editor for Mac OS X\" href=\"http:\/\/macromates.com\/\">TextMate 1.5.xx<\/a> ($54)<\/h5>\n<ul>\n<li>Was my environment of choice prior to Sublime Text.<\/li>\n<li>Huge mature plugin\/bundle library<\/li>\n<li>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.<\/li>\n<li>The 2.0 version that\u2019s been in development for a long time has since become quasi-open source and free to download on <a title=\"textmate\/textmate \u00b7 GitHub\" href=\"https:\/\/github.com\/textmate\/textmate\">GitHub &#8211; textmate<\/a>, where a small group of developers continue to be dedicated to it.<\/li>\n<li>Still super-powerful but it\u2019s future is uncertain and the community is not around it anymore if you find that important.<\/li>\n<\/ul>\n<h5 id=\"bbedit1050\"><a title=\"Bare Bones Software | BBEdit 10\" href=\"http:\/\/www.barebones.com\/products\/bbedit\/index.html\">BBEdit 10<\/a> ($50)<\/h5>\n<ul>\n<li>A stalwart in the mac developer community and highly respected. It launched 21 years ago!! so it\u2019s very well thought out, fully developed and fairly up with the times as well.<\/li>\n<li>It doesn\u2019t suck \u00ae \u2013 no seriously, that\u2019s their motto \ud83d\ude09<\/li>\n<\/ul>\n<h5 id=\"coda280\"><a title=\"Coda 2\" href=\"https:\/\/www.panic.com\/coda\/\">Coda 2<\/a> ($80)<\/h5>\n<ul>\n<li>A truly pixel-perfect macalicious application.<\/li>\n<li>The editor is integrated with a: file server (for local and FTP remote sync), terminal, code library(?)<\/li>\n<li>Open plugin architecture<\/li>\n<li>Not as deeply powerful as the above alternatives<\/li>\n<li>Focused strongly around HTML\/PHP coding, and live-editing files on the server (generally a bad-practice on live sites, but super quick &amp; handy in a development context).<\/li>\n<\/ul>\n<h5 id=\"dreamweaver\"><a href=\"http:\/\/www.adobe.com\/products\/dreamweaver.html\">Dreamweaver<\/a> ($$$)<\/h5>\n<ul>\n<li>If you have Adobe CS you\u2019ve likely already got this.<\/li>\n<li>It\u2019s 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)<\/li>\n<li>You very likely to encounter it in the commercial world though so it\u2019s good to be familiar.<\/li>\n<\/ul>\n<h4 id=\"honorablementions\">Honorable Mentions<\/h4>\n<h5 id=\"chocolat49\"><a title=\"Chocolat \u2039 Text Editor for Mac\" href=\"http:\/\/www.chocolatapp.com\/\">Chocolat<\/a> ($49)<\/h5>\n<ul>\n<li>New kid on the block, but worth keeping an eye on<\/li>\n<li>Modelled closely around TextMate but lacking many of the deeper features.<\/li>\n<\/ul>\n<h5 id=\"smultron5.50\"><a title=\"Smultron - Peter Borg Apps\" href=\"http:\/\/www.peterborgapps.com\/smultron\/\">Smultron<\/a> ($5.50)<\/h5>\n<ul>\n<li>Was free for many years but recently gone paid through the M.A.S.<\/li>\n<li>Very clean friendly interface with just the bare essentials.<\/li>\n<\/ul>\n<h5 id=\"textwranglerfree\"><a title=\"Bare Bones Software | TextWrangler\" href=\"http:\/\/www.barebones.com\/products\/textwrangler\/index.html\">TextWrangler<\/a> (Free)<\/h5>\n<ul>\n<li>The little brother to BBEdit<\/li>\n<li>No where near as powerful but a worthy free option.<\/li>\n<li>Has a strong diff capability if your other code editor lacks this when you need it.<\/li>\n<\/ul>\n<h4 id=\"iosmentionables:\">iOS Mentionables:<\/h4>\n<h5 id=\"textastic\"><a title=\"Textastic - Text, Code and Markup Editor with Syntax Highlighting - FTP, SFTP, Dropbox - for iPad\" href=\"http:\/\/www.textasticapp.com\/\">Textastic<\/a><\/h5>\n<ul>\n<li>can actually do some serious coding efforts with this.<\/li>\n<li>Features include: syntax highlighting, code completion?, ftp server access, Dropbox sync<\/li>\n<\/ul>\n<h5 id=\"dietcoda19\"><a title=\"Diet Coda\" href=\"http:\/\/panic.com\/dietcoda\/\">Diet Coda<\/a> ($19)<\/h5>\n<ul>\n<li>a very lightweight companion app to Coda.<\/li>\n<li>Not much of a standalone editor as you can\u2019t develop locally on the iPad with it.<\/li>\n<li>It\u2019s mainly for editing live files on-the-fly on your server<\/li>\n<li>Has a novel AirPreview feature where you can do quick iPad screen previews of the page you\u2019re working on in the desktop version (XScope is a great app for doing just this purpose too).<\/li>\n<\/ul>\n<h3 id=\"difftools\">Diff Tools<\/h3>\n<p>Every now and then you\u2019ll find yourself wanting to compare 2 versions of the same file to specifically see what the <em>differences<\/em> are. What has changed from one iteration to the next. Whether they be:<\/p>\n<ul>\n<li>changes you\u2019ve made to your local version and you want to compare to the published live version.<\/li>\n<li>those of others on a team and there\u2019s potentially a conflict.<\/li>\n<\/ul>\n<p><strong>Options Include:<\/strong><\/p>\n<ul>\n<li>A plugin your editor may have available (Sublime Text, Komodo have this at least.)<\/li>\n<li>TextWrangler (mentioned above)<\/li>\n<li>File Merge (included in the free install of Apple\u2019s XCode Developer Tools)<\/li>\n<li><a href=\"http:\/\/www.kaleidoscopeapp.com\/\">Kaleidosope<\/a> ($70) &#8211; Definitely pricey but it\u2019s amazingly powerful and not only compares differences in text, but also folders and images (for example photos or mockups ).<\/li>\n<\/ul>\n<p><a name=\"FTP\"><\/a><\/p>\n<h3 id=\"ftpsftpfileserverclients\">FTP\/SFTP File Server Clients<\/h3>\n<p>If you\u2019re hosting your site on an external server you\u2019ll want to have easy remote access to that file space. (S)FTP has traditionally been the way to \u2018mount\u2019 a remote server folder on your computer. Some options include:<\/p>\n<h5 id=\"transmit\"><a title=\"Panic - Transmit - The ultimate Mac OS X FTP + SFTP + S3 app\" href=\"http:\/\/panic.com\/transmit\/\">Transmit<\/a><\/h5>\n<ul>\n<li>Same company, Panic, that makes Coda, Diet Coda. Completely unrelated but they also made my favourite pre-iTunes music player many years ago \u2013 Audion (RIP).<\/li>\n<\/ul>\n<h5 id=\"cyberduckfree\"><a title=\"Cyberduck \u2013 FTP, SFTP, WebDAV, Cloud Files, Google Drive &amp; Amazon S3 Browser for Mac &amp; Windows.\" href=\"http:\/\/cyberduck.ch\/\">Cyberduck<\/a> (Free)<\/h5>\n<ul>\n<li>Very full featured, but occassionally buggy connection issues.<\/li>\n<\/ul>\n<h5 id=\"filezilla\"><a title=\"FileZilla - The free FTP solution\" href=\"http:\/\/filezilla-project.org\/\">FileZilla<\/a>\u00a0(Free)<\/h5>\n<ul>\n<li>Free, open-source<\/li>\n<li>Full-featured<\/li>\n<li>Cross-platform.<\/li>\n<\/ul>\n<hr \/>\n<h3 id=\"browsers\">Browsers<\/h3>\n<p>For the purposes of this class we\u2019re 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 \u2013 to test your design\/site on:<\/p>\n<ul>\n<li>Safari (based on Webkit, which in turn was based on Konqueror from Linux)<\/li>\n<li>Chrome (Webkit too but has slight variances in support)<\/li>\n<li>Firefox (based on the Gecko engine)<\/li>\n<li>Opera (huge change for the better here as they just announced they are going all Webkit).<\/li>\n<li>IE &#8211; tricky if you\u2019re on a Mac. Options include:\n<ul>\n<li>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\u201310, plus WindowsXP with IE8 and below). Here\u2019s a totally free option for doing this: <a title=\"IE6-8 Compatibility Testing with Virtual PCs for Free\" href=\"http:\/\/joemaller.com\/2896\/ie6-ie7-and-ie8-compatibility-testing-with-microsoft-virtual-pcs\/\">http:\/\/joemaller.com\/2896\/ie6-ie7-and-ie8-compatibility-testing-with-microsoft-virtual-pcs\/<\/a><\/li>\n<li>Use some online services (see below).<\/li>\n<li>borrow a PC on and off during your testing phase.<\/li>\n<li>have a test PC around. A cheap netbook almost costs less than buying Windows and some decent Mac Virtualisation software these day.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"onlinemultiplebrowsertesting\">Online Multiple Browser Testing<\/h4>\n<p>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:<\/p>\n<ul>\n<li><a title=\"Check Browser Compatibility-Cross Platform Browser Test\" href=\"http:\/\/browsershots.org\/\">Browsershots<\/a> &#8211; (Free) It can be a long wait in between page loads, and it\u2019s missing some browser options but it gets the job done up to a point.<\/li>\n<li><a title=\"Browser Testing-Adobe Browser Lab\" href=\"https:\/\/browserlab.adobe.com\/en-us\/index.html\">Adobe Browser Lab<\/a> &#8211; (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\u2019re a Adobe CS customer.<\/li>\n<li><a title=\"Cross Browser Testing Tool. 100+ Browsers, Mobile, Real IE.\" href=\"http:\/\/www.browserstack.com\/\">Browserstack<\/a>. (Paid) &#8211; If you\u2019re doing this professionally it\u2019s fully worth the cast as it\u2019s fast, fully comprehensive of all platforms desktop &amp; mobile, can choose different resolutions\/orientations and you can even connect it to test live from your local development server.<\/li>\n<\/ul>\n<h3 id=\"pluginsfordevelopingtesting\">Plugins for Developing\/Testing<\/h3>\n<ul>\n<li><a title=\"Firebug\" href=\"http:\/\/getfirebug.com\/\">Firebug<\/a> (Firefox, Chrome, Safari)<\/li>\n<li><a title=\"Web Developer Help\" href=\"http:\/\/chrispederick.com\/work\/web-developer\/help\/\">Web Developer Toolbar<\/a> (Firefox, Chrome)<\/li>\n<li>Built-in Browser Tools &#8211; 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).<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"onlineresourcesforself-guidedlearning\">Online Resources for self-guided learning<\/h2>\n<h3 id=\"generalreferences\">General References<\/h3>\n<ul>\n<li><a title=\"World Wide Web Consortium (W3C)\" href=\"http:\/\/www.w3.org\/\">World Wide Web Consortium (W3C)<\/a> &#8211; an international community that develops the open standards much of the internet community follows at this point.<\/li>\n<\/ul>\n<h3 id=\"html5resources\">HTML5 Resources<\/h3>\n<ul>\n<li><a title=\"HTML5 Reference\" href=\"http:\/\/dev.w3.org\/html5\/html-author\/\">HTML5 Reference<\/a> &#8211; even though HTML5 is fast becoming the standard, it is not technically a complete specification yet.<\/li>\n<li><a title=\"HTML5 Rocks - A resource for open web HTML5 developers\" href=\"http:\/\/www.html5rocks.com\/en\/\">HTML5 Rocks<\/a> &#8211; A resource for open web HTML5 developers<\/li>\n<li><a title=\"HTML5 Doctor, helping you implement HTML5 today\" href=\"http:\/\/html5doctor.com\/\">HTML5 Doctor<\/a><\/li>\n<li><a title=\"HTML5 Please - Use the new and shiny responsibly\" href=\"http:\/\/html5please.com\/\">HTML5 Please<\/a> &#8211; a handy guide to see if an HTML5 feature is implemented in a browser version yet, and possible workarounds.<\/li>\n<li><a title=\"HTML5 Readiness\" href=\"http:\/\/html5readiness.com\/\">HTML5 Readiness<\/a> &#8211; a scrumptious pie\/bar chart that maps the timeline of HTML5 &amp; CSS3 implementation in all the major browsers.<\/li>\n<li><a title=\"Can I use... Support tables for HTML5, CSS3, etc\" href=\"http:\/\/caniuse.com\/\">Can I use\u2026<\/a> &#8211; another index of specific HTML5\/CSS3 elements and if a browser supports them.<\/li>\n<li><a title=\"HTML5 Boilerplate: The web's most popular front-end template\" href=\"http:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a> &#8211; a front-end template to ensure current and backwards compatibility for your HTML5 project.<\/li>\n<li><a title=\"SwitchToHTML5 - The HTML5 Framework Generator\" href=\"http:\/\/switchtohtml5.com\/\">SwitchToHTML5<\/a> &#8211; a novel experiment to convert your existing HTML4 content to HTML5.<\/li>\n<li><a title=\"WDG HTML Validator\" href=\"http:\/\/www.htmlhelp.com\/tools\/validator\/\">WDG HTML Validator<\/a><\/li>\n<li>The Working Design Groups validator to test your pages for syntax errors, compatibility and other bugs.<\/li>\n<\/ul>\n<h3 id=\"css3resources\">CSS3 Resources<\/h3>\n<ul>\n<li><a title=\"W3 Cascading Style Sheets\" href=\"http:\/\/www.w3.org\/Style\/CSS\/\">W3 CSS<\/a> &#8211; the W3\u2019s dedicated portal to CSS.<\/li>\n<li><a title=\"CSS-Tricks\" href=\"http:\/\/css-tricks.com\/\">CSS-Tricks<\/a> &#8211; another popular online magazine dedicated to CSS.<\/li>\n<li><a title=\"CSS3 Please! The Cross-Browser CSS3 Rule Generator\" href=\"http:\/\/css3please.com\/\">CSS3 Please!<\/a> &#8211; a neat sandbox to try out some CSS3 code live in the browser.<\/li>\n<li><a title=\"960 Grid System\" href=\"http:\/\/960.gs\/\">960 Grid System<\/a> &#8211; 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&#215;768 but still relevant to consider and adapt.<\/li>\n<li><a title=\"Unsemantic CSS Framework\" href=\"http:\/\/unsemantic.com\/\">Unsemantic CSS Framework<\/a> &#8211; the fluid\/responsive successor to 960.gs<\/li>\n<\/ul>\n<h2 id=\"onlinecoursesblogs\">Online Courses &amp; Blogs<\/h2>\n<ul>\n<li><a title=\"Lynda.com - QUT Gateway\" href=\"http:\/\/gateway.library.qut.edu.au\/login?url=http:\/\/www.lynda.com\/\">Lynda.com<\/a> &#8211; as QUT students you have free access to all online courses. An excellent, well-respected and very comprehensive archive.<\/li>\n<li><a title=\"Web development tutorials, from beginner to advanced | Nettuts+\" href=\"http:\/\/net.tutsplus.com\">net tuts+<\/a> &#8211; (FREE &amp; PREMIUM) Even with free access there is a large cache of web development tutorials, from beginner to advanced.<\/li>\n<li><a title=\"C&lt;&gt;de School\" href=\"http:\/\/go.codeschool.com\/B0-NKg\">C&lt;&gt;de School<\/a> &#8211; 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.<\/li>\n<li>W3schools.com &#8211; You invariably will be inundated with links to this site during your searches. There\u2019s 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 \u2018certification\u2019 that isn\u2019t ratified by anyone, and as their name implies \u2014 they have no affiliation with the W3C. Google this yourself or check out <a title=\"W3Fools\" href=\"http:\/\/w3fools.com\">w3fools.com<\/a>. In the end, I recommend double-checking alternative solutions\/practices at the very least and making you\u2019re own assessment of what to trust here.<\/li>\n<li><a title=\"Smashing Magazine \u2014 For Professional Web Designers and Developers\" href=\"http:\/\/www.smashingmagazine.com\/\">Smashing Magazine<\/a> &#8211; a very popular online magazine for web design in general.<\/li>\n<li><a title=\"A List Apart: For People Who Make Websites\" href=\"http:\/\/alistapart.com\/\">A List Apart<\/a> &#8211; a well respected resources run be developers who forged the current standards. Also run an annual web design conference called <a title=\"An Event Apart: The design conference for people who make websites.\" href=\"http:\/\/aneventapart.com\/\">An Event Apart<\/a>.<\/li>\n<\/ul>\n<h2 id=\"podcasts\">Podcasts<\/h2>\n<ul>\n<li><a title=\"5by5 - The Big Web Show\" href=\"http:\/\/5by5.tv\/bigwebshow\">The Big Web Show<\/a><\/li>\n<li><a title=\"5by5 - The Web Ahead\" href=\"http:\/\/5by5.tv\/webahead\">The Web Ahead<\/a><\/li>\n<li><a title=\"ShopTalk: A Web Design and Development Podcast with Chris Coyier and Dave Rupert\" href=\"http:\/\/shoptalkshow.com\">Shop Talk<\/a><\/li>\n<li><a title=\"70Decibels - Generational\" href=\"http:\/\/www.70decibels.com\/generational\/\">Generational<\/a><\/li>\n<\/ul>\n<div id=\"themify_builder_content-104\" data-postid=\"104\" class=\"themify_builder_content themify_builder_content-104 themify_builder\">\n\n    <\/div>\n<!-- \/themify_builder_content -->","protected":false},"excerpt":{"rendered":"<p>Creative Project &amp; Development Tools Mind Mapping MindNode (Free, Pro &amp; iOS versions) iThoughts HD (iPad) Outlining Tree OmniOutliner 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\u00a0Blogger,\u00a0Tumblr\u00a0or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"builder_content":"","_links":{"self":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":11,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":4422,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/104\/revisions\/4422"}],"wp:attachment":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}