“I will see you again in 25 years…”

Twin Peaks was by far the most formative TV show I have ever watched. So damn much of my young imagination was nurtured and grown in that beautifully dark and bizarre world. For me it was a gift, and now another mini series? Written by Frost and Lynch with all episodes directed by Lynch himself?

I honestly can’t wait for June, 2016. Can’t. Wait.

Non-techie post, I know, but I was so tickled to see this news today.

Tips: Planning a New Website With Scapple and Scrivener

Planning the content layout of a new website is a daunting task to say the least. You always want your content to be easy to find, logically laid out, and as clean as possible navigation-wise. A new site (or a redesign of an old one) is a great opportunity for you finally to wrangle your site’s content and make it more accessible for your readership.

To do this, you need a plan of course and, for me anyways, I tend to go the visual route.  Luckily, you don’t get much more visual than Literature and Latte’s mind-mapping software: Scapple.

It’s All in the Bubbles

There are a ton of different ways to visualize a site’s content layout in Scapple. I decided to keep mine as simple as possible, but you can certainly tweak it to fit your tastes.

For the title of the document, I simply put the name of the site. Below that, I put a bubble where the top banner is going to be, labeling it as such. Then directly below that, I place individual bubbles for each horizontal navigation tab, labeling them individually for what each tab was going to point to (“Home”, “About Me”, “Contact”, etc… ).

Next, I create a vertical line of square bubbles going down the right side of the content area, roughing out where a right column full of widgets would be. If you know what the widgets are going to be, feel free to label those as well. Otherwise, I just labeled mine “Widget 1, Widget 2, Widget 3…” – you get the idea.

After this, I place a big bubble in the middle of the layout that represents the main area where my content will be displayed.

Last but not least, I frame it all out with a bubble at the bottom that runs the width of the design for the site’s footer or colophon.

Here’s what I ended up with:

finished layout

KISS: Keep It Simple. Seriously.

Use your first draft of this document to quickly get your ideas out and in front of you. Once it’s roughed out, you can tweak it to be cleaner visually 1 or label everything differently so that it translates better for you at a glance. Above all though, the goal of this document should always be simplicity.

By keeping the document intentionally simple, it affords you the luxury to drag and drop these blocks around, resizing them to accommodate new ideas and layouts. I guarantee that once you get the basics fleshed out in this document – the core bits of content that you must have on your site – the process of manipulating the layout becomes WAY less of a chore and might even become a little fun (gasp)! So yeah, simple, simple, simple.

Now that you’ve got your layout nailed down, it’s time to fill out the content that is going to go in these bubbles.

This is where Scrivener comes in!

Old Hacks That Still Work

The approach I used in my post, blogging with Scrivener, can also work like a charm here! Now that you have your content blocks set up in Scapple, all you need to do is assign content to the sections that need it. Luckily, Scapple and Scrivener play so nice together!

I start with a blank project (or choose whatever template you like) in Scrivener, again, using the name of my site as its title. Then I immediately drag and drop my Scapple file into the “Research” folder in the left column in Scrivener renaming that folder “New Site Layout”. This way it’s always easy to reference moving forward.

With that all in place it’s time to wrangle your content.

folder-structure

Every Folder is a Section of Your Site Layout

sectionequalfolders

In my case, I had a “Header/Banner Area” section, a “Horizontal Navigation” section, a “Right Column” filled with widgets, a “Main Content Area” section for my content, and “Footer/Colophon” area for any information I wanted at the bottom of my site.

Since these are all definable areas of my site that will have content in them, I go ahead and create the following folders in my Scrivener project:

  • Banner
  • Horizontal Navigation
  • Right Column
  • Main Content Area
  • Footer/Colophon

These folders don’t need to be in any particular order at all, but I like starting from the top of my site and listing these sections out in the order of where my eyes naturally navigate across the site layout itself.

Now that’s in order, it’s time to fill those folders!

Every Page is a Block of Content

pageequalscontentblockFor my content I only use the text/Markdown that I want for each of these sections of my site. But you should feel free to drag whatever you want into these pages – pictures, PDF’s, etc… whatever you’d like. Just don’t make it confusing or cluttered. Again, keep it simple.

So for the “Banner” section I add the text and byline that will go in front of the banner image. If you don’t want text? Drag the top banner image into the page for reference.

For the “Horizontal Navigation” section, I add a page for each tab in my layout. In each of those pages I put in the text that I want the page to display. So the “About Me” page contains all of the text that I want to display on my “About Me” page. If the tab is a link to somewhere (as with the “Home” tab), I make sure that, that that information is written plainly in that page. If a tab links to something more form-like (as with the “Contact” tab), I list that info there as well, giving the fields that I’d like in the form along with what is required info when the visitor clicks the “Send” button.

I use the same methodology above for my “Right Column” section as well, giving each widget its own respective page. In those pages are descriptions of what each widget does along with formatting needs.

The “Main Content Area” section is more than likely going to be dynamic so there’s not much to add to this page other than its description. However, if your site is going to be filled with predominantly static content that rarely changes, than feel free to add whatever this page will contain. Tweak all of this to fit your site’s needs. It is important to remember that this is merely a guide/example of what you could do. Not what you should do. Do what makes sense for you and your project.

For the “Footer/Colophon” section I just add the blurb of text that I want showing up statically at the bottom of my site, regardless of where I navigate to.

Lastly, Don’t forget to save! Scrivener does a bang up job of backing up your work automatically, but when the thought flits across your brain – save your project.

corkboard

Why I Like This Approach

I’ve built a ton of sites for clients and myself over the years and I can’t tell you how many times I have finished a design, handed the client the keys, and the site laid dormant for months 2 while they gathered up the strength, time, and patience to tackle their own content.

Do you need Scapple and Scrivener to pull something like this off? Of course not. There are a lot of alternatives out there to choose from. I just chose them because they are powerful, intuitive, easy to use, and play well together. That and the idea of this nebulous task being collected, organized and bundled up into a single .scriv project file is tidy and easy to keep track of.

It also gives you a HUGE headstart on your new site design and since it is separate from your site’s file system, it is a very effective back up of the structure and content of where your site started. This is a huge win if you ever have a catastrophic failure and somehow loose your site and all of its content. With this, you’ll always have a copy of that gigantic “step one” to fall back on.

It’s also something you could easily hand to a designer who you’ve hired to build your site. Instead of saying “I think I would like this…” you’ve already taken the time to create the site that you need so you can say “I really appreciate your help. Here’s what I’d like you to build…”. 3

Trust me on this one. That developer you’ve hired? He/She just might openly weep tears of joy if you handed them something organized and fully realized like this.

I know I would.

  1. Quick Scapple tip: to align your bubbles in any way, highlight the bubbles you want to align, then right click them and go into the “align” menu.
  2. Even years in some cases!
  3. If you go this route, put in a bit of time to format the Scrivener file so that it lays out intuitively for the export to PDF or whatever format you choose.

The Web: Easy Popover Footnotes in WordPress

I am an avid reader of The Magazine 1, and one of the first things you will notice when reading any issue is the clever handling of footnotes in their pieces. Commonly you will find these links to footnotes either inline or in the form of a tappable button with a symbol in it (in their case, a star) embedded throughout The Magazine’s thought-provoking paragraphs. Whenever you tapped one of these links, something kind of unique happened. Instead of being whisked away to the bottom of the page, the content of these footnotes would pop up instantly over the text in a modal window.

Read its contents. Tap anywhere outside of the modal. Done.

The popover disappears and you continue on with the article you were enjoying without having to tap a “scroll up” link or, worse, having to literally scroll back up to where you were previously.

I got used to this delightful bit of UI/UX rather quickly and instantly started searching for a way to implement the same effect into my own online prose.

Problem was, I couldn’t find anyone that was doing it. At least not at the time.

Fast Forward Six Months

Ironically where I ended up finding my answer was on the personal site of the original developer of The Magazine: Marco Arment’s Marco.org. He put up a post back in December stating how he too was searching for a way to implement these types footnotes into his site without having to develop his own javascript solution. Luckily, someone had already done it for him (and us).

Bigfoot.js site screenshot

Believing in Bigfoot

A fella by the name of Chris Sauve went ahead and created Bigfoot and that opened the door to exactly what Arment and a handful of us were looking for: more useful and powerful footnotes on our sites!

Still, after implementing it on thaddeushunt.com, I immediately thought that its implementation wasn’t terribly approachable for everyday users. Surely someone must have created a WordPress plugin for this.  Maybe with some sort of shortcode for ease of use?

Well, it turns out that someone did that too.

Enter WP-Bigfoot…

A dramatic slow clap is due for Roger Stringer who took the time to create the WordPress plugin “WP-Bigfoot”. Not only is it a breeze to install and activate, but it’s also super easy to add to your posts and pages in WordPress via some short code.

Screen Shot 2014-06-23 at 7.48.12 PM

And it doesn’t stop there either. Out of the box it looks pretty great, but if you have some chops with CSS you can even tweak the baked in style sheet to taste so that it better matches the aesthetic of your site! It’s also responsive, so it changes dynamically depending on what size screen it’s rendering on.2

Great Solutions Rarely Come Easy…

There’s almost always something that needs to be tweaked or edited to fit your site and its needs. This is one of those rare occasions though where something works perfectly out of the box. Once I found what I was looking for, I was up and running in under 5 minutes. Seriously.

So if you’ve been looking for a better, more elegant and helpful way to add footnotes to your web-based content, I hope this post saves you some searching.

  1. And a very proud contributor!
  2. Allowing your readership to enjoy these footnotes on the couch and on the go!

Writing and the Web: The Editorially Review

Editorially.com logo

UPDATE 02/13/14: I am absolutely bummed to hear that these super-talented developers are closing the doors on this exceptional project on May 30th, 2014. Read more about why here.


Here’s my original review:

I spend a good amount of time on this site reviewing native text editor apps and I do so for good reason; generally, they simply work better, are often more stable, and they allow you to save/edit your work in a more convenient fashion via key commands (command S is way quicker than hunting and clicking a save button on a web page’s UI, for instance).

That’s not to say there isn’t a place in my workflow for web apps. I do occasionally use the web-based counterparts to the native apps I have at my disposal, but that usually is only if I am not at my personal computer. In short, if given the choice between Evernote on the web or Evernote on the Mac/PC, or iWork’s Pages on iCloud.com versus Pages locally, I’ll always go the local/native install route.

Don’t get me wrong. I love the idea of web apps becoming the norm in the (probably very near) future, but up until this year, there really hasn’t been anything I’d have taken a chance with writing a post or short story in. I don’t think I’d ever trust long-form writing to a cloud-based service, but short form? Definitely, if something captured my fancy.

And it just so happened that an online editor did.

Enter Editorially.com

PC Layout

Editorially.com accomplishes so many things well that I am starting to wonder if they jacked into my brain specifically.

Editorially is a web-based text editor app for writing on and for the web (or offline too as it turns out, more on that below). Aside from a pleasing and intuitive UI, it’s feature set is what ultimately bowled me over. Here’s the laundry list of things that you get when you sign up for an account:

  • Baked in support for Markdown syntax (it’s supported beautifully and inline). If you’ve visited here before, you’ll know I’ve got a soft spot for MD and MMD and if you do too, you’ll quickly discover just how much Editorially was literally made with it in mind. Be sure to check out their Help page, it’s all kinds of useful.
  • Autosave. It autosaves constantly without lag and pretty much in real-time. I can’t stress how important (and impressive) this actually is. And if you lose your connection during an autosave? It’ll save a copy of your draft in your browser’s cache (modern browsers only). I mean, how cool is that?
  • Collaboration. Got a piece of writing that you want someone to edit or proofread? Editorially has you more than covered with inline comments, track changes with check-in-check-out editing. It’s quite simple for you to invite people to comment, discuss or even take control and edit your files! Give a person a control of your document and they get preoccupied and leave it locked? Not a problem! Ask for control back and if the document has been idle for over 60 seconds, it’s back in your hands.
  • Versioning. You can’t have collaboration without versioning. Editorially knocks this out of the park with a version created with each autosave. You can also diff and compare versions as well as add notes to specific versions to reference in the future. Cool in a browser? Yes. Helpful in making your forget you are writing in a browser? Definitely!
  • Activity Feed. Wondering if your editor/s checked and edited the document you invited them to view? Look no further than the handy built-in Activity Feed. It’ll tell you who edited what and when, as well as provide timestamps for when your document auto-saved.
  • Different Publishing/Export Options. A recent update gave folks the ability to post their markdown to WordPress (.com and self-hosted with Jetpack enabled) or to archive a copy of your work to a folder on Dropbox. I used both for the very post you are reading right now. Both export options worked flawlessly.
  • Other import and export options. But wait! There’s more! Currently you can start a new document by importing a plain text file (.txt, .md, or.markdown) and it’s even more robust in the export category allowing you to export to many file formats including .html, LaTeX (.tex), Rich Text (.rtf), Word (.docx) and even ePub (!?!). I do wish there was a PDF option but, frankly, I’m shocked a web app can do all of this already. That all said, the developers at Editorially are cooking up even more export options in the future and I can always export locally and print to .pdf easily enough.
  • Responsive Design. Somehow the folks at Editorially.com made their site and all of its functionality fully responsive. This means it’s thoroughly usable on a pc, tablet and yes, even a damn smart phone. As web developer and a writer, I seriously can’t believe they pulled it all off. It’s a joy to use and a sight to behold. Even if you don’t end up using their services, you owe it to yourself to check this site out on every screen you can find. If only to see the future of the web/web apps and how high the bar’s been set.

Changing hearts and minds…

As amazing as the above list of functionality is for me to recount, what caused me to pause and smile the most whilst using Editorially was it’s ability to make me pine for the functionality and usability found in a web app, to be in my native apps. If you write in Markdown, Editorially is a no-brainer. Hell, if you simply write for the web (or simply write), there is no reason why this couldn’t (and shouldn’t) be your go-to editor. My wife and colleagues and I use this to collaborate and edit each others work.  Furthermore, I am not ashamed to say that I use it sometimes just because it’s a joy to use. It represents a paradigm shift in my eyes. I really do think it’s the future in many ways.  In fact it wouldn’t surprise me at all if local installs of Office suites are extinct in a couple of years after using Editorially for a few months.

I wouldn’t have thought that a year ago, but I do now.

Obviously I’m a fan…

Clearly I’m smitten with Editorially and all they’ve accomplished. But don’t take my word for it. Go and sign up and give it a spin. At the very least I think it will change your stance on what web apps are capable of today, you sure can’t beat the price (spoiler alert: it’s free) and at best, it’ll give you a very capable alternative to mix things up in your writing workflow. I love it and I am willing to bet that you will too.

The Web: The Current State of RSS

IconAs many of you might’ve heard in the last few weeks: Google’s “Google Reader” service is going bye-bye. .

But that doesn’t mean that RSS is going with it.

While I am not terribly surprised in this day and age by how many people have no idea what RSS actually is, I am very surprised by the amount of folks who think that RSS, as a technology, is synonymous with Google’s Reader service.

This notion couldn’t be further from the truth!

As it turns out, our valued RSS feeds are very much alive and well.  It’s just the medium that we all (myself included) chose to read all of these feeds in, that is going away.

So now all we have to do is choose an alternative.

Since I am in the same dilemma that many of you are in, I thought it’d be a good service to show the services I’ve been thinking of transitioning to. Here they are in no particular order of importance:

  • Feedly.com – These guys’ membership EXPLODED after Google’s announcement. Their service will take care of your mobile RSS fix, with apps on the all major mobile platforms. Desktop and laptops will have to live with the web client but from what I’ve seen, that experience is clean and pleasant to look at.
  • Newsblur is a bit more hardcore for RSS wranglers, but the added functionality comes at a price ($2 a month for anyone with more than 64 feeds) and, worse, they are no longer accepting free accounts for folks with less (a restriction that is, for now anyways, temporary). If you are willing to pony up the cash though, they offer a lot of great functionality that many other web-based services don’t, like nested folder structures for folks who like to organize their feeds, feed refreshes every minute, built in keyboard shortcuts and native mobile apps for both iOS and Android. Not bad!
  • UPDATE 06/20/2013: Black Pixel just launched the public beta of NNW 4.0. To check it out, click here to download.  –  For a Mac user, NetNewsWire is a great alternative. Die hard fans got a good shot of adrenaline after Google’s news dropped. The company that bought NNW, Black Pixel went somewhat dormant after their purchase years ago, but now with a major competitor out of the way they are gearing back up to fill that gap.  Having used NetNewsWire on my Mac and iOS (iPhone and iPad) platforms in the past, I am very comfortable in saying that, as an application, it’s a solid product! But it’s missing a very crucial bit of functionality still: feed sync between desktop and mobile platforms. This was the main reason I ditched their product years ago and it’s still the reason why I hesitate to go back. Still, they are making a renewed commitment to bringing reliable sync to their platform, so it may be worth jumping back in. If feed sync isn’t important to you at all, I can heartily recommend this service without hesitation.
  • Also in the Apple-only arena is Reeder which, up until now, has been pretty much solely catering to the Google Reader platform. The developer of the app Silvio Rizzi, has now come forward and made commitments to a multitude of feed alternatives to quell his rabid fanbase (both of which my partner in crime and I are a part of). I have the utmost trust in Rizzi’s skills. Hands down, if you are an iOS/OSX fan, the attention to detail that he puts into is native apps is far and away the best RSS experience I’ve experienced to date.  If he delivers on his promises (and I have no reason to believe he won’t) we Mac users will be well cared for.
  • Another paid web-based client that is getting some attention is feedbin. Like Newsblur, Feedbin also charges $2 a month, but it’s layout is super clean, it’s got tagging for organization, lots of import options and claims of being super speedy in its feed delivery! I haven’t used it personally, but a lot of developers I admire are getting behind them.
  • The last option I will offer is from the folks at FeedAFeverFever got a good amount of attention for its novel approach at serving up your RSS info.  Some of the attention was good, and some of it was a bit mixed. Still, I wanted to offer it up as an alternative because it’s always worth checking out the folks who are trying to do something different with a service you and I use every single day.
  • UPDATE 03/28/13 – A great recommendation from wordshepherd.comThe Old Readerhttp://www.theoldreader.com –  “It looks and acts very much like Google Reader pre-Google+, before they nuked their sharing tools. So you can follow your friends’ shared items, and comment on them, all in a self-contained, curated ecosystem.” – haven’t checked this one out yet, but I certainly appreciate the social aspects involved in this implementation. Sometimes things don’t need fixin’! Thanks David!
  • UPDATE 06/26/13Digg Reader also launched their own RSS Reader today! It’s super stripped down, but with Digg integration baked in. So if you are into Digg and want that service wedded to your RSS addiction than click here. There’s also an iOS app, with Android love  “coming in the next few weeks”.

So, those are just a smattering of the “Google Reader replacements” I’ve encountered that are getting good or, at worst, interestingly mixed press. The web-based options will always be your best ally because they are OS-agnostic. If you can find one that also offers a quality native mobile OS experience, than that will always be the icing on the cake.

If you have any alternatives that I missed, please add them in the comments below! I’ll update the post immediately with your recommendation and a link back to your site! ;)

In the meantime, good luck with whatever alternative you go with! I will certainly offer an update with whatever I end up choosing.

Honestly, the key thing to remember is that you don’t have to say goodbye to those web sites out there that have given you content in the past that you enjoy on a sporadic non-Twitter-like level.  They still exist and, in most cases, are better than ever! :)

RSS on the web hasn’t changed at all.  Far from it.  If anything, it’s just being given that all-too-rare opportunity to evolve!