An Introduction To A Process For More Productive Blogging | Van SEO Design

---

An Introduction To A Process For More Productive Blogging Posted: 31 May 2012 05:30 AM PDT You write until you come to a place where you still have your juice and know what will happen next and you stop and try to live through until the next day when you hit it again. —Ernest Hemingway A few weeks ago I critiqued the site of Josh Dick. Not long after I was reading through a recent issue of 2600 and who do I see as the author of one of the articles? Yep it was Josh. A few email exchanges and we were talking about writing and blogging. Josh asked where I find ideas and how I keep up with the blog as much as I do. It seemed like a good time to talk again about my blogging process. I’ve mentioned it before, but this time I’ll turn everything into a series and try to go a little more in-depth about each part of my process. You Don’t Have Writer’s Block First let me start with something likely to piss a few people off. For most people writer’s block is complete BS. Yes there is something called writer’s block that affects some and leads to their inability to write, but most people use it as an excuse to not write. It’s easier to say you have writer’s block than it is to push yourself to write. There will be days when the words are flowing easily and other days where the words won’t seem to come at all. The latter isn’t writer’s block. None of us is 100% productive all the time. Like anything, writing takes work and has it’s ups and downs. It’s like any job you’ve ever held. Some days the work comes easily and you’re very productive. Other days everything is a struggle. You want to be anywhere other than at work. It’s called being human. Professional writers find a way to push through and get something done even on the days they don’t feel like writing. Maybe it won’t be their best work, but they find a way to meet that 5:00 deadline. I bring this up because I’m no different. I used to use writer’s block as an excuse and I’d wait for the inspiration to come before writing. I’d stare at a blank page and waste time waiting and then move on to something else. It wasn’t productive and it didn’t lead to good writing. After a few thousand days like that I realized a few things. When I have a better idea what I want to write about the words more readily flow When I’m not concerned with how a piece will turn out, it’s easier to write it. Producing a piece of writing involves different tasks with different skill sets The writer and editor in me don’t get along Some days I have a hard time crafting a single sentence anyone would want to read. I can still do some research or proof something already written. I can still make progress as a writer to move this blog forward. I developed a process for writing that enables me to always be working on something. I can’t say it will work exactly as is for everyone, though I suspect the basic ideas will work for most anyone. You might need to tweak it a little, but it should work for you. The main idea is to break out all the smaller tasks within the overall task of publishing a blog post and work on each separately. Take the single task of publishing and turn it into a process of smaller tasks. My Blogging Process I’ll cover each step below in more detail in the coming weeks, but here’s the gist. Generate ideas — Set up a mechanism to record ideas. I’m constantly collecting thoughts, links, and images. Most of these will never fin their way into a blog post. I spend time each week reviewing the ideas I’ve collected. I toss some out and combine others into new ideas. I also spend a little time planning an editorial calendar. Outline, notes, and organization — I write better when I have an idea what I want to write about. I grab an idea and start with some simple thoughts about what direction it might take. I then flesh out these thoughts with more detailed notes and reference material. As I do I begin to reorganize everything and firm up the outlined direction. Write draft — With notes and a direction ready I write. I’ll read through my notes to prepare and then just write. Sometimes this ends up being little more than turning my notes into complete sentences. Sometimes it takes more. I keep the editor away during this phase and give myself permission to make mistakes. I know I’ll edit later. Edit and proof — I consider the draft a piece of clay that’s been molded into a general shape and now needs to be sculpted into a more finished piece. I’ll start by reading the post making a few corrections and changes as I go to get me into the process. Then I try to look at the big picture and get rid of a section here and adding one there, all the while working my way through the post and rewriting as necessary. I usually end up doing multiple rounds of editing and sculpting. Design the post — This last stage is a bit of design. I look for or create images to add to posts. I add links to some of my older posts and to articles I found during research. I may add or remove whitespace through headings, lists, and anything else that I hope will make the post more interesting visually. When I first started this process I would strictly work on each aspect separately, never doing more than one in a single day for a single post. Having been at it awhile I now work some of these at the same time. The one part of the process that always remains separate is writing the draft. One thing I should add is you need to make writing a habit if you really want to be successful. I make writing a part of my day. I warm up by replying to emails and forum posts and then I commit some time to work the process above. I’m more productive some days than others, but I’m always productive. Summary Too many people wait for the muse to arrive before they write a single word. The problem is the muse is elusive and doesn’t come by often without some prodding. When the muse isn’t there waiting when people are ready to write, they sometimes claim they have writer’s block. They don’t. They’re just making excuses You can create an environment to encourage the muse’s arrival and on days the muse refuses to show you can still get things done. You might even be surprised how often the muse arrives when you’re working on other parts of the process. The muse doesn’t like to be ordered around, but it doesn’t like to be ignored either. Next week I’ll go into more detail about how I generate ideas and how I comb through all my collected ideas for the ones that become published posts.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

5 Patterns To Rearrange Responsive Layouts | Van SEO Design

---

5 Patterns To Rearrange Responsive Layouts Posted: 29 May 2012 05:30 AM PDT The most obvious way a responsive design changes is in its layout. Multiple columns become a single column. A sidebar drops below the main content. One block of design elements becomes integrated with another. Understanding how to create flexible and adaptable layouts will probably be the first problem you work to solve when moving to responsive design and a number of patterns have emerged for how designers are moving the large blocks of a design around. The Problem Adaptive layouts are one of the central problems of responsive design. On a phone our layout will be a single column and on a widescreen browser we want 2, 3, or 4 columns. The question is how do we get from one to the other? How will our design adapt? The easy part is to make layouts flexible. Drop ‘px’ measurements in favor of % measurements and your layouts can better adapt. That doesn’t solve everything though. With relative measurements layouts are more flexible, but there are still points at which they break and need something more. Over the years we’ve trained ourselves to think of a website as several large boxes filled with stuff. Look at most any website and you’ll find it includes any number of each of the following, including 0. header block main content block sidebar block footer block The nature of html and css is that we create lots and lots of boxes. To manage all these boxes we wrap them in the containers above and then place these containers on the page in different ways to create a layout. We also rearrange boxes within containers for more variety in the design. The challenge we face is that our containers, whether it’s the device itself or one of the containers we create in our layouts, are changing size and we need to come up with ways to rearrange the boxes within as they do. The Solution: Layout Patterns Luke Wroblewski, lover of data that he is, spent some time looking through the sites listed at Media Queries and compiled some patterns for how designers are reflowing layouts. Luke observed 5 main patterns designers have been using. Mostly fluid — This is the most popular pattern being used. At phone sizes it stacks columns vertically and turns the stack into multiple columns as the browser width can accommodate them. In between elements and containers are flexible and they expand and contract up to different breakpoints. At these breakpoints columns drop or rise. One other concept this pattern employs is a maximum width for which the overall layout can grow and as browsers expand beyond it, additional whitespace is introduced outside the layout. At this point the pattern looks much like the fixed-width and centered layouts we’ve been creating for years. Column drop — This pattern is similar to the mostly fluid pattern except that containers aren’t as flexible. Perhaps one column flexes while others remain fixed or all containers remain fixed while only whitespace outside the layout adapts. When the overall layout can no longer accommodate it, a column drops below another. At first glance it might seem to be the same as the mostly fluid pattern. The difference is in how larger blocks do or don’t resize between breakpoints. As such this pattern could require more breakpoints. Layout shifter — Here the changes in layout of more than column drops between breakpoints. This is perhaps the most innovative of the patterns. The patterns above are more concerned with rearranging the outermost boxes, the containers. The layout shifter patters also rearranges the boxes within containers. Elements and containers are flexible between breakpoints and the main distinguishing characteristic is that more than a simple column drop is happening at layout changes. The layout shifter pattern also seeks to rearrange the boxes within the containers, instead of just the main containers. Tiny tweaks — As the name implies this layout pattern consists of small tweaks. It’s the least popular pattern Luke observed and generally requires a very simple layout across all devices. Often it’ll be a single column layout everywhere that simply moves a few things around in small ways. The layout can be more complex than a single column, but generally not much more and not as much change is occurring here as it does in the other patterns. Off canvas — This patterns flips things from the vertical to the horizontal. Instead of columns dropping below other columns, they’re shifted out of the visible part of the display. Columns are moved off the canvas. In this pattern content will be hidden when the screen isn’t wide enough to accommodate it. That content will still be accessible, but a viewer will need to take some action to request it and see it. Typically after the request the content will slide in from left to right, either on top of what was already there or shifting something that had been visible outside the canvas. If it’s hard to picture the patterns above from my descriptions, Luke created images so you can see how each works. He also provides a few example sites for each pattern. In a followup post Luke called on designers and developers to create a working example of the off canvas pattern. Jason Weaver obliged and you can find a nice demo site using this pattern. My Experience Outside of the off canvas pattern, which I’ve yet to use, I’ve probably used a bit of all of the other patterns depending on the specific site. I’d characterize most of the responsive designs I’ve built as falling into the mostly fluid pattern. I do find the off canvas pattern interesting though, and would like to experiment with it. The biggest limitation I’m finding in responsive layouts is that for single columns we’re mostly locked into following how things appear in our html. If your sidebar block comes before your main content block in the html then it will come first when everything is displayed inside a single column. The off canvas pattern attempts to fix this, by moving things off screen, though it’s not always going to be what we want. Another approach is to think of the different rows of blocks in your layout and to always place the most important content in that row first in the html. For example your header block might be one row, followed by a row containing 3 columns of content, and a final row consisting of your footer. It might be be difficult to get header and footer to change places, but you can rearrange the columns in the middle row without too much difficulty. It’s still somewhat limiting though. Interlacing Content Blocks There’s only so much you can do if you’re only rearranging the big blocks. The layout shifter pattern expands the possibilities by having us rearrange the boxes within boxes, but there’s still something missing and that’s an ability to have an element inside one container shift to be inside a different container. Trent Walton first brought attention to this issue with his content choreography post. Not long after I was trying to get at this problem when I wrote my post on rearranging boxes and it’s subsequent attempts at a solution. More recently Chris Coyier continued the talk about content folding as how we might merge or interlace blocks from different columns together. I think the ultimate solution is to become more modular. We have to stop wrapping everything inside containers. We need to see elements as their own containers in order to have greater flexibility in how we reflow them. Instead of seeing a single sidebar column that contains 3 boxes inside, we need to see it as 3 individual boxes that are located one below the other. Structurally we have to break free from placing these boxes in a large container even as we visually maintain the appearance that we are. Summary There are two general concepts to making a layout responsive. The first is to move from absolute measurements to relative measurements. From ‘px’ to %. That’s the easy part. The more complicated concept is how do we rearrange these boxes when they can no longer flex in a usable way? At some point we need to rearrange the boxes of our layout. Several patterns have already emerged for how we do this. Most common is to simply drop one column below another, but more interesting are the patterns that also rearrange what’s inside columns or shift things off the page. My own experience suggests we also need to think more modular and remove some of the containers that have made developing layouts easier. It’s easy to rearrange boxes within a container, but hard to get boxes to break out of one container into another. By removing containers we’ll have more flexibility in how we can rearrange things. Next week, we’ll start looking at one box within our containers. We’ll look specifically at navigation and some of the patterns being used to reflow navigation.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

12 Designs That Inspire Me To Do Better | Van SEO Design

---

12 Designs That Inspire Me To Do Better Posted: 24 May 2012 05:30 AM PDT I come across a lot of different designs as I wander my way through the web. When a design inspires me in some way I take a moment or two longer than usual to enjoy it and then record the URL somewhere so I can go back again. I thought I’d share a few of these sites with some thoughts about why I like them. I’ve grouped the designs into several categories, but these designs generally do more than one thing well. The organization is more for me to talk about them. You can click any of the screenshots in this post to be taken to the original page. Grids and Organization The designs below get more than grids right. However I think each uses a typographic grid particularly well and so have grouped them together here. Pelican Fly Pelican Fly does so many things right in the design. Sam Quayle’s site makes great use of space and the typography is beautiful throughout. On the home page below you see multiple columns that use justified text as well as a column that’s been right aligned. There’s a nice letterpress effect, drop caps, and a clear hierarchy. All done with limited use of color and graphics I might add. I think it’s a good example of how a grid can help organize information, while still offering variety for how and where to place content. Compare the screenshot above and the one below. Both pages are built on the same grid, but you can see how different the designs are as far as where content is located. The site is also responsive and different grids are used at different breakpoints. From smallest width to largest, the grid moves from 3 to 6 to 9 to 13 columns. Dowling Duncan The home page of the Dowling Duncan website (not shown) offers a 4 column grid of images in it’s content ares. Below are two interior pages for the site; the profile page and the awards page. The grid here is a multiple of 5 columns, one for the navigation on the left and the other 4 for the main content. Once again if you compare the image above with the one below you can see the flexibility for placing content within a single grid. The positive and negative space differs on the two pages creating a unique flow and balance for each. Still common design elements like the navigation and the social media bits at the top are consistently located making them easy to find. Shaping the Page Shaping the Page (designed by Andy and Emily Johnson) is one of my more recent finds. While I’m only showing the home page here, I think you can again see how much flexibility there is in a typographic grid. Using a grid doesn’t mean a design has to be boxy. Content can be placed in a variety of ways to create different shapes on the page. While I’m focusing on the grid there’s much more to this design. I’m a big fan of muted colors for one and the textures for two. The type makes use of a letterpress effect and a baseline grid. If you check the site you’ll also notice there’s a lot of attention paid to each detail of the design. There’s even some fun stuff going on. Mouse over the elephant and creatures on the other pages to see what I mean. Nadine Roßa The site of Nadine Roßa is another newer find after I watched this presentation she gave about the German letter ß (please don’t ask me to pronounce it). Here the grid is based on 4 columns and while it might not offer as much variety as the designs above, I think you’d agree it creates a sense of order and simplicity. And much like the designs above it has more going for it than a grid. The illustration is nicely done, space is used well, color is used effectively and there’s a clear hierarchy in place. And of course the design features great typography which you would expect from someone who’s written a book about a single letter. Responsive Design Once again don’t let the heading of this section fool you. The sites below inspire me for many more reasons than simply being responsive. The 3 sites below are all built on grids, do a great job working with type and color and on and on. Let’s focus though on how each adapts to different screen sizes. Colly Simon Collison’s site might be one of the poster children for responsive design. It was certainly one of the earlier examples to gain prominence. If you read Simon’s post on redesigning the site, you’ll see his theme was to create a modern version of an old-fashioned Edwardian gentleman’s journal. I’d say he succeeded. Above is the home page as seen in a wide screen browser. Below is the top of the same page at around 800px. Based on the site’s css, the transition happens at 1024px. 4 columns have become 2 and if we continued reducing the browser width we’d find a single column. Now let’s compare Simon’s bio page at full size and reduced to around 480px wide. I’ve removed the boilerplate from both images and captured only the top of the content on each page. Above you see the content to the right and a sidebar to the left including some navigation, an image of Simon, and the start of a testimonial. All of this information is an aside. The links point to content further down on the page and neither the image nor the testimonial are of vital importance. At lower width the aside is removed to allow the content to fill the screen. The image above shows the very top of this content. The general approach here is to put the content front and center and remove superfluous information for smaller widths. Simple Bits Dan Cederholm’s site Simple Bits is another of my favorites and also another potential responsive poster child. It’s one of the earlier responsive designs I remember coming across. One of the things I noticed that Dan has done is resize the font depending on the width of the device. It’s hard to show in the images here so I’ll let you visit the site to see. The image above is Dan’s work page seen at widescreen. Let’s focus on the footer for a moment. There’s a left and right column of information and the left column is further split into 2 columns. Below is the top half of the footer around 650px wide. Notice how it starts with the about info from the left column and then includes all the content from the right column. Below is the remainder of the left column, the two columns with links to Dan’s books, his recent work, the site archives, etc. As the browser width is further reduced these too move toward a single column of information. In Dan’s case with the footer he’s kept all the information across different widths and integrated the information from both columns into a single column. Another approach that like Simon’s site above continues to look great at different widths. Jessica Hische Jessica Hische’s site is another well done responsive design. I want to especially call out the type on the site. I often come back to Jessica’s site for the typography alone. Below is a recent blog post seen at widescreen. Below is the top of the same post seen around 730px wide. Notice how most of the left column has been dropped. The logo is still present in slightly different form and the navigation is now below it. Reducing the browser width further, a couple of links have been removed and Jessica’s name has been added to the branding. She’s taking a similar approach as Simon in offering different content to different devices. To really see the difference compare the image above and below of Jessica’s contact page. Above it’s accessed through sub navigation under the About link. Below is the same page seen around 420px wide, which is the entire About section. Different approaches to how to deal with content and layout at different breakpoints. All 3 sites look and work great regardless of device width and each has lessons to offer for how to design responsively, in addition to all the other things each design does well. Color Scheme While different colors and color schemes can communicate different things, color is also very subjective. We all have preferences. Mine are for muted colors, usually earth tones. Yours might be completely different. As someone who still has difficulty getting the colors I want in a design I marvel at the abilities of others who can. Joshua Sortino Given my fondness for muted colors it shouldn’t be a stretch to understand why I like the color scheme Josh Sortino uses on his site. Not quite the earth tones I prefer, but still a muted palette that works very well. The cooler blue is used as background, which makes sense as cooler colors tend to recede. Warmer colors, which come forward are used to attract your attention to different parts of the page. None dominants to the extent that it overwhelms the other colors and everything clearly stands out. Of course there’s more to like with this design than the color scheme. I’ll leave it to you to check the site, but when you do pay attention to all the different details in the design. Capitol Couture I was recently pointed to this site for The Hunger Games. I haven’t seen the movie or read the book, but I keep coming back to the site to look at the design, mainly for the way the design uses color. Again colors are muted, though this time there’s a darker mood to everything, which I’m guessing plays well into the story’s theme. There are small splashes of color (the numbers in the navigation, the logo, and the buy tickets button) that draw your eye to important content. There’s a subtle use of texture and light that create interesting details drawing the eye as well. The colors here may not stand out as much as in the designs above and below, but the color scheme stands out to me for the mood it sets. You Know Who The colors of Sarah Parmenter’s website are more vibrant then the sites above, though still on the muted side. I think it’s the use of pink that adds to the vibrancy. Regardless the colors work very well together and are among the first things I noticed about this design. While I’d be lying if I said pink was among my favorite colors, I’m finding myself more and more drawn to sites that use it as an accent color. It tends to attract the eye as much as red does, though in a less aggressive way. Sarah’s site offers much beyond color. One of the things I particularly like is the 40s or 50s theme running through the images. They come across as both conservative and playful at the same time. Heightened Creativity All of the designs here are creative, but these last two take the creative up a notch, albeit in different ways. Both are fun sites to explore. Hugs for Monsters For some reason I’m usually not a huge fan of illustrated sites, but I really like the way Joe Lifrieri uses illustration on Hugs for Monsters. Joe is an illustrator so it makes sense to show off some of his skills in the design. The illustration doesn’t feel overwhelming here like I’ve seen in other designs that use it. Everything seems to fit from the main header illustration to the logo to the hand drawn type used in the headings and navigation Of course there’s still a grid in place, good use of texture, and the same muted colors you now know I prefer. One touch I enjoy about the colors is that the entire scheme is shown in the border just above the footer. Mostly though if you click through and visit the site you’ll find it’s filled with creative touches and the design shows a great deal of personality. Take a look at Joe’s about page below with it’s not safe for work heading. More illustration, a unique layout, and even more interesting subheadings like “Cool Story Bro. Can I Just Get A Quick Bio?” Do look at the site and check out the work in Joe’s portfolio. Worry Dream Worry Dream is the site of Bret Victor and it’s one of the more creative sites I’ve come across. I found it after watching this presentation which I highly recommend. I’m not sure the screenshots will really do the site justice. You’ll have to visit it to see some of what makes it so interesting and unique. The site is clearly creative. The design wouldn’t work for all sites, but here it’s meant to show off some of the work Bret has done and that work is often very creative. The site is fun and there’s a great sense of whimsy as you click around. The same things I’ve said above about other sites apply here as well. There are interesting textures and colors. The type works well and there are new and interesting details everywhere you look. The site is very interactive. This isn’t your grandfather’s static content. As unique as the site is, it’s surprisingly easy to navigate. Ultimately the more I click the more I hear myself saying and thinking “Wow!” Again, not necessarily a design you would emulate for an ecommerce site, but one with interesting things to see around every click. Summary These are far from the only sites that inspire me, but each of the designs here inspires me in one or more ways, usually more. They’re a few choice selections from all the different designs I’ve collected. Some of the reasons for the inspiration is subjective. I happen to like muted colors so designs with muted colors are more likely to inspire me than sites with brighter palettes. Some of the reasons though are more objective, like the use of a typographic grid as the foundation for good design. What I like most about all of the sites above is that they tend to follow solid design principles underneath and then then find a way to offer something unique on top. The stuff on top is what tends to wow, but it can only wow us if it’s gotten the foundation below right. That’s a few of the designs that I draw inspiration from and wish I had the skills to emulate. How about you? What designs inspire you the most?

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610