Making An Awesome Windows 8 Pinned Tile for your Website

With Windows 8 and the metro "Modern Windows New UI Store Experience Style" version of Internet Explorer 10, you can pin a web site to the start menu and provide a hi-res image to be displayed on the tile. This is a nice little touch to "delight the user" and requires very little effort.

There are also some cool things you can do to enable your pinned tile to display notification badges, though this requires a little extra work.

Customising the Pinned Site Tile Image

By default the tile that gets pinned to your start menu will either appear with the site favicon or the default Internet Explorer logo.

Either way it doesn't look super great.

You can create a larger PNG image and tell Windows 8 to use this hi-res image rather than the small lo-res favicon or default IE logo. The image must be 144px high and 144px wide and it's recommended by Microsoft that you use a transparent background.

More...

SHARE:

Getting Started with SASS for Microsoft Developers

Sass (Syntactically Awesome Style Sheets) tries to make CSS fun again.

It's a set of "extensions" on top of standard CSS that make it easier to write and maintain style sheets.

A Sass file compiles down to regular CSS so it doesn't require any special browser plug-ins.

This article is aimed at Microsoft developers but the Sass language sections apply to anyone wanting to get an overview of Sass, regardless of the web programming platform or IDE you're using.

More...

SHARE:

The Architect's Guide to Choosing Between HTML5 or Native Mobile Apps

Deciding between writing native apps or "cross platform" HTML5 apps is hard. It's an increasingly relevant debate as mobile and tablet usage continues to increase.

As the usage of mobile devices is increasing, so too is the user expectation of an awesome experience

Some people will only ever access your service and brand via a mobile phone or tablet device.

As the usage of mobile devices is increasing, so too is the user expectation of an awesome experience.

(This article does not deal with games as they provide their own look and feel and interaction patterns.)

More...

SHARE:

Coding with Compassion

From an engineering perspective we judge code by its complexity, test coverage, etc. These are all empirical measurements that give us an indication of the qualities that the code base possesses.

We say things like: "we have 90% code coverage and 2764 unit tests".

We may give ourselves targets such as:

  • No class longer than 100 lines of code;
  • 100% code coverage for new tests;
  • Treat all compiler warnings as errors;
  • and so on...

These are all mechanical, empirical, engineering type things and there is nothing wrong with that.

I think there may be another aspect to the way we think about software; a more human-centric way - Compassionate Coding.

All human beings are the same. We all want happiness and do not want suffering.

Dalai Lama

Compassionate Coding has two aspects: compassion for the end-user and compassion for the next developer who has to understand our code.

More...

SHARE:

The Complete Beginners Guide to Hello World using C# .Net and Mono on Raspberry Pi

Disclaimer: some of the software used below is pre-release, use at your own risk...

This article assumes basic knowledge of writing C# and using Visual Studio - it doesn't assume any prior knowledge of Raspberry Pi or Linux.

My Parts List

You can find a list of verified peripherals here, below are the specifics of what I'm using successfully:

  • Raspberry Pi Model B (from element14 Australia)
  • 1 metre high speed HDMI lead (from element14 Australia)
  • Microsoft Comfort Curve 3000 USB keyboard;
  • Logitech M100 USB mouse;
  • SanDisk 16GB Ultra SDHC Card, Class 10, "up to 30 MB/s 200X"
  • Nokia AC-USB phone charger (output: DC 5 volt 1 amp*)
  • Cat 5 Ethernet cable (wired to Belkin wireless bridge/extender)

* It's important to have a sufficiently powerful supply.

Preparing the Operating System

Download Soft-float Debian “wheezy” image from http://www.raspberrypi.org/downloads.

Extract the .img from the zip file.

Download Win32 Disk Imager http://www.softpedia.com/get/CD-DVD-Tools/Data-CD-DVD-Burning/Win32-Disk-Imager.shtml (make sure you get the correct link as there's lots of advertising and other download links on the page).

More...

SHARE:

Designing Mobile Apps

I've authored three Windows Phone 7 mobile apps. This is not a huge number I know but I would like to share how I think about mobile app design. The workflow below is not limited to any particular platform and can be applied to Windows Phone, iOS, Android development or at a push Blackberry ;)

Step 1: Stop and Think

It's so easy to break open an IDE and start hacking together your app, especially if you're using great developer tools such as Visual Studio and Expression Blend. Shutdown your computer, grab a cup of coffee, sit down and think.

thinking does equal working

As a developer I have to force myself to do this, which is why shutting down your computer is a necessity! More...

SHARE:

Redesigning DontCodeTired.Com (Part 11) - Conclusion

The redesigned Don't Code Tired is now live. This article wraps up the series with a look back at what I learned and what things are still outstanding.

Key Things I Learned

I am not a designer. Ok so I knew this anyway, even though I learned heaps from this process if I were to undertake it again I would at least get some feedback along the way from a designer.

I love SASS

CSS Media Queries are awesome. It is so easy to apply different styling based on browser width, the hard bit is deciding what you want to show

I Love SASS. SASS really does make writing CSS a more pleasurable experience. Even though I feel I have only just scratched the surface of what is possible I am hooked and will be using SASS on any project I can in the future.

Other Learnings

  • Design concepts such as: mobile-first, typography-out, designing with personality, content inventories, etc.
  • Basic colour theory
  • Controlling mobile browser rendering and zooming with meta tags
  • Custom fonts using @font-face
  • New semantic HTML5 elements
  • ARIA Landmark Roles

Evaluating the Final Design

I though it is good to look at the final outcome and compare it against what I initially set out to do.

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)."

I think the the voice of the messages, prompts, navigation, etc. upholds this design goal. Some existing articles in the blog may not, but I should refer to this when writing future articles.

Colour

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

There are no gradients in the final design, but the final colours I chose are not "understated", quite the opposite the purple is quite bright. I'm not sure how I feel at this stage, I may revisit the colour palette at a later date, but due to the awesomeness of SASS I can just change a few variables and the whole colour scheme will be updated.

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

The chosen fonts meet the above brief, if I have one criticism it's that the type ramp for headings could be a little better. The first few heading levels are good, but at the lower levels there is not much difference in size.

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

This design goal has been well respected throughout the design. There are not a lot of boxes to "constrain" content, instead proximity and relative size are used to group content.

Other Observations

  • There is too much empty space in desktop version in the header
  • The header colour may be too bright
  • Tweet button on the home page is showing the same value for each post
  • Max width should look prettier once the browser expands beyond this point, perhaps centred or other design element to fill the space
  • The SASS needs refactoring
  • Content still transmitted to mobile devices even when not shown
  • Loading speed on mobile devices needs to be quicker, especially the first page. This may need some CSS and JavaScript bundling and minification. The number of posts on the first page may also need to be reduced
  • Tag cloud and "things I've built" section need to be able to be accessed somehow on mobile devices where the sidebar is hidden

SHARE:

Redesigning DontCodeTired.Com (Part 10) - Creating the Remaining Responsive Breakpoints

Creating the Second Responsive Breakpoint

The next responsive breakpoint kicks in at 970px width. At this point the first of the sidebars become visible. This "about me" sidebar contains a basic bio and the last tweet I made, in addition to some advertisement space.

The tone of this sidebar is muted (other than the ads) with grey text and a black and white bio photo so as not to detract too much from the main article content.

I think the measure (length of horizontal line of text) becomes a little long before this break point kicks in, but is an acceptable compromise.

Creating the Third Responsive Breakpoint

The third breakpoint kicks in at 1200px. It introduces the second of the sidebars on the left side.

This sidebar contains common blog-type widgets such as tag clouds and links. Again the text is muted so as to not detract too much from the main content.

Defining a Maximum Width

As the width continues out from the third breakpoint the measure becomes increasingly long. Left unchecked the readability quickly becomes poor as the eye has a long way to travel from the end of one line on the right to the start of the next line on the left.

At some point a maximum point is reached where the text should no longer expand. This point occurs at 1470px, which still allow a pretty long measure but again is somewhat of a compromise. This is defined in the CSS using:

html {
max-width: 1470px;
}

At some point I might make the whole body centre aligned but for now I'm ok with this.

Using SASS to Style Tag Cloud Text Sizes

The blogging engine I'm using renders the tag cloud by adding classes to the items depending on the prominence of those tags in posts. Whilst I could have simply hard-coded the font sizes in these, it looked like a good opportunity to use SASS.

First I defined a couple of SASS variables, one to set the base font size for the least frequent tags, another to set what the increment is between each size. Then it's just a matter of multiplying the base size by a multiple of the increment. This enabled me to play with different combinations really quickly to get the look I wanted.

The final chuck of SASS looked like this:

$tcBaseSize: 0.5;
$tcIncrement: 0.3;
.tagcloud a.biggest {
@include font-size($tcBaseSize + (4 * $tcIncrement));
}
.tagcloud a.big {
@include font-size($tcBaseSize + (3 * $tcIncrement));
}
.tagcloud a.medium {
@include font-size($tcBaseSize + (2 * $tcIncrement));
}
.tagcloud a.small {
@include font-size($tcBaseSize + (1 * $tcIncrement));
}
.tagcloud a.smallest {
@include font-size($tcBaseSize);
}

Styling the Bullet Points in Unordered Lists

I wanted to change the bullet points from the default black circle to a coloured square as a nice visual embellishment.

The problem is that other than using images for bullets, this can be hard to do in CSS. Also I needed the solution to work with all the old posts that used unordered lists.

The solution I came up with (whilst a bit of a hack) seems to work nicely with the above constraints.

The solution involves using some jQuery to find all the <li> elements, and inject a <span> to wrap the inner content. This span has an inline style applied to set the colour to the that used by the rest of the article copy.

function wrapListItemContent() {
var standardTextColor = $("#hiddenTextColorJQueryHook").css("color");
$("ul li").each(function () {
var t = $(this);
t.html('<span style="color: ' + standardTextColor + '">' + t.html() + "</span>");
});
}

The hiddenTextColorJQueryHook is an element that I inject whatever SASS colour variable I'm using, so that if I change the SASS colours there will be no change required in the JavaScript.

The downside of this approach is the bullet points and text will appear coloured until the jQuery document ready fires. I may decide to pull this once I get into final device testing.

Screenshots of the New Breakpoints



SHARE:

Redesigning DontCodeTired.Com (Part 9) - Creating the Design for the First Responsive Breakpoint

At this point in the redesign process the mobile layout and design is (mostly) complete. The next stage of the process is to look at "non-mobile" designs.

Again I am going to take a typography-first approach. What this means is looking at the font size, measure, etc. at different browser widths and trying to maintain a nice reading experience as the width increases.

Responsive Breakpoints

A response design breakpoint is that point where one set of CSS styles takes over from another. Each breakpoint represents potentially different layout, styling, content and functionality. Responsive breakpoints are implemented using CSS3 media queries that enable a different set of CSS to be applied depending on the size of the window.

A response design breakpoint is that point where one set of CSS styles takes over from another.

As I am thinking typography-first, I will let the breakpoints occur naturally where they arise rather than designing up front. I'll be doing in-browser design rather that mockups in a drawing or prototyping application.

A good guide (see below for recommended tools) for the different resolutions is the Chrome Window Resizer plugin.

Will it Look Good on an iPad?

It's not a good idea to think of individual devices because we don't want to have device-specific renderings; this is not sustainable or maintainable: every time a new device is released we would have to create a breakpoint for it.

If the user has a browser that supports media queries then we can write CSS specifically for certain situations

We can however look at the resolution of an iPad (for example) and add this to the Window Resizer plugin to give us another useful reference point. I have added a 1024 x 768 (iPad landscape) and 768 x 1024 (iPad portrait).

Arranging the CSS (SASS)

Currently I have a 0-up.scss SASS file that generates a 0-up.css file. This is being included and is not surrounded by a conditional media query. This means that these styles will always be used, unless they are overridden by styles that occur later in the CSS.

The styles that are specified later on will be surrounded by media queries that represent the responsive breakpoints in the design.

The First Responsive Breakpoint at 768px

At 768 pixels wide the measure (of the text) is still nice as is the font size. The thing that I want to introduce at this breakpoint is a change in the header.

I want to replace the drop-down select box with simple hyperlinks. I also want to add the search box into the header.

Creating a Breakpoint Using CSS Media Queries

The first thing we need to do is create a new (SASS) stylesheet to represent the styles that will be overridden, i.e. 768-up.scss.

The first thing in this stylesheet is to create the media query:

@media all and (min-width: 768px){
}

Weirdly, the Chrome Window Resizer seems to incorrectly report the width so at 768px the media query didn't kick in (I testing this by adding html { background-color: black;} and using the plugin to change to 768px, but the background was still white.

Some other tools I tried:

Hiding the Drop Down Select Menu

In the 768-up file:

@media all and (min-width: 768px){  
#menuNavSelect{
visibility: hidden;
display: none;
}
}

Showing the Hyperlink Navigation

In the 768-up file:

@media all and (min-width: 768px){  
#menuNavSelect{
visibility: hidden;
display: none;
}
#menuNavList {
visibility: visible;
display: block;
}
}

Showing the Search Box

It's at this point that the idea of having multiple SASS files to represent the breakpoints becomes problematic. The problem is that if we want to use any of the mixins or variables that are defined in the 0-up.scss file we would have to copy and paste them creating a maintenance overhead.

There is an import rule is SASS that can import another .scss file but it looks like it imports as plain CSS if there are any media queries.

So rather that have separate SASS files for each breakpoint, I've decided to have one SASS file, inside which all the media queries will be defined.

To show the search box, in the 768-up section of the scss file we add some styling for headerSearchContainer:

@media all and (min-width: 768px){  
#menuNavSelect{
visibility: hidden;
display: none;
}
#menuNavList {
visibility: visible;
display: block;
}
#headerSearchContainer {
visibility: visible;
display: block;
}
}

These are the only changes I want to make at this breakpoint. I may makes some tweaks later, but for now this is fine.

 







 

Screenshots from the awesome Responsinator












SHARE:

Testing Responsive Web Designs and Layout

CSS3 Media Queries enable us to have different layouts and show/hide content based on the width of the browser or device the page is being displayed on.

Typically you will have a number of Responsive Design Breakpoints that say something like: "when the screen width is less than 800px hide this, otherwise show this... etc". So we need some way to test how the page will look at a given width.

During the (ongoing) redesign of DontCodeTired I needed a way to test the site at different screen widths.

I tried a number of different tools, the two below are the ones that worked the best for me:

Firefox Nightly

Firefox Nightly is a pre-release version of Firefox for testing purposes only. It has a new awesome feature called Responsive Design View that will hopefully make it into the 'real' Firefox one day.

After you install, go to Tools -> Web Developer -> Responsive Design View. This will enable you to resize the 'internal' window to a custom size, or choose from one of the presets. The image below shows  a locally running website at 320x480:

 

 

The Responsinator

Apart from having an awesome name, The Responsinator is a website that allows you to visualise how a page will look on a given number of harware devices such as iPad, "Crappy Android landscape", etc. It's a nice tool tool to get a high-level overview at points throughout the design process but it's probably not as good as Firefox Nightly for quick testing. It also doesn't allow custom sizes, but it's still a great tool for visualisation. You can also use it with local or remote sites. The image below shows The Responsitator showing a local site (I've zoomed out the browser so you can see more devices): 

 

 

Some Other Tools

SHARE: