To the 6 Plus and Back Again…

6vs6plus

By now you’ve all read the countless reviews of the iPhone 6 and 6 Plus. Hell, you have probably even read reviews from people “one month in” to using their 6 Pluses. I know I have. I was lucky enough to snag a 6 Plus online on launch day and eagerly awaited everything about it. Yes, I was one of “those folks” that cut out the template of the form factor of the 6 Plus, taping it to a stack of index cards, carrying it in my front pocket for a week just to steel the confidence behind my purchase.

But there was no denying that, when it showed up at my front door, I laughed nervously thinking “Holy crap! This thing is HUGE!”. Not just bigger, or slightly over-sized – it was simply larger than I imagined – and that genuinely surprised me.

Like anything though, I thought I’d get used to it.

It fit in to all of my pants and jeans pockets relatively easily. Yes, it jabbed my hip when I sat down, but not in a remotely uncomfortable way and aside from that seemingly small quibble, there was a lot to like! I thoroughly enjoyed the larger screen! Reading/consuming on the 6 Plus was (and still is) one of the best iOS experiences I’ve had to date. In fact, the size got me using my iPad so infrequently (writing on the Plus was a joy by the way) that I almost considered it a more than capable replacement. I also really dug the creative use of the extra screen real estate in some apps when the 6 Plus was in landscape mode. Add in the battery life and the speed, and I actually can’t stress enough just how much of a joy it was to use this beautiful hardware.

Still, even with all of that, there was always something nagging at me.

Something about my new phone didn’t feel quite right. In hindsight, it was painfully obvious, but at the time I just plugged along and made do. Eventually though, the reason snuck up on me when I held a close friend’s iPhone 6 at a party: the 4.7 inch 6 just felt good in my hand. Not huge, not too small – not anything – it just felt right. Once he let me slip it into my pocket, that sealed the deal. It was official: I had bought the wrong phone for me.

The straw that broke the camel’s back was when I went hiking in Virginia with my wife. It was a beautiful Autumn day and I wanted to capture as much of it as I could. As I hiked along snapping pictures and the occasional slow-mo video of leaves falling to the ground, it finally hit me as to why I disliked my phone.

I was constantly aware of it.

All of the phones I’ve owned in the past slipped into my pocket, going completely unnoticed, until I either needed it for something or I had a call/text come in. Never before had I owned a phone that, through its sheer physical size, made me constantly aware that it was on my person. It was why I took it out in the car and put it in a cup holder while driving. Or why I would leave it on the dinner table when I was out to eat or sharing a meal with someone. Or why I’d leave it on the desk while I worked. Simply taking it out of my pocket wasn’t a solution either, because once on the table it is constantly within eye-shot; consciously or sub-consciously begging for your attention.

Therein lied the problem.

Sometimes I like, no… I need technology to disappear. The 6 Plus, for me anyways, couldn’t do that. For all of its virtues and its undeniable strengths, the Plus is just too big for me to incorporate into my day-to-day life.

Eventually I made it into the Apple store here in Durham where they took pity on me, allowing me to exchange my phone for the 4.7 inch iPhone 6 well outside of the 14 day return policy window. I slid it into my pocket and I’ve never looked back.

Where I really liked many aspects of the 6 Plus vert much, I love just about everything on this iPhone 6. Sure I miss the unique landscape layouts of some apps, the undeniable all-day battery life, and typing on the 6 is noticeably more cramped than on the plus… but everything else? It’s easily just as beautiful and more of a joy to use.

And, because it disappears into my pocket. I am back in love with having my iPhone with me.

“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.

Interesting Ideas: AirType

AirType concept image.

I have a hard time shooting these concepts down because I actually do think this where the future of interface is going.

When the soft keyboard debuted with the iPhone in 2007, it was met with extreme skepticism. But over time we all got used to it. There’s an entire generation now that looks at a phone with a physical keyboard much like my generation would look at a 14.4k modem.

How long before our kids’ kids look at a any physical interface at all and laugh?

I’m just about to leap into my 40’s and I imagine the days of buttons are going to be replaced by our fingers dancing through the air long before I head to a nursing home.

Still, while I love the portability and the idea of concepts like AirType, I do wonder how long it would take for my keystroke accuracy to catch up to how fast I can type on a physical keyboard.

We shall see! Probably sooner than we think too! I look forward to finding out.

Writing: Marked and Scrivener Revisited…

Hey all! This will be a short one. A few posts ago I had a write up about an Alfred workflow I wrote that opened your Scrivener .proj files in both Scrivener and Marked simultaneously.

After I published that post, many of you pointed out (including Marked’s very own Twitter account) that with the right preferences checked off, simply dragging and dropping your Scrivener project file into Marked should accomplish the same result. I totally agreed with this sentiment, but I apparently found a bug that was preventing me from doing so: dragging a Scrivener project file to Marked in the dock did in fact open both Scrivener and Marked but, for me anyways, Scrivener the app would open but the project wouldn’t. Long story short, I detailed the issue to the Marked account on Twitter and was assured that the bug would be fixed in a future release of Marked.

Well, today Brett Terpstra (Marked’s developer) announced the release of version 2.3 of his software and, true to his word, the issue has been resolved! So, if you own Marked and didn’t want to pony up for the Powerpack that Alfred offers, you once again can drag and drop Scrivener project files into Marked on your dock. Both apps will open simultaneously with your cursor blinking in Scrivener; waiting patiently for any Markdown you want to throw at it.

Scriv2Marked

Much, much gratitude for the fix and the prompt response when I brought it up!

If you create content in markdown in Scrivener and don’t use Marked? You are absolutely missing out. I whole-heartedly recommend it. It’s worth your hard-earned cash and I am not ashamed at all to admit that I don’t even come close to utilizing all that it can do. I use it daily and can’t imagine writing for the web without it. It’s grown with me and my ever-changing workflows .

I am betting it will do the same for you.

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!

Tips: An Alfred Workflow for Launching .scriv Files in Marked and Scrivener Simultaneously

scrivmarked

A heads up: As the title implies, this post assumes (or, in a way, suggests) that you have purchased Scrivener, Marked and the Powerpack option in Alfred 2.

One of Scrivener’s shortcomings (yes, they do exist) as far as Markdown support is concerned, is its inability to give an HTML preview of your Markdown syntax while you write in it. There is no workflow for accomplishing this other than exporting your MD or MMD, opening it in another editor that reads MD (or the converted html) and checking it there before cutting and pasting the code into your blog’s editor.

In all fairness, that’s not what Scrivener was created to do and just because I’ve found some slightly unconventional uses for it, I can’t expect the good folks at Literature and Latte to change their software to accommodate lil ole me. We all know Scrivener is much, much bigger than blogging and writing in MD and MMD.

The good news is that even though Scrivener doesn’t have an in-app html preview function for your markdown, there is one program that you can use in tandem with it that can.

That Program is Marked.

You can read about Brett Terpstra’s “Marked” in a slew of different places (including its recommendation in the comments on this site ) so I won’t write a review of it here (maybe another time). In a nutshell though, Marked is a realtime markdown converter that works with any text editor you throw at it. Open a text file in its respective editor, open Marked, then drag the same file into Marked and go back to the text editor to continue writing/editing. As you save your markdown document, you’ll see it update in Marked, displaying the converted HTML instantly.

Cool right? It’s also a game-changer.

Marked and Scrivener

Integrating Marked has made my blogging workflow in Scrivener much more streamlined because of Marked’s handling of MD/MMD as well as its plethora of options and amazing tools for authors. But, that all said, getting a file into each application is clunky at best and almost immediately after doing that a couple of times, I wanted/needed to automate that initial step so that it was smoother.

Enter Alfred

Alfred is another popular tool out there whose sole function is to streamline everyday tasks like launching multiple apps at once, finding files quickly on your computer, searching the web, quitting apps, shutting down or restarting your computer… you get the idea. It does all of this from your keyboard and once you get used to its commands, you’ll get addicted to not touching a mouse or track pad. In truth, it’s one of the first apps I install when I get a new computer.

But aside from these baked-in options that you get for free, you can also pay for the Powerpack option and unlock a slew of very powerful tools that give you immense control over your Mac. One of these tools is the ability to easily create custom workflows. Once I encountered the dilemma above, I dove in and immediately came up with a solution.

Now, one caveat. I am not much of a programmer, so I made my workflow out of the built-in modules that Alfred gives you out of the box. I am sure that with some custom scripting this workflow could be made even nicer (if you have suggestions for improvements leave them in the comments below please). That all said, I was really happy with how this workflow came out. To save you (and I) some time I’ve included a link to the workflow below, so that you can download it and add it to your own personal workflows in Alfred. Just download it, double-click and add it to Alfred. Easy.

The way the workflow works is you bring up your Alfred prompt. Type in the keyword, which in my case is “scrivmarked”, that then allows you to browse your “Documents” directory right in Alfred. Once you find the .scriv file you want to open, arrow down to highlight it and hit the right arrow key where you’ll find a file action to open the file in both Scrivener and Marked, arrow down to that action and hit enter.

AlfredFileAction

Make it Your Own

One of the best things about workflows In Alfred is that you can tweak them to suit your needs relatively easily. Hate my keyword? Choose a different one. Have your Scrivener project files in a different location outside of the Documents directory in OS X? No problem, tweak the search scope. These, and many other aspects of workflows, can be tweaked easily in Alfred without knowing a single line of code.

But, again, if you do know a way to make this better, I’d love it if you posted your modifications in the comments below! I am sure there are many ways to make this workflow even more useful to us all!

Useful links:

Version 3.0