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 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:

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

SHARE:

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:

Technical Debt can be a difficult thing to explain to non software developers, so I thought I'd try to come up with some simple visualizations. Cheers.

SHARE:

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:

SHARE:

[This is the first in a meandering and irregularly published series on brownfield / legacy application development.]

TL;DR: measure stuff that makes you happy when it gets better.

Working on a brownfield application can be frustrating, demotivating, difficult, energy-sapping and soul-crushing; or to put it in other words: "let's just re-write it".

Sometimes a re-write might be the best choice, and sometimes the people with the cash might let you do it - but more often than not we inherit an application and have no choice but to work on it.

Once you come to terms with the fact that you can't do a re-write you have to either start looking sources of happiness and motivation or give up and not care.

One way too look at a bad (tightly coupled, no tests, un-unit-testable etc.) brownfield application is that it offers a goldmine of potential for improvements.

One of the biggest motivators is a sense of progress. In brownfield development you need to find something to give you a sense of that progress. In Agile we see user stories moving across the wall and getting to the 'done' column, this is one sense of progress, but sometimes this may not be enough if you know that you're actually leaving the codebase in a worse state than when you found it.

For me, one great motivator is knowing that overall the codebase is getting better, it gives me a sense of personal achievement and I know that we are a small step closer to be able to respond more quickly to changing business requirements in the future.

We have tools to measure different aspects of code quality; the key thing is to find some metrics that make you happy when you see the lines going up on the graph. The 2 simplest ones to start using are number of tests and code coverage: while these only give a partial view of code quality when you see the figures getting better week-in, week out, it can start to engender a sense of pride in the code-base. This new-found sense of pride can lead to less of a tolerance for Broken Windows.

Once you start to feel this sense of pride and potential it can become a powerful motivational force: "how awesome will it be when we get 50% code coverage!", "wow I can't believe we had zero tests to start with now we have 500!", etc.

Once you get that initial 'buzz' going you can start to add a few more metrics such as lines of duplicated code, cyclomatic complexity, etc. I'm not sure if it is a good idea to throw all these things onto the graph at the start of the project as it may seem overwhelming: "what's the point, look how bad it is, we'll never be able to make it better".

One of the things to be careful of with this approach is that developers should not see the graph as the end goal, but rather a helpful friend that whispers in their ear "you doing a pretty good job dude, keep it up". It's also important not to concentrate too heavily on the actual numbers: "why has our coverage only gone up by 1% this week", the important thing is the line is going up - it's about the trend over time, not the individual measurements.

It's probably not a good idea to link KPI, bonus amounts, yearly reviews to these figures either - as pretty soon you'll end up with 110% code coverage ;)

One last point: brownfield development can be really hard, but it can also offer a great opportunity for growth and learning new techniques for dealing with the problems inherent in brownfield app development.

SHARE:

FeatureToggle is now available via NuGet

Just search in NuGet Package Manager for FeatureToggle or in Package Manager Console:

The NuGet packages are the easiest way to get started, they will create an example feature toggle and app/web.config entries to help you get started.

Project home page: https://github.com/jason-roberts/FeatureToggle/wiki

SHARE:

http://blogs.msdn.com/b/astebner/archive/2012/02/27/10273543.aspx

"The Windows Phone SDK 7.1.1 Update – CTP provides a new 256 MB device emulator image and an updated 512 MB emulator, and it provides the ability to deploy, run, debug and profile your Windows Phone applications and games in the 512 MB emulator or the 256 MB emulator. "

http://blogs.msdn.com/b/katriend/archive/2012/02/22/quick-tip-windows-phone-7-guidance-patterns-amp-practices-release.aspx

“A Case Study for Building Advanced Windows Phone Applications: Connecting with Cloud Services"

http://erikej.blogspot.com.au/2012/01/sql-server-compact-toolbox-26visual.html

"The Windows Phone DataContext feature allows you generate a DataContext for use in Windows Phone projects, based on an existing database, saving you a large coding effort."

http://blogs.msdn.com/b/uk_faculty_connection/archive/2012/01/30/beta-release-of-the-amazon-web-services-aws-sdk-for-windows-phone.aspx

"Microsoft is pleased to announce the beta release of the Amazon Web Services (AWS) SDK for Windows Phone. Built by Microsoft as an open source project, this SDK provides developers quickly connect and integrate Windows Phone applications with AWS (S3, SimpleDB, and SQS Cloud Services)"

http://ux.artu.tv/?p=234

"Choosing between Panoramas, Pivots and/or Pages"

http://weblogs.asp.net/bsimser/archive/2012/01/29/the-big-dummies-guide-for-windows-phone-developer-resources.aspx

Amazing list of a gazillion WP7 resources : "The Big Dummies Guide for Windows Phone Developer Resources"

http://northernlights.codeplex.com/documentation

Northern Lights WP7 Toolkit - collection of tools such as : "NagForReview will ask, after a fix set of days and/or application starts, the user to review your app", "The checking of the application version against a txt file on a remote server enables you to inform the user, on startup of the app, that a newer version of your application is available", "The LittleWatson class let's you catch unhandled exception and automatically report them back to you through a webservice or let the user e-mail to you the next time the user opens up the application"

http://blogs.msdn.com/b/cdnstudents/archive/2012/01/30/winning-on-the-marketplace-the-differentiation-game.aspx

"Winning on the Marketplace: The differentiation game"

http://msdn.microsoft.com/en-us/library/hh202950(v=VS.92).aspx

"With App Connect, your application can be launched from the Pictures Hub, enabling a convenient launch experience for picture-related applications. This topic describes how to create an application that can be launched from the Pictures Hub."

http://msdn.microsoft.com/en-us/magazine/hh781024.aspx

"Get Your Windows Phone Applications in the Marketplace Faster"

http://msdn.microsoft.com/en-us/library/ff967560(VS.92).aspx#BKMK_Media

"Performance Considerations in Applications for Windows Phone"

http://msdn.microsoft.com/en-us/library/hh202904(VS.92).aspx

"Performance Techniques for Windows Phone"

http://www.pitorque.de/MisterGoodcat/post/Windows-Phone-Background-Agents-Pitfalls-(1-of-n).aspx

Windows Phone Background Agents Pitfalls

http://channel9.msdn.com/events/MIX/MIX11/DVC01

"Analyzing and Improving Windows Phone Application Performance"

http://blogs.msdn.com/b/kevinash/archive/2012/02/21/async-ctp-task-based-asynchronous-programming-for-windows-phone.aspx

Task based asynchronous programming CTP

http://blogs.msdn.com/b/abhinaba/archive/2012/02/02/wp7-clr-managed-object-overhead.aspx

Detailed discussion on memory costs in WP7 "WP7: CLR Managed Object overhead"

http://samidipbasu.com/2012/01/29/7-deadly-sins-for-wpdev/

"7 Deadly Sins for … Windows Phone Developer"

http://www.jeff.wilcox.name/2011/10/metrogridhelper/

MetroGridHelper - "fix those margins, align, and try and make your apps as beautiful and inspiring as you can"

http://www.windowsphonegeek.com/articles/MetroGrid-component-for-Windows-Phone

A version of MetroGridHelper that works at design time in Visual Studio/Blend

http://social.msdn.microsoft.com/Forums/en/windowsphone7series/thread/ef64d744-1d25-47f7-8ad7-3f102685d016

"Silverlight Validation WP7"

http://ux.artu.tv/?p=236

Really awesome, clear and concise guidelines for using Windows Phone 7 App Bar

http://blog.jerrynixon.com/2012/02/wp7-sample-use-location-services-and.html

Adding a Privacy Policy to your app

http://ux.artu.tv/?p=235

"Designing Windows Phone Icons"

http://templarian.com/2011/08/06/tutorial_creating_an_icon/

Great tutorial on creating icons in Expression Design

http://templarian.com/project_windows_phone_icons/

Icons!!

http://blog.jerrynixon.com/2012/02/wp7-sample-microphone-enabled-phone-app.html

Record and playback sound

http://blog.jerrynixon.com/2012/02/mango-sample-give-your-app-finger.html

Dragging UI items

http://dotnetslackers.com/articles/mobile/Windows-Phone-Fast-Application-Switching-and-Page-State.aspx

"An overview of fast application switching and page state in Windows Phone"

http://dontcodetired.com/blog/post/Introducing-(probably)-The-Worlds-Only-Mocking-Framework-for-Windows-Phone-7-(WP7).aspx

Introducing MoqaLate, (probably) The World's Only Mocking Framework for Windows Phone 7 (WP7)

http://blog.jerrynixon.com/2012/02/wp7-sample-accelerator-based-app-in-5.html

"This sample is the bare bones “how to use accelerometer”"

http://www.telerik.com/products/windows-phone/getting-started/promote-your-wp7-app.aspx

Great guide from Telerik on how to market your app, contains advice and some great links.

SHARE: