Friday, 29 June 2012

iCan't Internet

iCan't Internet


4 Handy iPhone Apps That Assist With Home Improvement Projects

Posted: 25 Jun 2012 06:33 AM PDT


Keeping up with home improvement can be a simple or incredibly difficult task, depending on how much work needs to be done. With technology constantly evolving, you can research your home improvement...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Thursday, 28 June 2012

How To Turn Your Rough Draft Into A Finished Blog Post | Van SEO Design

How To Turn Your Rough Draft Into A Finished Blog Post | Van SEO Design


How To Turn Your Rough Draft Into A Finished Blog Post

Posted: 28 Jun 2012 05:30 AM PDT

The time to begin an article is when you have finished it to your satisfaction By that time you begin to clearly and logically perceive what it is you really want to say.
Mark Twain

So far in this series on my blogging process we’ve developed a mechanism to feed us ideas. We’ve outlined some ideas to give them direction and fleshed out the direction with notes. We then used our notes to write a draft. Now it’s time to turn that draft into something more. It’s time for editing.

Scultptor's tools

Shaping the Clay

By approaching our draft as something not meant to be finished, we gave ourselves permission to make mistakes. It helped keep the editor at bay in order to get something down on the page. Now we need the editor. Our draft needs work before publishing.

The draft took our clay of notes and gave it a rough shape. Anyone looking at it can recognize what it’s supposed to be, but it’s hardly a work of art. It lacks the craftsmanship that make it worth reading.

It surely contains typos and awkward sentences. It likely has large chunks that don’t belong and perhaps there are holes in logic that require filling. Perhaps the muse took things in unexpected directions that now need to be accounted for.

Editing tends to be the most difficult part of the process for me. It’s where everything starts to feel more permanent and final. It’s where I start to feel like I need to get things right. To make it feel less final I do several rounds of editing. In fact I continue editing right up to the moment the post is published.

Editing workbook and composition notebook

My Editing Process

I'm not a very good writer, but I'm an excellent rewriter.
James Michener

Until this point in the process I’ve been working in an application called MacJournal. I find it’s strengths are in the organization of ideas and draft material with it’s ability to tag and place things in a folder hierarchy.

Where it’s lacking for me is in publishing the post, so here I turn to another application, MarsEdit, which offers better tools for uploading media and maintaing formatting when sending the post to the live blog.

Both of these applications are Mac only, though on the Windows side Live Writer has always received a lot of praise as a blogging editor.

Entrance Sign

A Quick Start

Moving from one application to another helps me get into the editing process. While writing a draft I stay away from most formatting so after copying a draft into MarsEdit I jump in and begin by formatting.

It makes for a nice entry point into the editing process. I add html tags for headings and lists and blockquotes and as I format my way down the draft I enter the editing process. Before I realize it I’m doing more than formatting.

Colored pens on a notebook

Macro Editing

Rewriting ripens what you've written.
Duane Alan Hahn

I edit posts on both a macro and micro level. On the macro level I read through the whole post looking at the big picture. As I’m reading I’m asking myself questions like:

  • does the post make sense?
  • are some sections unnecessary?
  • is additional information needed?
  • should sections be reorganized?
  • does the post follow logically or dramatically?

I’ll start making notes to myself in answer to each of these questions. At first I work on reorganizing large sections as needed. A cut here. Notes about something that needs to be added there. Moving that before this.

It’s likely I’ll need to write new paragraphs and sections from scratch and it’s equally likely that existing sections end up being completely rewritten as well.

Ideally I want to cut as much as I can, something you can tell I’m not particularly good at doing. If you only saw how long some of my drafts are you’d know I do actually cut things from these posts, though I’ve a long way to go.

I know the macro editing is done when all my editing notes have been removed. The goal here is focused in the big picture. The edits have more to do with the structure of the post. It’s akin to getting the plot right in a novel or screenplay.

Page with red copyediting marks

Micro Editing

The difference between the right word and the nearly right word is the same as the difference between lightning and the lightning bug.
Mark Twain

While I’m working on the larger structure, I’m also looking for typos to fix and sentences to rewrite. Here I’m looking more at micro changes. I’ll read and reread sentences and paragraphs several times in an effort to improve them. I’m asking myself questions like:

  • is that the correct spelling?
  • does the rhythm of that paragraph work?
  • does that sentence make sense?
  • is there a better word or phrase to express what I want to say?
  • is that sentence awkward?

I don’t obsess over grammar, though naturally I’m trying to fix poorly constructed sentences. I’m more concerned with how the words flow and their overall rhythm than I am with strict rules.

The goal here is to ensure the post reads well. If I’ve done this right, you’ll enjoy reading regardless of what the post is about. If the goal of macro editing is to get the plot right, the goal of micro editing is to get the dialog and narrative details right.

Progress Road street sign against a blue background

Progressing Through Multiple Rounds of Editing

The macro and micro editing doesn’t happen independently. I do both at the same time, though I’m usually focused on one. If you’ve ever spent time proofing your own writing you know how easy it is to miss something. You read what you meant to type as opposed to what you actually typed.

A round of editing will usually improve a draft and turn it into something that can be published. Subsequent rounds of editing continue to improve the post (up to a point) and so I prefer to edit posts in multiple rounds. On the day editing is the scheduled task, I may give the post 2 or 3 rounds of editing.

  • One round where I mostly restructure the post and make additional notes
  • One round where I rewrite larger chunks of content like sections and paragraphs
  • One round where I’m more focused on the micro stuff like sentences and typos

Ideally by working from large to small I end this stage of the process with a post that has the big picture right. I expect I’ll need to edit more, but hopefully I won’t have to make wholesale changes that require major rewrites.

I will continue editing through the next stages, where I design the post and schedule it for publishing. Each additional round tends to focus more and more on the micro.

Clay post hanging

Summary

A lot of things change with the post as I move through the editing phase. I switch applications for one, but much more importantly this is the stage where the post moves from something that’s rough into something that starts to become finished. It won’t be completely done after a round or two of editing, but it’s much, much closer to being done.

When editing I’m looking first to the big picture structure. These often require complete rewrites of sections and ideally lead to large cuts that help reveal the essence of what I’m trying to say, though I’ll be the first to admit this is one of my weaker points as a writer.

I also begin the micro changes that improve the rhythm and flow of the post. Typos are fixed and inconsistencies removed. Sentences are rewritten that hopefully make the words more enjoyable to read.

Though the stages of the process past this one aren’t called editing, they still get additional rounds of editing. I find multiple passes over a post continue to improve it and it usually works better to come back on another day with fresh eyes. Editing will continue right up to the moment the post goes live.

Next week I’ll talk about the last part of my process, designing the post. It’s during this stage where I add links and images and try to improve the post visually, before finally scheduling it to be published.

The first draft of anything is shit.
Ernest Hemingway


Monday, 25 June 2012

How To Maintain Readable Type In Responsive Design | Van SEO Design

How To Maintain Readable Type In Responsive Design | Van SEO Design


How To Maintain Readable Type In Responsive Design

Posted: 25 Jun 2012 05:30 AM PDT

Setting type involves choices that create proportional relationships in your text. Done well and your text will be both easy and desirable to read. As responsive layouts adapt to varying screen widths, one of these choices (line-length) changes. To maintain the same proportional relationships other aspects of the type need to adjust.

Unfortunately the best solution to maintain proportions is not always clear. Some might even question if we should. Throw in the different device resolutions that have come to market and we’re looking at another set of issues.

Forge at the Finkl steel mill in Chicago

Proportion, Scale, and Molten Leading

The most obvious change that comes with responsive design is how layouts change over different widths. That directly affects the measure of our text.

A few months ago Tim Brown raised the idea of molten leading (or fluid line-height). As Tim points out in the post there’s a fundamental triadic relationship in setting type.

  • font-size
  • line-height (leading)
  • line-length (measure)

Adjusting one of the above requires adjusting the others to maintain comfortable reading. Our layouts force a change in line-length and we need to make further adjustments to maintain proportions.

If we increase the font-size of our type, the line-height will scale with it, as the latter is set relative to the former. In some cases this is what we want, but in others it’s not a pleasant experience. Imagine flipping your tablet or phone between portrait and landscape and having to adjust to a new font-size with each turn.

Better would be to adjust line-height with the change in line-length, except line-height is relative to font-size, while line-length here is relative to the widths of our layout. How can we get one to change in response to the other.

Liquid gold being poured

As Tim says we need a fluid way to set the line-height. Ideally we’d be able to set min and max line-heights, similar to how we set min and max widths. In his words

Molten leading would maintain a specific font-size while adjusting line-height based on width.

Tim offers a formula for calculating the line-heights in between the mins and maxes.

line-height = ((current width − min-width) ÷ (max-width − min-width)) × (line-height − min-line-height) + min-line-height

Aside from not wanting to do the math sometimes we can’t easily determine some of the values needed. Fortunately a couple of smart people offered Javascript solutions to both the problem of determining the values and doing the math.

Matt also provided a demo of his solution in action.

Whether you use either method or not, at the very least take away from this section the idea that one of the three type triads is going to change and you must account for that change to maintain readable proportions.

Lowercase 'a' shown in typographic scale

Graded Fonts

Above I mentioned how different devices are now shipping with different pixel densities. Think retina display. A font designed for a low resolution screen breaks down when viewed on a high-res screen.

Oliver Reichenstein from Information Architects talked about this as a reason IA is experimenting with graded fonts or fonts that can adapt to different resolutions. Oliver points to 3 rules of thumb for conditions.

PC — System fonts look fine, though custom fonts need hinting

OSX — System fonts look good at low res and ok on retina displays, however they’re too bold at high res. Lighter fonts look great at high res, but too light on retina displays.

iOS — System fonts look too bold at high res and ok on retina displays. For perfect html performance on retina displays you need a bolder font in portrait and a regular weight font in landscape. For perfect html performance on high res you need a lighter typeface.

Considering the above as a guide you need 3 grades of fonts once you’re outside the PC world and move beyond low resolution screens.

  • light — for high resolution screens
  • regular — for retina landscape in html mode
  • bolder — for retina portrait in html mode

IA designed a custom typeface they’ve named iABC in order to test the above. Graded fonts alone don’t make for responsive typography and won’t absolve us from considering how typographic parameters change across devices, but they can become part of the solution and could easily become more common in the near future.

The words 'Type Size' printed in a book to demonstrate kerning and letterspacing

Solutions for Specific Responsive Type Problems

The sections above discuss two main problems we’re facing. In researching this post I collected resources to more issues that crop up, along with solutions to those issues.

Fit to Scale — Trent Walton wanted to have fine-grained control over typography, the kind of control where he could style individual letters uniquely. CSS gives us things like :first-letter and :last-letter, but not a lot more. One of his partners at Paravel, Dave Rupert, created the jQuery plugin Lettering.js. Dave explains how it works here.

So far so good, but where responsiveness was concerned Trent worried if it would scale. Dave came back with FitText.js to take care of the scaling problem. You can see both plugins in action in the main post headings on Trent’s blog.

Even better, we might be getting a css solution soon. Chris Coyier recently posted, Viewport Sized Typography telling us about 3 new values for sizing things relative to the viewport.

  • vw — (viewport width) 1vw = 1% of the viewport width
  • vh — (viewport height) 1vh = 1% of the viewport height
  • vmin — (viewport min) 1vmin = 1vw or 1vh, whichever is smaller

These 3 values essentially do what FitText does to make type fluid and if you think way back to the top of this post, they allow us to tie the width of the viewport to the line-height. The one downside is these values aren’t yet ready for prime time. They work Chrome 20+ and IE10+, but that’s about it.

It should be pointed out they aren’t just for fonts. These are measurements that can be used with anything.

'Twenty-Fifth' carved into the sidewalk

Hyphens and narrow columns — Sometimes a text column in a responsive layout becomes narrower than some of the individual words in the text. Because of the lack of hyphenation in web browsers this can lead to some less than pleasing results.

A solution is to combine 2 css properties, word-wrap and hyphen.

  word-wrap: break-word;  hyphens: auto;  

The first breaks the word and the second adds the hyphen. The downside is hyphens don’t have great support at the moment. In fact to use it now you need to use vendor prefixes for the browsers that support it.

  word-wrap: break-word;  -webkit-hyphens: auto;  -moz-hyphens: auto;  hyphens: auto;  

Minimum paragraph widths — Another solution for when narrow columns interfere with the flow of text is to set a minimum width on paragraphs. You can read about the full solution here. The final code ends up being

  p:before {    content: "";    width: 10em;    display: block;    overflow: hidden;  }  

iOS orientation — This issue is specific to Safari on iOS. A bug allows zoomed pages to scale beyond the width of the viewport when switching from portrait to landscape. The most common workaround has been to disable zooming, but that’s not a great option.

A better solution uses the device’s accelerometer to determine when the device is switching orientation. It temporarily disables zooming until the change is complete. There are a couple of slight issues with this fix that you can read about here.

Maintaining vertical rhythm — If you like using a baseline grid to give a vertical rhythm to your type, you may have discovered that where responsive design is concerned there’s a problem. As images scale with the layout they fall off the grid.

This Javascript solution determines the current height of the image and then adjusts the bottom margin of the image so that anything after falls back on the baseline.

Typographic design of the word 'typography'

Summary

As you can see there are some issues in regards to your type responding with your design. The main thing to keep in mind is that good typography requires proportional relationships for comfortable reading. As our layouts change, line-length changes with it and we need to adjust other type parameters to maintain proportion.

Another issue we’re facing is the different pixel densities seen across devices. This is likely to get worse now that Apple has introduced retina display to their devices. Others will follow, though not necessarily using the same pixel density. Graded fonts are the current attempt to allow our typefaces to respond.

Beyond these two issues are a variety of specific problems, each with potential solutions. One of these, viewport relative measurements, might be the answer to the question of how to maintain proportions.

More than anything what I hope you’ll take from this post is the idea that we need to think more about type in responsive designs. We can’t just set everything once and assume it’ll always be fine. Changing layouts and different devices will force type changes on us and it’s up to us to ensure we respond in kind.


Thursday, 21 June 2012

Thoughts On Writing A Draft For A Blog Post | Van SEO Design

Thoughts On Writing A Draft For A Blog Post | Van SEO Design


Thoughts On Writing A Draft For A Blog Post

Posted: 21 Jun 2012 05:30 AM PDT

The object is set before the mind, either in reality, as in sketching (before a landscape or teacup or old face) or is set in the memory wherein it becomes the sketching from memory of a definite image-object.
—Jack Kerouac

When it comes time to write a post how do you go about writing it? Hopefully you have an idea in mind. Ideally you’ll have planned a direction for the post and have plenty of notes to draw from. How though, do you put words to paper or screen?

If you’ve been following this series on my blogging process, you know by the time I’ve reached the point of writing I have the outline of an idea fleshed out with notes and possibly some research. This is the stage where I sit down to write a first draft of the post.

Collage of text on torn paper

From Notes to Draft

At the end of my post on outlines and notes I mentioned how if you’ve done a good job in the process up to that point, writing a draft is often little more than turning scraps of notes into complete sentences. My notes are organized and each block of notes becomes one or two paragraphs, or perhaps a full section of the post.

Sometimes I need to spend a few extra minutes organizing my notes. For example this section was originally the last in the post, but it made more sense to me to move it here. Mostly I just go down my outline, look at the notes I have and start writing.

The notes show me what I want to say and turning them into a draft is often as simple as making complete sentences out of my fragments. That’s the beauty of having outlined and made notes. The post is already written. It just needs to be rewritten in my voice.

I start at the top with the intro and just write. When I’ve turned the intro notes into an intro section of the draft I move on to the next section and continue. Turn one note into a sentence. Turn the next one into another. Combine two notes into separate clauses within a single sentence.

Once I start writing I just write and let the words take me where they want to go. Not every note becomes a sentence. The notes tend to be more of a guide to get me started and help me continue when I lose momentum. In between I write as spontaneously as I can.

I’ll repeat something I’ve said a few times in this series so far. I don’t wait for the muse. The muse doesn’t like to be commanded. The muse also doesn’t like to miss out. Once you start putting words down on the page, the muse gets jealous and comes on his own. He comes after I’ve started a draft and when he arrives I let him carry me along.

Jack Keouac Alley street sign in San Francisco

Spontaneous Prose

One of my favorite authors is Jack Kerouac. He called his process for writing spontaneous prose and this is my take on Kerouac’s spontaneous prose.

Before writing, imagine the scene you’re going to write about and immerse yourself in it. If you’re describing a room see the color of the walls. Smell the musty couch. Hear the wood floor creaking beneath your feet as you cross from one side to another. Know that room so well that you feel like you’re in it at that very moment.

Once you know the room, then you can write about. Just write. You should know the room so well that you don’t need to pause. Write fast. Write whatever comes to mind. Don’t edit a thing. If you spell something wrong forget about it. You’re already on the next word; the next sentence.

Everything up to this point in the process has been about getting to know the room. The notes and research were about seeing the colors and hearing the sounds. It was preparation for spontaneous prose.

This method of writing is why I first decided I needed a process. Prior to this process the writer and editor in me were at odds. I couldn’t write more than a few words without wanting to go back and correct them. I wanted to make them better, make them perfect, before writing the next line. That only kept me from getting anything done.

The writer in me needed the freedom to make mistakes in order to keep going. He couldn’t co-exist with the editor and I realized I needed to keep them apart. While I’ll often work several stages of this process on a single day, the drat is the one exception. On the day I write a draft for a post it’s the only work I do on the post. It’s the only way I can provide enough freedom for writer me to encourage the muse to show up.

Imagine: Strawberry Fields Memorial for John Lennon in Central Park

Set the Environment for Creativity and Spontaneity

You’ve probably seen the advice to set the environment for creativity to happen. Some people take a walk or put on music. Others could take a nap or engage in some form of play. These things that seem like you’re not working are ways to encourage creativity. You want to set the environment to allow spontaneous prose and the muse to come.

I’ve found writing will flow for me more in the morning. Before I begin I warm up. Instead of a quick rush through email I see it as writing practice. Why not put in a little extra to craft a better sentence when you can. it’s an opportunity to practice and warm up.

My next stop is often my forum where I reply to some of the threads that await me. Again instead of quick short answers I write out longer replies in order to help me warm up for the writing ahead. I want to exercise my writing muscles. Warm up my fingers for the keyboard. Warm up my brain to think writerly.

In place of forums or emails you can use social sites like Twitter and Facebook. You might not write as much in social media, but you can still write well and stretch out your writing muscles. Writing shorter tweets might even better fit your style. The point is to spend a little time writing in general before writing the draft of your post. Make the muse jealous that you’re writing without him.

You can train yourself for spontaneous prose by free writing. Open up a notebook, grab a pen, and write anything. What you write is immaterial. All that matters is that you don’t lift your pen off the paper for some specified time. Try to free write for 15 minutes. Work it up to a half hour and even an hour.

If you prefer, type instead of using pen and paper. It doesn’t really matter. You’re training yourself to write spontaneously. If you can’t think of anything to say start out with some random questions to answer. Start by describing the weather if you have to and see where it leads. It really doesn’t matter what you write about as long as you keep writing.

You’ll probably need to work up to 15 minutes and beyond. If you keep at it you will get there and in time filling up a blank page with words will become second nature.

Random typewriter keys on a table

Summary

The rough draft is the place where you put actual sentences and paragraphs on the page and come away with something that’s more cohesive and recognizable as a finished piece than the bits and scraps of notes and thoughts you’ve collected.

If you’ve prepared well; if you’ve researched your topic, created an outline to follow, and fleshed out your outline with notes, a draft is easy to write. You may not have to do anything more than turning scraps of thoughts into finished sentences.

I write loosely following Kerouac’s spontaneous prose. It’s a great way to write drafts of any kind as it allows the most room for letting creativity happen on its own. It invites the muse. It puts you in the zone. It’s freeing and leads to things you couldn’t plan out.

That kind of writing needs the stage to be set. You need to prepare, whether it’s imagining a room you’re going to write about or spending time planning a direction complete with notes. It helps to warm up too. See every bit of writing you do as an opportunity to practice your craft and make time to exercise your spontaneous muscles through timed free writing. Build up until you can go an hour without stopping.

The draft isn’t a finished piece. It’s clay that’s been given a rough shape, but it still needs to be crafted into a work of art. Your draft gives you the material that you’ll craft into something more.

Next week we’ll talk about editing where we shape the clay into something worth reading and turn the clay into something more.