Redesigning DontCodeTired.Com (Part 7) - Brand-Aligned Wording

In part 2 I created a Design Persona that describes what "personality" the redesigned blog will have.

Part of this design persona involved defining some brand traits:

  • knowledgeable but not condescending
  • clear but not elitist
  • valuable but not limited
  • friendly but not chatty
  • honest but not mean
  • avoid: shallow or poorly written content

In addition I thought about the "voice":

"DontCodeTired's voice is friendly and personal, it's speech-like and somewhat casual using contractions and occasional slang over formal and stuffy speech. It doesn't try to be overly cool but is not afraid to have some fun on occasion (as long as it doesn't detract too much from the information). "

This step of the redesign involves looking at the messaging throughout the site (error messages, prompts, button text, etc.) and aligning it to the design persona.

Some Examples

The following are some examples of content that I changed:

  • "Contact" to "Say Hi"
  • "Related posts" to "Posts you might like"
  • "Comments are closed" to "Sorry, comments are closed."
  • "Comments" to "Have your say"
  • "Required" to "You missed this"
  • "Let me know when a new comment is added" to "Send me an email when new comments are added"
  • "Send" to "Send message"
  • "I suggest you try one of the links below" to "Try one of these"
  • "Tag" to "Tagged as"

I think that changes like these can subtly enhance the friendly feel of the site.

I may end up tweaking these a bit more but for now I am happy with it.

SHARE:

Redesigning DontCodeTired.Com (Part 6) - Creating Mobile Styling Using a Typography-Out Approach

Redesigning DontCodeTired.Com Part 5 - Showing and Hiding Mobile Specific Elements

The idea of typography-out is that for websites where the textual content is king, it makes sense to elevate it to the thing of primary importance. The thing that drives the rest of the design. The opposite approach is to focus on the canvas as the first thing and work "inwards' to get to the content (text) last (putting "style" or "decoration" or "chrome" before content).

Letting Typography Lead the Design

What I mean by this is the way the article text fills the screen on the mobile emulator: how many characters\words per line (i.e. the measure), leading, font size, typeface choice. All of these basic typogographic principles (of which I am not an expert) will be applied to make the content readable. Above all, readability is the primary consideration.

(Starting to learn more about typography (and other aspects of design) has given me insight and great respect for professional web designers...)

I'll consider reading distance (how far people are likely to be from the screen) as this informs the choice of font size, etc. For tablet\desktop usage, the font size may need to be different to accommodate different physical reading distances.

Choosing a Typeface

The CSS3 @font-face rule allows us to use typefaces that are different from the standard web-safe fonts. It allows us to reference new fonts to use on our sites by loading a font file into the browser and then referencing it in the CSS.

There are (as with anything Web related) different formats (WOFF, EOT, TTF/OTF, SVG) that different browsers support. The awesome Font Squirrel makes it easy to generate the CSS - and they have a load of "commercial-use free fonts".

I chose PTSansRegular for body and PTSerifCaptionRegular for headings, generating the @font-face and downloading multiple font format files courtesy of the awesome FontSquirrel. For the less important elements such as the published time I chose PTSansNarrowRegular.

Setting up the fonts

FontSquirrel generates a stylesheet.css which contains the @font-face definitions. This file sets the font-weight and font-style to normal for each of the included fonts.

This can cause a problem where text will be doubly emboldened or italicized. For example, if the <em> style below is used, the browser may try to initializes an already italic typeface and you may get horribly double slanted (italicized) text:

em {
font-family: 'PTSansItalic', Georgia, serif;
}

To fix this we can edit FontSquirrel's CSS and specify font-style: italic; in the font-face:

@font-face {
font-family: 'PTSansItalic';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype'),
url('PTS56F-webfont.svg#PTSansItalic') format('svg');
font-weight: normal;
font-style: italic;
}

(You can do this for bold typefaces too..)

A Nice Vertical Flow

We want the vertical flow of text to look good. One way we can do this is to space things vertically in a consistent way.

The rem unit of measurement is a newer CSS concept with some support. It is similar to em in that it is a relative measurement, but unlike em it is relative to the root HTML element rather than the element's immediate parent.

As rem is not supported in older browsers we can specify a px value first and then a rem value. This could be pretty tedious, but again SASS makes it less painful.

The following extract of SASS defines some variables and a mixin to set basic typography properties:

/*
Variables
*/
$baseFontSize: 16; // size for px values and rem calculations, i.e. 1 rem = this value
$lineHeightMultiple: 1.5; // e.g. 1.5 = 150% line height
$baseVerticalRhythm: $baseFontSize * $lineHeightMultiple;
@mixin standardTypeMeasure($multipleOfBaseRhythm){
$px :$baseVerticalRhythm * $multipleOfBaseRhythm;
font-size:  $px + px;
font-size: $px / $baseFontSize + rem;
line-height: ($px * $lineHeightMultiple) + px;
line-height: (($px / $baseFontSize) * $lineHeightMultiple) + rem;
}

This mixin can then be called from our CSS rules:

time {
@include standardTypeMeasure(0.5);
font-family: 'PTSansNarrowRegular', Georgia, serif; 
}

This results in the following generated CSS:

time {
font-size: 12px;
font-size: 0.75rem;
line-height: 18px;
line-height: 1.125rem;
font-family: 'PTSansNarrowRegular', Georgia, serif; }

Browsers that do not understand rem will instead use the `px' value.

Investigating CSS Hyphenation

I experimented with CSS text justification and hyphenation but it didn't look great and current browser support at the time of writing is only 24.77%. I was testing in Firefox using the vendor prefix :

text-align: justify;
-moz-hyphens: auto;

A Nice Chrome Plugin

There is a nice Chrome browser plug-in which quickly lets you change the browser window to one of a number of preset sizes (e.g. iPhone, iPad etc.) or create your own.

For the mobile version I've been mostly using the Windows Phone 7 emulator, however this Chrome plugin will be great for future parts of the redesign.

In Conclusion

Throughout this section I've also been continuing to hide elements that are not good for mobile. I've also been fixing up bits of markup (for example on the add comments section) to make it easier to style.

At this point I'm still not thinking about non-typography elements such as decoration, colors, logos, etc. This part will come later (and is going to be heaps of fun).

This step took a lot longer than I thought it might, but I'm OK with that as one of the goals of this redesign is to focus on the text.

Screen Shots



SHARE:

Redesigning DontCodeTired.Com (Part 5) - Showing and Hiding Mobile Specific Elements

Taking a "mobile-first" approach, the initial work on styling will be for mobile devices, i.e. small screen resolutions.

Getting Started

In a previous post in this series I added the semantic HTML5 elements.

I'm going to be using SASS from this point onwards to generate the CSS.

I have taken a copy of the blog and hosted on my local machine, this means I can work with real content (blog posts) and hopefully encounter any problems much sooner than I could with fake Lorem ipsum text.

In the master page I have removed the reference to the existing style.css and replaced with a reference to 0-up.css. This file is essentially the 0-width-and-up CSS that will be rendered on mobile devices, eventually media queries will kick in to override these styles on desktop\tablet browsers.

The 0-up.css file is not edited by hand, instead it is compiled from the 0-up.scss SASS file.

What the site looks like naked:

dontcodetired.com without any styling CSS

Hiding the Side Bar

So now we have some semantic HTML5 markup and an unstyled site (other than some CSS base/reset styles). The next step is to hide items such as the widget side bar that contains tagcloud, etc.

There will be times throughout the redesign that specific elements will need to be hidden, I've created a mixin. I can then just apply this mixin in any CSS rule.

The following is an extract from the 0-up.scss which shows a mixin being defined and then applied to hide the sidepanel div:

/* based on visuallyhidden style from http://html5boilerplate.com/ */
@mixin visually-hidden {
border: 0; 
clip: rect(0 0 0 0); 
height: 1px; 
margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px; 
}
#sidepanel {
@include visually-hidden;
}

Different Main Navigation for Mobile

The first step is to hide the existing "desktop" nav by applying the above mixin:

#menuNavList {
@include visually-hidden;
}

(gotta love SASS!)

Next we need to render some new markup that will display a drop down box for a the main menu navigation, this will take up less space on mobile devices and the select behavior will be in line with the mobile device on which it's rendered (for example on Windows Phone the full page list picker would be shown).

<select id="menuNavSelect">                
<option value="<%=Resources.labels.home %>"><%=Resources.labels.home %></option>
<option value="<%=Resources.labels.archive %>"><%=Resources.labels.archive %></option>
<option value="<%=Resources.labels.contact %>"><%=Resources.labels.contact %></option>
<option value="<%=Resources.labels.subscribe %>"><%=Resources.labels.subscribe %></option>
</select>

This new menu doesn't have to be explicitly set to visible. As this is a mobile-first design approach, at the moment I'm not worrying about desktop versions. Future work will involve creating media queries for higher resolutions that may hide this new menu and make the original menu visible again.

This approach is continued for the other HTML elements, in some cases more appropriate markup is rendered just like the navigation above.

SHARE:

Redesigning DontCodeTired.Com (Part 4) - Adding Semantic HTML 5 Markup and Removing Unwanted Elements

Redesigning DontCodeTired.Com (Part 3) - Creating Content Reference Wireframes using Mobile-First Responsive In-Browser Design

Adding New HTML5 Semantic Tags

DontCodeTired.com is currently using the open source BlogEngine.Net. The markup that is currently rendered uses divs for organizing content and layout. HTML 5 gives us some new semantic elements that can give greater meaning to the content. While there seems to be differing advice in the exact usage of some of these elements, for now I'm doing what I think makes the most semantic sense for my content.

The following new HTML 5 tags have been introduced to the markup:

<header> which also contains the main site navigation in a child <nav>

<article> now surrounds each individual blog entry.

All <article> elements are surrounded in a common <section> to differentiate the articles from the sidebar content which is also in a <section>.

Each <article> now has it's own <footer> and <header>. These two new elements can appear multiple times on a page. The header contains the post title and publish date. The footer contains the social bookmarks, post rating etc. (The social bookmarks used to be contained in a <div>, this has now been changed to a <section> as the content is "thematically related"). Note: the new <section> element should not be used to replace all <divs> especially those divs which are used purely for layout, etc. Instead it should be used to give semantic meaning to the content it contains.

Each right-hand widget (tagcloud, recent posts, etc) is contained in a <section>. I considered using an <article> or <aside> instead of a <section> but these tags didn't seem quite right, I may change them in the future once HTML5 adoption increases and common usage patterns emerge.

<footer> for page footer.

<time> element to represent the publication date of the blog entry, e.g. <time pubdate="pubdate" datetime="2012-04-25T14:22:00">Wednesday 25 April 2012 14:22</time>

Note: the pubdate="pubdate" is the XHTML5 variant, you could also use: <time pubdate datetime="2012-04-25T14:22:00">Wednesday 25 April 2012 14:22</time>

Coining a Term - Semantic Structure Wireframe

So I came up with this idea of a Semantic Structure Wireframe. A Semantic Structure Wireframe is an outline of how content is broken down and organized semantically using the new HTML 5 tags. It is meant to be a high level view of the blocks of semantic content the will be represented on the page.

An example of a Semantic Structure Wireframe for the DontCodeTired.com page viewing a page with multiple blog posts: 

Semantic Structure Wireframe

To enable older browsers to be able to recognize and style these new HTML5 tags, I'm including HTML5 Shiv. Similarly as I will be using CSS 3 media queries to create a responsive design I've also included Respond.js to add CSS 3 min/max-width media query support to older browsers. These 2 files are actually included as part of a custom build, in additional to things like Modernizr created at initializr.com). The Initializr package also contains some HTML5 compatible CSS reset styles which I've also included.

Removal of Unwanted Elements

Some elements that I no longer wanted were also removed at this stage - these are things that I don't want on any device or screen resolution:

  • 'filter by APML' link
  • log in/out link in main menu when logged out - appears only when logged in
  • "by Jason" on each article - as I'm the only one that posts it's redundant :)

Adding ARIA Landmark Roles

The Accessible Rich Internet Applications specification allows authors to add additional 'metadata' in order to "to allow assistive technologies to convey appropriate information to persons with disabilities". This helps assistive technologies (such as screen readers) to better understand and navigate content. The Landmark Roles "are regions of the page intended as navigational landmarks". These roles can be used in addition to HTML5 semantic markup.

The following Landmark Roles have been added to DontCodeTired HTML5 elements:

  • <header id="header" role="banner">
  • <nav id="menu" role="navigation">
  • <article role="article">
  • <footer id="dctMasterPageFooter" role="contentinfo">

Screenshots of desktop and wp7 at this stage (note some formatting has broken i.e. right hand widgets don't have backgrounds anymore), this will be fixed when we come to do the styling.

 

screenshot of desktop browser

screenshot of Windows Phone 7 Browser

SHARE:

Redesigning DontCodeTired.Com (Part 3) - Creating Content Reference Wireframes using Mobile-First Responsive In-Browser Design

Redesigning DontCodeTired.Com (Part 2) - Designing with Personality

This step is all about deciding what content will go where, and more importantly what content will be removed when viewed on mobile or tablet devices.

I could use an image editor (Photoshop, Inkscape, Paint.Net, etc) to create some wireframes and decide what content to put in them.

An alternative is to do in-browser design. This means actually creating the wireframes using HTML and CSS. The advantage of this is that I can iterate really quickly through designs and actually view the wireframes in the browser or mobile emulator. By using CSS 3 media queries I can experiment with mobile and tablet wireframes early on to get a feel for the final implementation in the actual target technology (HTML & CSS) rather than having to translate from a bitmap (Photoshop, etc.) at a later date.

As a starting point and with 'mobile first' and 'progressive enhancement' in mind, the first wireframe is a simple linear design where the majority of content flows from top to bottom. The value of starting with the most basic, most simple, linear design is that it forces us to concentrate on the most 'accessible', mobile-friendly version first. Once this is done we can add  extra content for non-mobile/desktop resolutions.

Initially I tried using markup (using Pandoc) but found it wasn't adding much value, so switched to just writing the HTML manually.

I am using SASS to make writing the CSS a bit easier using the SASS command line. You could also use Visual Studio with the awesome (and free) Web Workbench for the SASS compilation.

(SASS is an way of writing CSS at a slightly higher abstraction layer and allow variables for repeated values etc. or in their words: "Sass makes CSS fun again")

Stop in the Name of love Text

I got as far as an initial wireframe for mobile and a design for 800px width screen then I started to read about the ideas of "typography first" and "content-out, not canvas-in" approaches. As I want the content (text) to be the most important thing in the redesign, I decided to not do any more work on the content reference wireframes at this point.

A future step will be to start with some sample content and figure out how the typography will affect the layout and where the responsive breakpoints will naturally occur when taking into account measure, leading, font size, etc.

The image below show a content reference wireframe for the multiple posts page (as viewed in the Windows Phone emulator).

SHARE:

Redesigning DontCodeTired.Com (Part 2) - Designing with Personality

Redesigning DontCodeTired.Com (Part 1) - The Content Inventory

Users Personas

User personas are a way to try and understand the user base by inventing archetypal  representative users at a more human level. Creating them forces you to actually think about who is or will be using the site, and more importantly what content might give them a reason to be on the site in the first place.

Tim Smith

Tim Smith lives in London, England and he's in his mid-thirties. He's a professional software developer with 10+ years experience, working at a large corporation who's primary business is not the creation of software. He works in the IT department which is separated by organizational structure from the business. He loves writing software and using new technology but doesn't often get a chance to exercise this at work as his employer is slow to change and not really interested in software craftsmanship or long term quality. Tim loves to spend some of his spare time learning new stuff and contributing to the open source community, he's also love to self-publish mobile and tablet apps in the future. He uses the Internet partly for reference info (class structures, APIs, etc) but also enjoys more in-depth tutorial-like material so he can expand his knowledge and be exposed to new ideas. Tim also likes chilling out, playing acoustic guitar and XBOX, and walking in the English national parks.

Sarah Bells

Sarah Bells is a mid-twenties, formally untrained software developer with a huge passion for software development. She's currently working in Boston, USA at a small start-up working long hours but loving it as she's in control of what technology is used and she's able to use all the latest cool libraries. When she's not at work she loves dining with friends and letting off steam at local bars and clubs.  She wants to find answers to things quickly and usually has a thousand browser tabs open. Sarah occasionally makes time for more in-depth tutorials.

Mellisa Brand

Mellisa Brand is a 2nd year university student studying computer science. She loves the theory but occasionally finds it hard to see how she would do things in the 'real world'. She loves casually reading online material to get a feel for what is happening, she rarely  tries the ideas out in code herself. As a student she loves socializing in University bars.

David Lions

David Lions is a recruiter specializing in finding top quality developers. He was a developer himself for a while but found his way into his current job. Whilst he no longer actively develops software, he uses blogs, twitter etc. to get a feel for potential candidates before approaching them. David always gets high praise as he always provides top quality candidates for companies to interview.

Design persona

A design persona is a way of thinking about what personality the site will possess. It's a way of thinking about how the site will connect with people in a human, personal, emotional way.

Brand Name

DontCodeTired.Com Blog

Overview

DontCodeTired.Com Blog is the personal blog site of Jason Roberts, a software developer with 13+ years of commercial experience. The site has been running since 25th January 2005 and has a mixture of content from simple short articles to more tutorial style\length pieces. The blog mostly focuses on Microsoft based development technology but has some non-Microsoft specific content such as JavaScript. It also has some content on more general software development topics.

Desired Brand Traits

  • knowledgeable but not condescending
  • clear but not elitist
  • valuable but not limited
  • friendly but not chatty
  • honest but not mean
  • avoid: shallow or poorly written content

Voice

DontCodeTired's voice is friendly and personal, it's speech-like and somewhat casual using contractions and occasional slang over formal and stuffy speech. It doesn't try to be overly cool but is not afraid to have some fun on occasion (as long as it doesn't detract too much from the information).

Copy examples

  • Success message: "All done, thanks!"
  • Error message: "Sorry, something wen't wrong..."
  • Critical failure: "Sorry, something is really broken at the moment..."

Visual Lexicon

Color

DontCodeTired's colors are clean and mostly understated. Where color highlights are needed they are saturated and bright. Solid blocks of color are preferred to gradients.

Typography

DontCodeTired is all about the article content. Main content typography will use clean readable sans-serif fonts with a predictable type ramp. DontCodeTired's overall design will be based heavily on the readability of text.

General Style

Taking some ques from Metro design, interface elements will mostly focus on content over chrome, elevating the article content to the fore, relegating non important navigation and other elements to the ground.

SHARE:

Redesigning DontCodeTired.Com (Part 1) - The Content Inventory

This is the first in a series of posts describing how I am redesigning the DontCodeTime.com blog.

DontCodeTired is looking tired and boring, it also sucks when viewed on a mobile phone, hence I've decided to do a redesign. I am not a designer, if I was willing to pay for a designer (and I knew where to find one) I may have decided to use one. Certainly for a commercial project I would push heavily for a professional designer to be employed.

Building a content inventory

A content inventory is a way of examining and documenting the content that is currently on the site. This will not mean every individual post at this point, rather the key areas of content. The point of doing this is so at a later stage we can consciously decide what content is suitable for what devices, we may even throw away content completely.

At this point I don't want to pre-think about the actual new design - other than some what-extra-stuff-could-I-add.

Current DontCodeTired Content Inventory

Common to all pages
- Page header (title + sub title)
- Page footer ( be logo, dct link, terms of use link)
- Main nav menu
    - home
    - archive
    - contact
    - subscribe (rss)
    - log in
    - filter by APML

Common sidebars
- Silverlight apps links
- Tag cloud
- Recent posts
- Search box

Archive

Contact
- form

Log in page

Terms of use

Article (short view)
- Body Title
- by jason
- date time pub
- Body content
- rating
- tags
- sharing (email etc)
- permalink
- comment clink
- post RSS

Article (full view)
- prev next nav bar
- Body Title
- by jason
- date time pub
- Body content
- rating
- tags
- sharing (email etc)
- permalink
- comments link
- post RSS
- related posts
- comments
    

Possible New Content

- Advertisements: min one one each page, between posts, maybe side bar
- Logo
- Follow me on twitter button
- latest tweets/tweet? (only desktop & tablet??)
- Linked in profile link???
- My WP7 apps links
- My OS projects links
- Technical Debt Simulator
- share on g+
- share on fb
- share on twitter
- about me box (short aside) with link to longer about me page
- about me longer page

How it looks at this point

 






Redesigning DontCodeTired.Com (Part 2) - Designing with Personality

SHARE:

Brownfield Application Development (Part 2) - Lose Weight, Feel Great

If there was The Biggest Loser for software, legacy applications would be up there sweating on the treadmill and trying to resist the chocolate cake.

One of the characteristics of legacy code bases is bloat, fat, weight - basically stuff that we could do without.

This bloat slows us down: more scrolling, more stuff to distract us from the thing we're looking for, longer VCS operations, longer builds, more keystrokes etc.

15 Diet Tips for Overweight Apps

  1. Remove unused usings
  2. Removed DLL references that aren't needed (and delete the DLLs from source control)
  3. Delete commented out code (you are using a VCS right?)
  4. Delete pointless class or method XML comments (empty summary, params with no useful info, etc.)
  5. Delete unused class files
  6. Delete commented out tests
  7. Delete ignored tests (if you can't un-ignore them and get them working quickly)
  8. Delete bad tests (tests without asserts, etc.)
  9. Remove unused variables, methods, constants, etc.
  10. Remove unused JavaScript and CSS files
  11. Delete unused screens, pages, custom/user controls
  12. Removed unused CSS styles
  13. Remove pointless inline comments "// the line below declares a variable for loop counter"
  14. Remove multiple line spaces between members (unless you like them)
  15. Delete unused configuration settings

SHARE:

March Windows Phone 7 Roundup

Windows Phone SDK 7.1.1 Update Now Available

"it’s the final version of the CTP we released last month, and enables Windows Phone developers to do two things: Develop apps that work well on the new 256 MB devices; Use the WPSDK 7.1 to develop on machines running Window "

Find your local Windows Phone Champion

Reactive Extensions v2.0 Beta available now!

Windows Phone Data Binding Tutorial

Windows Phone Dev Podcast

SHARE: