Keeping it real

2012-01-01T12:39:00.001-08:00

There is something intrinsically satisfying about good skeuomorphic design. It can engender a sense of solidity and reassurance in a world where the pace of change is fast; it can encourage people who wouldn't otherwise engage with technology to embrace it.

By way of an explanation, skeuomorphic design is a methodology that involves taking familiar elements from real-world objects, that were necessary to make said objects function, and applying them to new items where they are not functionally required. If you have an iPhone or iPad, you've probably noticed that the interface uses realistic-looking slider switches to turn options on or off. It's a valid design method.

But it can be overused, or used inappropriately. Take one of the latest apps from Apple: iCal on OSX Lion. Although there's a nanosecond of excitement when you first see the new interface (ooh, it looks a bit like a real calendar), the novelty wears off fast when you realise that some of the core features of the app are now harder to access. What's more, there's no point to it. How does the user benefit from the app looking a tiny bit like a leather-bound calendar? Is it supposed to evoke a sense that this is a quality product? It doesn't work. It's irritating. The interface for the old version, which was unashamedly designed as software on a computer, was better and more intuitive.

The new iCal interface doesn't even work on a visual level. Have you ever seen a real leather calendar in which little buttons are carved into the leather? No? Me neither. It's gimmicky.

Skeuomorphic design works best with a touch screen interface. Creating apps that look like analogue versions of the functionality that they provide, complete with textured surfaces and switches or buttons that appear solid, creates a warmth and affinity with the user. It's a particularly appropriate design method for apps that mimic something that was previously done by hand – for example, DJ apps with controls and decks that look real and can be manipulated by touch.

However, I think that it's a mistake to apply the same design ideology to everyday desktop applications, which are still largely controlled by mouse, trackpad or keyboard. Overloading the 'realism' where it's not needed simply creates a barrier between the user and the task that they wish to perform. In my opinion, computerised calendars are better than physical calendars in almost every way: they're more adaptable, can be easily shared, can be accessed from anywhere, and are simple to update. So why use design cues from an inferior product? Why not embrace the possibilities offered by contemporary technology?

I appreciate the desire to create convergence across platforms, so that users don't have to relearn the way that their apps work, but there are better ways of doing it than simply plonking apps designed for touch screens into a desktop environment.

Making a modern portfolio

2011-12-18T09:07:00.000-08:00

My new portfolio employs a number of popular trends. I have outlined some of them here, in case anyone else might find them useful. I should point out that I haven't done any substantial front-end coding for a number of years; however, I enjoyed putting my portfolio together. I think it's advantageous for digital designers to have a strong understanding of the visual tricks offered by CSS3. I'd like to add some HTML5 canvas and/or video elements to my site at some point.

Responsive layout using CSS media queries

I decided that I wanted a responsive layout for my portfolio, so that it looks good on a wide range of devices, from a Full HD TV to a smartphone. After a lot of consideration, I chose to provide four distinct layouts:

Mobile (single-column layout)
Small tablet (two-column layout)
Normal tablet / netbook / small browser window (three-column layout)
Laptop / desktop / TV (four-column layout)

My preference is for nice clear gutters and decent chunks of content. With this in mind, I chose to create a grid consisting of columns of 70px with gutters of 30px. This won't be suitable or flexible enough for everyone, but is fine for simple applications. I've called it the Simple Adaptive Grid System – mostly because I like the acronym SAGS…

The overall widths of the four layouts are:

Mobile: 100% (the single column is made to fill the width of the device)
Small: 570px
Tablet: 870px
Laptop: 1170px

If you try resizing a browser window containing my portfolio, you will see that the content resizes dynamically. I haven't taken this to the extent of some other people, such as the brilliant Teixidó, but it works well for my needs.

How it's done

This is achieved using CSS media queries. These are as follows:

@media screen and (min-device-width: 320px) and (max-device-width: 640px) {
/* Specific declarations for mobile devices */
}
@media screen and (min-width: 640px) and (max-width: 900px) {
/* Specific declarations for small devices */
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
/* Specific declarations for tablets and smaller browsers */
}
@media screen and (min-width: 1200px) {
/* Specific declarations for medium to large displays */
}

For the mobile media query, I used min-device-width and max-device-width to specifically target these devices. Future mobile devices, with screens of a higher resolution than even the retina display of the iPhone 4/4S, should display the two-column layout instead. Non-mobile devices will always display the two-column layout as a minimum.

I should note that the modal window device that I'm using to display large images isn't ideal for mobile devices, and in the next iteration of my portfolio I will try to address this.

+ More information about using media queries

Resizing images using CSS

One of the things that I wanted to include as part of my portfolio was a link to my Tumblr blog, which I use for photos mainly. I chose to showcase a recent photo, but wanted to resize the image to fit the layout that is being displayed. This is the CSS code that I used:

#tumblr img {
max-width: 560px;
height : auto;
width: expression(this.width < 560 ? 560: true);
}

This sets the width to a maximum of 560px (I also added a 5px frame, to take the total width of the element up to 570px, equivalent to six columns). To resize the image for other layouts, I simply changed the figure 560 and added the declaration to the media query sections. For example, to make the image smaller for the three-column layout, I did this:

@media screen and (min-width: 900px) and (max-width: 1200px) {
#tumblr img {
max-width: 260px;
height : auto;
width: expression(this.width > 260 ? 260: true);
}
}

Note: this CSS code should be instead of width/height declarations in the <img> tag.

Chiselled text

Creating chiselled text, Apple-style, is easy. Simply add a hard vertical drop-shadow to your text. It's a bit of a gimmick, or a fad, but works well with textured backgrounds to create a sense of solidity.

For dark text (creates a white highlight beneath the text):

text-shadow: 0 1px 0 #fff;

For light text (creates a dark shadow above the text):

text-shadow: 0 -1px 0 #666;

Just change the hex colours if they don't suit your design.

Persistent navigation bar

As my portfolio is all contained on a single page, that page is inevitably quite long. Therefore, I wanted to display links to the four different sections to allow easy browsing. I like semi-transparent toolbars that unobtrusively dock to one side of the viewport, so I created one which slides up from the bottom when the user scrolls the top nav out of view. I used JQuery and CSS to make this work. It was pretty simple.

I used scrollTop, which returns the number of pixels that have been scrolled from the top of the page. I chose to make my nav slide in after the user has scrolled down 260 pixels from the top, using this code:

$(window).scroll(function(){
if ($(window).scrollTop() > 260){
$('#persistentNav').slideDown('fast');
}
if ($(window).scrollTop() < 260){
$('#persistentNav').slideUp('fast');
}
});

My menu is contained within a div with the id 'persistentNav', which is hidden from display by default. There is admittedly a concern with this method, in that it jars with the semantic nature of the rest of the markup, but I think that its usefulness outweighs this.

The other problem with it is when using an iPhone (and possibly other touchscreen devices). The links stop working when one has been tapped and the user attempts to tap another straight away. It's fine when the user switches focus to the main page and scrolls a little. I can't work out how to fix this, so please let me know if you have any ideas! For the time being, I've excluded the persistent nav from mobile devices.

Icons for iPhone and iPad

Digital design is partly about creating an interface – a conduit between user and content – that is pleasurable to use. It's the little details that elevate some works of digital design from competent to engaging. One little detail that I think is beneficial for both users and content owners is to provide home screen icons for iOS users. These are simply PNGs that an iOS device will display as icons to link directly to the site in Safari.

To add these to your site, create PNGs sized at 57x57 pixels, 72x72 pixels and 114x114 pixels, and add these lines of code to your document <head>:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

If you don't want iOS to add the glossy effect to your icon, append 'precomposed' to your filename, e.g. apple-touch-icon-precomposed.png

+ More information about iOS icons

My portfolio isn't quite the finished article yet, and I'll improve it incrementally over time.