landing-credits-large - 1920x1200

You Made This Website Possible

Credit Where It's Due

Websites, like buildings, are built by a lot of hands.  This particular site was actively designed and constructed by Landwave.  Notice the qualification: "actively designed and constructed." For me to say that I designed and constructed it gives the impression I did every inch of coding and design.  And that's just flat out false.

From initial research to final proofing and optimizations, countless dozens have helped me build this site.  So many very useful tools have been built and made available - for fricken' free, I have to add.  Here is the list as complete as I can make it.

HEMINGWAY

I've written about the wonder of distraction free writing apps. Hemingway does one better. Not only does it present you a clean space, lovingly typeset, it gives you feedback about your wordiness. That last sentence? Red flag. Hemingway keeps me honest when it comes to writing. Web based and desktop.

COLOR PALETTES

Color palettes created with paletton.com. Boss site. Use it. Blue series is Palette UID: 13x0u0k4Osh0-OL2jzy7YnZbOk7 Green series is Palette UID: 1340u0k4Osh0-OL2jzy7YnZbOk7

TYPOGRAPHY GOODNESS

Type-scale.com provides a really nice presentation of heading proportions according to various scalings. Now you're standardized across the history of mathematics. When you're ready for pairings, check out Font Pair making it easy to try on Google Font pairings.

FLAT DESIGN, FULL BLEED INSPIRATIONS

Article on going too far with flat deign has several very nice presentations. Menagerie in particular is quite inspirational.  This gets us into another realm too - parallax scrolling.  Neat trick.  Love to use it someday.

SERIOUS CHARTS

Google Charts, d3.js and even processing.js are excellent places for chart inspiration. D3 is Mike Bostock's creation.  Have to also give credit to the Frankens Team and their site E90E50 charts.  They have been collecting and demonstrating amazing chart design hacks with Excel.

IMAGE LAYOUTS

Looking at ISOPTOPE.JS to implement various grid layouts to comply with the Landwave Content Guide. For slideshows and swipe enabled carousels, start with this Codepen page.

RESPONSIVE FRAMEWORKS

The 2013 landwave fronpage was built using Skeleton. I implemented it in the Lightwave Theme rather than go with Bootstrap or. No logic to that decision other than familiarity.

STICKY, RESPONSIVE, OFF CANVAS MENUS

The Skeleton Framework page has a sticky navbar that breaks in mobile layout. Sad face. Look up "codepen sticky responsive menus." This one is an interesting alternative to off-canvas.

SANDBOXES

Sandboxes are web coding environments that let you tweek contributory code and see the results instantly. Codepen, JSFiddle.com. DREAMY. Codepen Pro may be in our future.

CROSS BROWSER & PLATFORM TESTING

This is why we should sign up for Codepen.

SASS: WTW?

What on earth is Sass? From the Sass widsite: "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. " For Windows desktop use Ruby Installer.

EMMET

EMMET is a plugin for any number of text editors that allows you to write abbreviated code and expand it into HTML.

TWINE

Twine is a modelling tool for stories. Bad ass. Consider developing all your content from the word go. Source: Content-First Design from A List Apart. Inklewriter has a similar objective.

INSPIRATIONS

SIGNAL vs NOISE

Blog of 37Signals. Soberly discussing awesomeness.

CAP WATKINS

Candid notes on being a designer.

iSEEQ

Happily bringing serious talent to Europe.

A LIST APART

For nearly twenty years setting us all straight on the standards-based web.

YEEDOR

Simply the best resume site I've ever seen. I shamelessly borrowed the 'About' in it's entirety.

AMANDA BUCK

Another brilliant, concise resume page.

SKELETON

Not only did I use the Skeleton framework in the Lightwave theme, I took serious notes on the Skeleton web site.

WORDPRESS GEAR

WP Themes

Eventually I built a custom theme, Lightwave.  The themes world proved too arduous. I'd select a theme that was 80%, but then get killed on styling and feature editing.  Prior to building Lightwave, on a  scale of 1-10, my skills for WordPress was a 3.  And that spells a lot of frustration when cobbling together elements of designs from around the web.  Fixing styling and features was going to mean diving deep into the files.  To do that, I was going to have to learn the WordPress template heirarchy.  And if I was going there, then I might as well consider building my own.

WP Plugins

  • Advanced Custom Fields
  • Akismet
  • Imsanity
  • Jetpack: Custom CSS, Social (uses Genericons styled for this site)
  • Moesia Masonry Portfolio
  • Page Builder
  • Post Types Order
  • Regenerate Thumbnails
  • WP Category Tag Cloud

WP Plugins We Just Couldn'T Get Behind

Aesop - It is really inspiring to see tools come along to support long-form storytelling.  While I'm not long form around here - too much - I like the aesthetic.  My problem with Aesop is that it just doesn't give quite the level of control you can get on your own, or even with a  tool like Page Builder.  The real damning support for this perception comes from a post on WPMUDEV whose thesis is: don't use WP admin to get long-form story telling done. Build it from scratch instead.

Storyform does a better job than Aesop at creating the whole package.  It's a comprehensive tool.  Add your content, some photos and Storyform essentially does the rest.  As long as you don't care about the outcome, it's great.  Random reloads of your page have the flows working a little differently.  All the elements are there - pullquotes, full bleed, swipe slide show kinda stuff.  Awesome.  As long as you don't care about how it actually flows, you're good.  I cared about the flow.

IMAGES

I made the mistake - again - of starting art direction using any old image source - in this case collections of images from my Radio Pacifica Tumblr blog. This is not smart. I got attached to a couple of images I thought were perfect. Going into production I hit the bright line of licensing. This is a commercial site. I have to buy images or use ones with the Creative Commons BY 3.0 license for commercial use. It simply wasn't a question.

I considered usig my own photography, but made another choice. Fortunately there are an amazing number of sites that offer high resolution, copyright and royalty free licensing.

Pixabay
500px CC BY 3.0
Life of Pix
Morgue File
Stock Snap io
Unsplash