Life on Lars

Synergies between Design, Usability and SEO

larfa — Fri, 04 Jan 2013 05:16:09 +0000

It’s perhaps no big secret that usability, if done with both a coding and user-facing mindset, can provide a lot of SEO benefits. The same synergies exist between a lot of different aspects in the creation and successful execution of a website, and perhaps more so in an e-commerce setting.

It’s all about Traffic and Conversion

Whether you have a small personal blog or a large enterprise e-commerce website it typically boils down to 2 things:

Get traffic – Regardless of the website you want some traffic, the amount you want or expect might be different but everybody wants people to visit their site.
Convert traffic – Once people are on your website you typically want them do do something. You want to convert them from visitors to users, customers or subscribers. For a blog you might want them to comment on your post or share it with their friends, or perhaps subscribe to your newsletter or podcast. For an ecommerce site you’d probably want them to buy something and even better tell their friends so they buy something as well.

Whilst simplified these are the two things that is common for most sites and each can be equally difficult to achieve.

Getting traffic can be achieved through a huge number of avenues. Traditional and online marketing, social marketing, email marketing, word of mouth, viral content, paid search engine marketing and many more. Perhaps the most cost-effective, scalable and long term option is organic or natural traffic from search engines. The main factors in organic search is content and Search Engine Optimisation. However as I’m about to illustrate there are a number of other factors that have synergies with SEO, getting traffic and more importantly converting your traffic.

Converting traffic is even more varied in both what it means to different websites as well as how you go about achieving it, this is where User Experience Design comes into play along with your content, value proposition, brand, credibility among other things.

Diagram of factors that impact on Conversion

In an attempt to visualise these synergies I created this diagram to show the different aspects in play how they can overlap. Whilst not entirely correct or complete, as there are a number of additional factors that are in play, it should give an overview of things to consider.

How to add Multiple Featured Images in WordPress

larfa — Fri, 26 Aug 2011 01:59:54 +0000

The post thumbnails feature aka. Featured Image was added to WordPress back in version 2.9 and made it significantly easier for users to associate images with posts or pages. Prior to that we we had to upload an image, copy the url for the image and add that as a custom field if we wanted to do something similar, which is ok when you know how to do it yourself but less than ideal when having to explain the process to clients or other authors. The post thumbnails feature allows you to easily set a single “Featured Image” for a post or page via a separate meta box in the WordPress admin. You simply click on the “Set featured image” link, open up the image dialog, upload or select an image then click the “use as featured image” link.

This works fine for the vast majority of cases but sometimes it would be great to have have more than one image for a post. For example if you have a folio section or a product where you may want to have multiple images. I tried searching for “mulitple post thumbnails”, “multiple featured images” and so on but most of the “solutions” were mainly about looping through all post attachments and displaying these. This can work in some instances but it didn’t provide as much control as I wanted and if you happened to have other images in the post then these would also be displayed.

Eventually I came across a plugin called Multiple Post Thumbnails and decided to tweak that slightly and integrate it directly into my theme instead of using it as a separate plugin. This is how I did it.

Adding support for post thumbnails in your WordPress theme

First things first, before you start adding support for multiple post thumbnails you need to ensure you have the basic post thumbnails enabled for your theme. Check your functions.php file and make sure the following line is present, if not add it in.

 add_theme_support( 'post-thumbnails' );

You can also define additional sizes for your post thumbnails.

// Add Custom image sizes
// Note: 'true' enables hard cropping so each image is exactly those dimensions and automatically cropped
add_image_size( 'feature-image', 960, 500, true ); 
add_image_size( 'medium-thumb', 300, 156, true );
add_image_size( 'small-thumb', 75, 75, true );

Adding the files and support for multiple post thumbnails to your theme

Download the files for the Multiple Post Thumbnails Plugin to your computer
Unzip the files and copy them to a sub-directory in your theme file. There are only two files you will need multi-post-thumbnails.php and multi-post-thumbnails-admin.js. In my case i’ve placed the PHP file in a library sub-directory in my theme and the JavaScript file in a sub-directory called js inside library.
```
> theme-name
   > library
     - multi-post-thumbnails.php
     > js
       - multi-post-thumbnails-admin.js
```

Once that’s done you need to make a small tweak to the multi-post-thumbnails.php file.
From this (line 143)

public function enqueue_admin_scripts() {
    wp_enqueue_script("featured-image-custom", plugins_url(basename(dirname(__FILE__)) . '/js/multi-post-thumbnails-admin.js'), array('jquery'));
}

To this

public function enqueue_admin_scripts() {
    $template_url = get_bloginfo('template_url') . '/js/multi-post-thumbnails-admin.js';
    wp_enqueue_script("featured-image-custom",  $template_url, array('jquery'));
}

Then go back to your functions.php file and add the following.
```
// Load external file to add support for MultiPostThumbnails. Allows you to set more than one "feature image" per post.
require_once('library/multi-post-thumbnails.php');
```
It’s usually a good idea to keep these inclusions at the beginning of your functions.php file so they are included before you try to use any of the functions they add.

You then need to define some additional post thumbnails and specify which post types they should apply to. The default would be ‘post’ but in my case I had created a custom post type called folio where I’d added 4 extra post thumbnails for a total of up to 5 featured image for each folio item. To do this add the following in functions.php just after the add_image_size entries mentioned above.

	// Define additional "post thumbnails". Relies on MultiPostThumbnails to work
	if (class_exists('MultiPostThumbnails')) {
		new MultiPostThumbnails(array(
			'label' => '2nd Feature Image',
			'id' => 'feature-image-2',
			'post_type' => 'folio'
			)
		);
		new MultiPostThumbnails(array(
			'label' => '3rd Feature Image',
			'id' => 'feature-image-3',
			'post_type' => 'folio'
			)
		);
		new MultiPostThumbnails(array(
			'label' => '4th Feature Image',
			'id' => 'feature-image-4',
			'post_type' => 'folio'
			)
		);
		new MultiPostThumbnails(array(
			'label' => '5th Feature Image',
			'id' => 'feature-image-5',
			'post_type' => 'folio'
			)
		);		
	
	};

That’s it, you’ve now added support for mulitple post thumbnails for your post or custom post type and you should see several “Featured Images” boxes in your admin screen. This is what mine looked like.

Displaying the post thumbnails in your WordPress posts

So now you’ve (hopefully) got the admin part working and are able to add multiple post thumbnails to your posts, but you also need to output these in your post or page template. Continuing on my folio concept I wanted to output these images to use in a JavaScript slider. I happened to be using the Nivo Slider at the time but it doesn’t really matter what you use, you’ll just need to tweak the HTML output to match what your slider expects.

This is where the added control of the featured images comes in handy over just scanning through attachments, you might find it easier just to upload a bunch of images and let WordPress use all of the attachments but I needed control over the order and also wanted the freedom to add more images into the description of a folio item without having to worry about it ending up in the slider.

Here’s the PHP code. I’ll try to explain a bit more how it works. The listing is done in two steps. First we show the standard featured image, we then loop through and display all the extra featured images. Because I wanted to use the Nivo slider thumbnail view I had to include a REL attribute with the url for the thumbnail version of the image. After a lot of searching I finally figured that I could add an array of attributes when calling the_post_thumbnail() and this also worked for wp_get_attachment_image() which I ended up having to use instead of the standard MultiPostThumbnails::the_post_thumbnail().

	         
    ID );  
            $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb');  								
            $attr = array(
                'class'	=> "folio-sample",									
                'rel' => $image_thumb_url[0], // REL attribute is used to show thumbnails in the Nivo slider, can be skipped if you don't want thumbs or using other slider
            );
            the_post_thumbnail ('feature-image', $attr);											
        }
        if (class_exists('MultiPostThumbnails')) {								
        // Loops through each feature image and grabs thumbnail URL
        $i=1;
            while ($i<=5) {
                $image_name = 'feature-image-'.$i;  // sets image name as feature-image-1, feature-image-2 etc.
                if (MultiPostThumbnails::has_post_thumbnail('folio', $image_name)) { 
                    $image_id = MultiPostThumbnails::get_post_thumbnail_id( 'folio', $image_name, $post->ID );  // use the MultiPostThumbnails to get the image ID
                    $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb');  // define thumb src based on image ID
                    $image_feature_url = wp_get_attachment_image_src( $image_id,'feature-image' ); // define full size src based on image ID
                    $attr = array(
                        'class'	=> "folio-sample",      // set custom class
                        'rel' => $image_thumb_url[0],   // sets the url for the image thumbnails size
                        'src' => $image_feature_url[0], // sets the url for the full image size 
                    );																						
                    // Use wp_get_attachment_image instead of standard MultiPostThumbnails to be able to tweak attributes
                    $image = wp_get_attachment_image( $image_id, 'feature-image', false, $attr );                     
                    echo $image;
                }							
                $i++;
            }                            
        
        }; // end if MultiPostThumbnails 
     ?>

Now all of this can be done a lot easier just using the standard call from the plugin e.g.

if (class_exists('MultiPostThumbnails') {
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-2')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-2'); 
    }
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-3')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-3'); 
    }
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-3')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-3'); 
    }
}

However because I needed the extra control over the output of attributes I ended up having to do it a bit more complex. If you’re planning on using the featured images in a slider that requires specific classes, attributes or HTML structure then you may need to go down the same route I’ve done. Hopefully with the code above most of the hard work will be done for you already.

Final words

Well there you have it, if everything went well you should have a working post with multiple post thumbnails and a more elegant way of adding multiple feature images to your posts. If you’re doing work for clients I think this approach will be a bit more user friendly than trying to explain attachments or pasting in URLs into custom fields. The cool thing is that you can set featured images for completely different uses on the same post as well. They don’t need to be called feature images. If you’re doing a real estate web site you could have some images defined as interior, some for exterior and a separate one for floorplan which will give you the control needed to output the right images where needed. It also guides the authors to what they need to add.

Until WordPress 3.3 comes out and hopefully Plupload is integrated into the dashboard this is a pretty decent solution, at least compared to anything else I’ve seen so far.

Getting Started with Mobile App Design

larfa — Tue, 23 Aug 2011 16:10:29 +0000

If you’re a UX, UI or Web Designer it can perhaps be a bit daunting at first to jump into the relatively new field of Mobile App Design, but don’t worry almsost all of your design, UX and UI skills are still very relevant. There are just a few new rules and tools to get your head around, or perhaps just a slightly different way of using tools that you’re already familiar with. At the time of writing I’m also still quite new to this game and this article is aimed at helping you get a bit of a start and an overview of the tools available. Whilst this article will focus mostly on getting started with App Design for iOS but general guidelines apply to all types of mobile devices.

1. Getting familiar with the technology – Books and initial reading material

There’s a huge amount of reading material available on Mobile App design and development. If you’re planning on designing an iOS app (iPhone, iPad or iPod Touch) then you’re in luck. Apple has released several free books on designing and developing for iOS on the Apple Bookstore as well as an online developer library to get you started at no cost.

iOS Human Interface Guidelines also available as PDF (for some reason I was unable to find this book in the bookstore, might just be missing from the Australian store)
iOS Technology Overview
Object Oriented Programming With Objective-C
iOS Application Programming Guide
Cocoa Fundamentals Guide
The Objective-C Programming Language

Unless you’re a developer the first 2 books are probably what you’ll want to stick to. All of the books (apart from the first one) can be found on the Apple Bookstore, just search for the book names and download them for free to your iPhone, iPad or iPod Touch.

Moving from Clicks to Touch Gestures

One of the key differences to come to grips with when coming from a web or desktop design is how people on touch screen devices interact with the devices. Instead of clicks you have taps and gestures. Some things are no longer available like the hover state, other gestures are completely new. Tapping also requires consideration for minimum target size of icons buttons etc. as it can be harder to hit a small target with a finger compared to using the mouse pointer. Apple recommends minimum 44×44 pts for tapping. Form interactions are also somewhat different and you have the abillity to display a context aware keyboard to make input easier, e.g. show @, .com and remove spacebar when entering email addresses.

Touch Gesture Guide (PDF)

Be inspired by the best

Books and theory are one thing but nothing beats the hands on experience of using beautifully designed apps. If you plan on developing an iPhone or an iPad app and you don’t have an iPhone or iPad then I strongly suggest you buy or borrow one as soon as possible, you’ll need this both to get a feel for and be inspired by other apps as well as for testing later on, even if it’s just a static or interactive prototype/mock-up.

Play around with and analyse the apps that you already love and top rated apps in the category you’re targetting. Identify visual elements and functionality that you really like. Download and test apps that have similar functionality to what you’re planning, see what they’re doing right and what they’re doing wrong. Find things that you can improve upon and note down which elements you want to incorporate into your own app. You might not be able to replicate the style or interaction of the best apps yet but it’s good to have a vision or goal to strive towards. Hopefully this will take you a step further to understanding what makes a good app tick and give you ideas and inspiration for your own app.

2. Mobile UI Prototyping Tools

Once you’re familiar with the technology, its constraints and strengths it’s time to familiarise yourself with the standard UI elements. If you’re designing for an iPhone then there will be certain hardware limitations and a set resolution that will limit what you can do as an Interface Designer but at least you can be fairly certain that the User Experience will be fairly consistent across the board. If you’re coming from web design then the device limitations, pre-defined UI elements and controlled environment can actually feel somewhat liberating. You now have a narrower set of variables to consider when designing the UI and you have more control over the end User Experience instead of having to try to design for a myriad of different resolutions, browsers and platforms.

Printable sketch paper for iPhone, iPad and Mobile UIs

Once you’ve got a concept or an idea for a Mobile App it can be a good idea to start sketching out some rough ideas with a pencil on paper. To help you get started there are several wireframing and sketching templates available that provide a great starting point. Before or during early sketching it’s usually a good idea to list all the visual elements your app might require then consider which elements are more important and start building a visual hierarchy. With a few rough sketches you’ll discover what you can fit on each screen and perhaps reconsider what elements are important and start trimming the fat off. As mentioned earlier if you’re from a design background the design and UX process really isn’t that different from what you’re used to, you’re just dealing with a different set of limitations which will in turn have an impact on UI and UX priorities and hierarchy.

BONUS: iPhone Stencil Kit with one of these I’m sure we’ll be the envy of our peers

GUI Kits for iPhone and iPad

Once you’re past a few iterations of the initial sketching phase it’s time to create some more polished UI mock-ups. Luckily there are loads of templates available that contain pretty much all the standard UI elements in iOS, Andriod or pretty much any other platform you’re looking at designing for. When you’re first getting started it’s probably best to stick to the established and standard UI elements rather than trying to radically reinvent the wheel. Good UX isn’t about being different it’s about making the unfamiliar seem familiar. When you’ve done a few apps and have come to grips with the basics then it’s time to consider experimenting and innovating. As they say; you should learn the rules before you break them.

GUI Kits for Andriod

Additional Prototyping Tools for Mobile Apps

InVision – UX Prototyping and Wireframing

InVision is a UX Prototyping Tool that allows you to create interactive mock-ups or wireframes by adding clickable areas to mock-ups you’ve created. Somewhat reminiscent of old HTML image maps, but a lot more sophisticated, it can enable you to create faux interaction using a series of static screen mock-ups either as rough wireframes or as high-quality mock-ups and easily share or present to stakeholders. You can import JPEG, PNG or GIF files so you can create your design mock-ups in Fireworks, PSD, Illustrator or pretty much whatever you want as long as you can output it as one of those formats. InVision works for all types of prototyping not just mobile apps, to test on mobile apps you just need to create your mock-ups in the right size and share the link with your stakeholders.

InVision isn’t free however, you’ll have to pay a monthly subscription ranging between $8-199 depending on the plan and number of active projects you need, but if you’re working in a company with multiple designers and need to collaborate with multiple stakeholders and/or clients then the time saved will more than cover the costs.

MockApp – iPhone App Design for the rest of us

MockApp allows you to quickly create iPhone App mock-ups in either Keynote or PowerPoint, even though it’s targeted more at non-designers it could be useful for professionals as well, in particular if you still need to present your mock-ups in PowerPoint or Keynote. It doesn’t allow for interactive prototyping but it can allow you to quickly and easily create some pretty polished looking mock-ups to present to stakeholders.

MockApp is also free, more or less, all you need to do is let the world know that you appreciate MockApp on Twitter, your blog, Facebook or some other means at your disposal.

iPhone Prototype Firefox Plugin

A simple GUI prototyping tool for creating iPhone mock-ups, available for free as a Firefox Plugin.

Pencil Project – Open Source GUI Prototyping Tool

The Pencil Project, available either as a Firefox plugin or as a standalone desktop application (Windows and Linux only for now, Mac support coming soon), is extremely versatile and can be a lightweight alternative to Visio, allow you to create quick interface mock-ups, web layouts and much more.

It’s open source and completely free, highly recommended.

Prototyping for the Apple iPhone using Fireworks

This article covers in a fair bit of detail how to quickly prototype iPhone applications using Fireworks with some jQuery and PHP to provide you with an interactive prototype that you can test no your iPhone. It’s a slightly different approach but it does seem to work and gives a surprisingly good User Experience for testing elements and functionality of an app very early on.

Balsamiq Mockups – Rapid Wireframing Tool

Balsamiq Mockups allows you to quickly create low-fidelity wireframes with a sketchy look and feel. It comes with a wide array of pre-defined UI elements and icons and allows you to create semi-interative prototypes with click-throughs. Balsamiq Mockups can be used for prototyping iPhone and other mobile apps but works just as well for desktop or web apps.

Balsamiq Mockups runs on Windows, Mac, and Linux via Adobe Air and is also available as a plugin for JIRA, Confluence, FogBugz and XWiki. It is available as a seven day free trial, a full version costs $79.

4. Native Mobile Apps vs. HTML5

The question of developing native apps versus HTML5 web apps is a whole other topic, I’ll try to summarise the basics here.

Native apps are usually faster and much more responsive. Unless they are really poorly designed and coded.
Native apps require that you develop apps for each individual platform or device which will significantly increase costs and require additional specialised development knowledge for each device.
Are you providing this as a free service or do you plan to sell your app for profit? If you’re planning on selling the app then you’ll need to go down the native app route but if it’s a free service or mainly aimed at conveying information then it’s worth considering whether it’s easier just to go with an HTML5 mobile web app instead.

Before choosing to go down the native app route consider the purpose of the application, the target audience and the costs involved for each platform/device. It might be that 90% of your mobile users are on iOS devices so you choose to develop a native iOS app and then provide a mobile website of HTML5 based mobile app for other devices rather than multiple native apps. Later down the track Andriod usage might increase enough for you to be able to justify developing a native Andriod app.

If you have the budget native apps is usually the best way to go though, but HTML5 apps are becoming faster and slicker and are usually a lot more cost effective to maintain, but are still significantly behind native apps in terms of speed, responsiveness and interaction.

Final Thoughts

I hope this has given you a good starting point for diving into mobile app design. I’m new to this myself and it can seem quite overwhelming at first until you realise that it’s not all that different from what you’ve been doing already. It’s an exciting area that’s growing at an incredible rate and staying on top of every new development is nearly impossible but I belive that a strong UX background and theory is much more important than knowing the latest trends in button design. General UX design principles are fairly device agnostic and there is still a place for both UX, UI and Usability knowledge when it comes to mobile, perhaps more so than in other more established areas.

Responsive Web Design – Adaptive Layouts with Media Queries

larfa — Sat, 13 Aug 2011 09:46:58 +0000

Responsive Web design is an approach to design and devlopment aimed at creating designs that respond to the behaviour and environment of a user based on platform, screen size and orientation. This typically involves using a combination of flexible layouts, images and grid as well as a bit of clever use of CSS media queries to adapt the design depending on screen resolution.

Keeping up with the Mobile Revolution

Over the last few years the Internet has rapidly moved beyond the realm of PCs and laptops into a plethora of mobile devices with a wide range of screen sizes and capabilities. The huge popularity of all the new mobile devices, tablets and touch screen devices has forced a paradigm shift in web and UX design. This is both an exciting and challenging time to be a designer.

Mobile can extend the cababilities of your application and forces you to shift your focus on what’s really important

GPS (location aware),
Camera (augmented reality or image input),
touch-screens and multi-touch controls

Mobile Limitations

Compared to laptop or desktop computers mobile devices typically “suffer” from the following limitations.

Smaller screen size
Lower bandwidth
Less powerful processing power

These limitations are however slowly but surely eroding as tablets and newer mobile devices are getting increasingly more powerful.

Responsive Web Design Techiques

Fluid Layouts: Responsive design relies on Fluid Layouts or Non-Fixed Layouts. Whilst these can be harder to work with if you consider the alternative of either completely separate layouts for different resolutions or having layouts that don’t work all on some resolutions it’s a relatively small price to pay.
Media Queries: Repsonsive design uses CSS Media Queries to load overriding CSS rules depending on resolution. This allows you to add additional styling to compensate for chokeholds at lower resolutions that the fluid designs aren’t fully capable of dealing with.
Scalable Images: Rather than using fixed sizes for images repsonsive design uses percentage widths for images and allows the browser to resize the images based on the fluid width of the container elements. Note: browser scaling of images does not change the file size of the image so you are stuck with the size of the full image.
Showing or Hiding Content: Sometimes it’s better to just get rid of some content for lower resolutions. Consider whether all that supplemental meta data or fancy icons are really vital for the users, if not it might be better just hide that content at lower resolutions.
Hiding and Revealing Portions of Images & Using Sliding Composite Images: Anothre popular technique in responsive design is to dynamically crop or hide parts of images depending on the size of the container. This is usually achieved by setting a width or min-width on the container containing the image and hiding the overflow so that parts of the image is cropped when the browser window is smaller. Another way of doing this is to divide images into different regions, one part with the core visual information and the rest with supplemental information, this ensures that only the supplemental information is hidden.

Why use Responsive Web Design?

The prospect of being able to create adaptive layouts that look awesome on pretty much any device is very attractive to designers. CSS Media Queries allows you to do cool things like change from a 3 column layout to a 2 column layout depending on screen resolution, or even to a single column layout for even lower resolutions. Scaling down images or even removing some content completely allows your designs to not only look good but remain functional on multiple devices with a relatively small amount of extra effort.

When it comes to development this can greatly speed things up compared to building multiple completely different designs aimed at different devices. You can (potentially) streamline your development for a faster and easier deployment and reduced time to market.

Additional Reading

Limitations of Responsive Web Design

Repsonsive Web Design is very good at addressing design considerations and adapting for different screen sizes, however it does not always address bandwidth and performance limitations of mobile devices.

Speed and Size

Speed and file size is paramount on mobile devices. This isn’t true in all cases but it’s still a key consideration when specifically targeting mobile devices. If you’re using an iPad over Wi-Fi you’re probably less concerned about shaving a few KBs off your download.

CSS media queries do not optimise or remove unnecessary HTML or JavaScript that can slow down mobile browsers
Letting the browser scale down large images does not reduce the bandwidth.
Performance issues with heavy JavaScript usage and animations

Risk of Ignoring the mobile context

Mobile specific websites have a purpose (usually anyway) typically involving a quick and efficient way of conveying a subset of information. If all you do is scale down your full website to fit a lower resolution you’re probably not meeting all of the expectations of your target audience.

Overcoming the limitations

Some if not most of these issues can be overcome with the correct approach though. One way is to design for mobile frist, keeping it lean and minimal, then scale it up for higher resoluitions. This allows you to ensure that your mobile experience ticks the right boxes.

Responsive design does not have to be the only tool in your toolbox when it comes to moile development. There are JavaScript libraries aimed specifically at mobile app development like jQTouch and Sencha Touch that help bridge the gap.

Additional Reading

Final Words

Responsive web design is still new and exciting and still finding it’s place. Responsive design is particular attractive for for tablets and newer mobile devices where bandwidth and speed is starting to equal or even surpass that of older laptops, especially for the substantianl amount of users that use tablets over Wi-Fi. Being able to adapt your layouts for landscape or portait on touch devices is a nice little feature. Whilst most websites, that are fairly well coded, will work well on tablets without the use of responsive techniques however it’s those small extra touches that makes a site a joy to use on a mobile or touch screen device.

Context is vital though, and every project is different. Consider the whether responsive design and media queries is suitable for the aim of the project, the target audience and intended use. There’s still a need for the dedicated mobile websites, they are fast and very low bandwidth and usually serve specific purposes and have clear benefits for that purpose. Personally I don’t think it’s something that’s mutually exclusive either, you could use responsive and fluid techniques to cater for the desktop and tablet market as well as most modern phones then offer a mobile specific site aimed at older devices with the option for users to engage with the “full” site you can get the best of both worlds.

Ten things you should know about CSS (that I wish I knew when I started)

larfa — Tue, 26 Jul 2011 02:39:45 +0000

Over the years I’ve had quite a few eureka moments when it comes to CSS, when pieces fall into place and I realise a much better way of doing things. It’s both extremely satisfying but also somewhat annyoing since having that knowledge earlier could have saved me hours and hours of frustration and effort.

1. Understanding specificity, inheritance and cascading

Having a clear understanding of which styles will apply in which context will save you a lot of time and headache. I can’t tell you how many times I’ve scratched my head trying to figure out why a style wasn’t being applied correctly to an element despite the fact that it was clearly in the stylesheet.

Specificity

Specificity determines which CSS rule is applied by the browser, depending on where a selector fits in specificity hierarchy it will either be ignored or override an less specific selector. When a rule isn’t being applied by the browser but you think it should then usually specificity is to blame (altough there is the occasional doh moment where you edit or preview the wrong file). Using Firebug or Chrome Code inspector can help you identify whether a style is picked up by the browser and which styles may be overriding it.

Inheritance

When you define styles on an element then these styles will typically be inherited by any elements contained within that element. So if you for example set the “font-family:Helvetica,Arial,sans-serif” on the body tag then everything on the page will inherit and use that font unless you override that with a more specific rule. Not all properties are inherited by default, but you can force inheritance by adding a property-value pair with the inherit value.

Cascading or “The Cascade”

The idea of a “cascade” is at core of CSS (Cascading Style Sheets). The Cascade ties in with Specificity and Inheritance and adds the source order into the mix to determine what rules are applied to what elements. So not only does specificity of selectors matter but also the order of the selectors and even the order the style sheets are included when using multiple stylesheets. When it comes to source order the last one to the party gets the last word.

Additional reading

CSS Specificity Wars. Great article explaining Specificity using Star Wars characters and analogies.
Smashing Magazine: CSS Specificity – Things You Should Know
Smashing Magazine: CSS Specificity and inheritance
NetTuts: Quick Tip Understanding CSS Specificity
W3 CSS3 Cascade

2. Understanding of how use CSS with the DOM (Document Object Model)

I still remember the eureka moment I had when I first came to the realisation that I didn’t have to apply a class to every single element I wanted to style. It was during a practical test in a job interview when I was forced to style a page based on a PSD mock-up, but I wasn’t allowed to touch any of the existing HTML. For the first time I had to re-think my approach, instead of my then bad habits of slapping a class on pretty much every element, and look at the structure of the HTML document. The hierachy of and structure of the document, what existing ids or classes could I use and how were the elements inside those structured. After the excercise I felt like my eyes had just been opened and I finally understood much more about what CSS was all about.

Instead of creating CSS completely reliant on classes or IDs you can free yourself up to a handful of “hooks” on container elements.

For example instead using specific classes for everything

.header .heading {}
.content .heading {}
.content .bluetext {}

You could use a single class as starting point then refer to all elements of a specific type within that container e.g. specify that all “h1″, “h2″, “p” or “div” inside a container should be styled differently. If you add a class to the body of the page or the main wrapper/container to uniquely idenity the page you can also use that to create different styles for individual pages just by adding a single class.

.header h1 {}
.container h1 {}
.content div p {}
body.aboutpage h1 {}

3. Understanding the box model, margins and padding

One of the first things you should come to grips with when starting out with HTML and CSS is the box model.

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

The main components of the box model are:

Height
Width
Position
Margin
Border
Padding

The slightly tricky bit to come to grips with for beginners is the dimensions for a block element in the box model. When you define the width as 200px then you’d expect that this would be the width. This is true, however if you have a 1px border around the block element then you have to add 1px + 1px, then if you have 10px padding you have to add another 10px + 10px so the total width would be 222px.

Almost everything you do in CSS and HTML will in one way or another be directly or indirectly impacted by the box model so I highly recommend taking some time to read up and understand it properly. It’ll save you a lot of trouble down the road.

Additional Reading

The CSS Box Model
W3 Box model
Box model for beginners
Sitepoint: Box Model reference

4. Using CSS floats

Float is a CSS position property and has been a common way of creating CSS layouts since the move away from table based layouts sometime back in the last millenium. It’s a powerful but very unintuitive way of doing this that can be hard to get your head around. The concept is similar to that of print layout where you have images set into the page with text wrapping around, but with CSS and HTML there are a lot more uses for it and quite a few pitfalls to look out for.

You can float elements left or right (or set it to float: none;)
When floating an element it will automatically be considered a block element
Floated elements will float to the edge or the container elemnt they are in
Floating elements does not trigger hasLayout, this can cause unwanted layout issues with floated elements overflowing their containers
Defining a width or height and setting overflow:hidden or overflow:auto on a container element can overcome the hasLayout and overflow issue
To center floated elements use margin: 0 auto;
If there is room in the container all floated elements will try to fit side by side on the same “row” unless you “clear” the floats
Use clear:left, clear:right; or clear:both; to force a floated element to appear on the next “row”

These are just some of the things to keep in mind when using floats, don’t worry after a few tries and probably a few more errors you’ll get the hang of it.

Additional Reading

All about floats
Smashing Magazine: Float Theory, things you should know
A List Apart: CSS Floats 101
Clearing Floats
CSS Float Clearfix

5. Display:inline-block

I’ll be honest I’m starting to really love using inline-block over floats for layouts. Sure there are a few issues with it but the workarounds aren’t that bad and in comparison to using floats for everything it feels so much more elegant.

Benefits

Easy to center elements both horizontally and vertically. I cannot stress how much easier this can make your life for certain types of layouts
You can vertically align blocks top or bottom. Awesome when using blocks with variable content size
No overflow issues. Elements containing inline-block elements will trigger hasLayout without any problems.
Possible to use margins, border, padding and all other block element rules.

Downsides

Not supported in IE7 or below. However there is a relatively easy work around of IE7 and a similar but less effective workaround for IE6.
Inline-block elements honor whitespace. Typically this isn’t a problem but if you want multiple block elements to be side by side you may end up with a 4px spacing between them. You can either use negative margins or remove the whitespace in your HTML code

Additional reading

Sitepoint: Give Floats the Flick in CSS Layouts
Ternstyle: Float vs. Inline-Block
Cross Browser Inline-Block
IE7/Win inline-block and hasLayout

6. The value of keeping your CSS properly formatted and well structured

One often overlooked aspect of CSS is code formatting and naming standards. Just like with PHP or Java having a set of code standars for CSS can help with maintenance, debugging or just make it easier come up with useful names for selectors. When collaborating with other people on CSS, the need for a common standard for naming and structuring your CSS becomes even more apparent.

To be honest it’s not really that important what coding standard you choose. Whether it’s one that your company prefers, just personal preference or a standard you find online. The important thing is that there is a a standard and that people that are contributing CSS are aware of it. Even if you’re the only one writing CSS, if you write and structure your code in a consistent manner it will help you in the long run when to comes to maintaining old code or re-using some CSS from one site to another.

Additional reading

ProCSSor is an advanced CSS Prettifier that lets you format CSS in the exact way you want
WordPress CSS Coding Standards

7. Go beyond the standard class and ID selectors

Most of us are familiar with the standard .class and #id selectors in CSS and of course the plain tag selector but it doesn’t end there. There are :pseudoClasses, descendant selectors, adjacent selectors (x + y), selectors for direct children (x > y), attributes selectors y[attribute] and many many more. Learning a few more (or all of these) will open up for a lot more ways targeting specific areas with CSS rules without having to add additional classes to the HTML.

Additional reading

NetTuts: 30 CSS selectors you must memorize

8. Using CSS shorthand

CSS supports several different ways or writing the same rules, by using

The most common CSS short codes are:

background: colour url(….) no-repeat top left; e.g. background:#ccc;
font: font-style font-variant font-weight font-size/line-height font-family; e.g. font: normal 0.8em/1.5em verdana, helvetica, sans-serif;
border: 1px solid #ccc;
padding: top right bottom left; e.g. padding:5px 10px 0 10px; or just padding: 5px; = padding: 5px 5px 5px 5px;
margin: top right bottom left; e.g. margin: 10px 0 5px 0; or just margin: 10px = margin: 10px 10px 10px 10px;

Personally I don’t use the font one that often as it’s a lot stricter than others and harder to read and I don’t often have to declare all the values for fonts. When do use the font short hand it’s usually on the body or main font style for the site and then everything else after that is overriding that with more specific rules for font-family, font-size, font-weight etc.

When overriding specificity more often than not you end up using more individual rules e.g.

border-top:none;
font-weight:normal
padding-left: 0;
background-color:#eee;
and so on…

Additional Reading

WordPress CSS shorthand

9. Stacking classes

A HTML element is not restricted to having a single class or ID. You can apply multiple classes to the same HTML element but you can also define multiple selectors for the same CSS rule. Obviously this is a very simplified example but the general idea is that you if you can define a generic class or ID for a type of element and add an extra class for more specific instances of that type that needs to be styled differently. Instead of repeating all the property-value pairs for each rule your element will inherit the styles from the generic class and then add to or override it with the more specific class.

.container {
    display:inline-block;
    margin-right:10px;
    padding:10px;
    vertical-align:top;
    width:400px;
}
.container.wide {
    width:960px;
    margin:0;
}

Note there is no space between the two class names in the example above. This means that it applies only to elements that have both the container and wide classes applied but it will still inherit all the styling from .container so there’s no need to repeat those property-value pairs. E.g.


  content

Additional Reading

Multiple Class and ID selectors

10. Using some kind of CSS reset

The aim of using a CSS reset is to limit or reduce inconsistencies across browsers when it comes to things like default margins, font sizes of headings, line heights etc. Whilst the need for CSS resets is diminishing with modern browsers it’s still handy to include if your site needs to comply to older browsers.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

As important as it is to note which elements are included in the most popular CSS reset available today. It’s also important to note some of the elements that are deliberately excluded from this list:

input
button
hr

These elements were excluded because their cross-browser differences are so vast that you would have to completely unstyle them to create a “bulletproof” element. They’re so weird, that even then, there’s no guarantee.

Additional reading

CSS Reset Reloaded by Eric Meyer
HTML5 Boilerplate is a great starting point for new HTML5 projects. It includes a CSS reset based on the latest reset by Eric Meyer.

Bonus: IE6 must die

Internet Explorer is the bane of Web Designers across the world, hell even Microsoft wants it gone.

The Triton rendering engine (Internet Explorer) has a nifty little feature that allows you to use IE specific HTML to target specific versions of the browser and then load a special style sheet just to deal with those issues.

quicktag in WordPress allows you to limit the content shown from a post on your home page, archives or search page. By default the anchor text for more links will just say "read more" which is not great for internal linking. A better solution is to make the anchor text more descriptive and include the post title it’s linking to. This will is not only good for your internal site SEO but can is also a stronger call to action for your readers.

Customising WP "more links" with plugins

If you’re using Headspace2 or you can go to Settings > Headspace then select Page Modules and drag and drop the more text module into the page module. This will add an option to specify the more text on a post by post basis. Personally I prefer to just use the post title but if you really like to tailor more links on a granular level then Headspace2 will make it easy for you to do so.

Customising WP "more links" by editing theme files

If you want to insert something similar in your own theme open up the index.php file, locate where your the_content() is being called and replace is with the following code. This will set the more text to …continue reading “post title” adding quotes around the post title as well as wrapping it in a tag. It also adds a span around the anchor text with a title attribute listing the title again.

...continue reading "' . get_the_title('', '', false) . '"' ); ?>

Or alternatively you can use something a bit simpler like:

If your design does not easily accomodate long anchor text or you don’t want to display the long anchor text for practical or aesthetic reasons then I suggest you at least include a title attribute on the more link. This won’t be as effective for SEO purposes but it’s better than nothing and it will assist your users.

read the full article'); ?>

Customising WordPress "more links in Thematic

If you’re using Thematic just add the following code to your functions.php file. This will add a span around your more link with a class to allow you to style it differently with CSS. It also adds a title attribute to the span with the name of the post it’s linking to and includes the post name in the anchor text with the prefix …comintiue reading “post name”.

function childtheme_more_text($content) { $content = '...continue reading "' . get_the_title('', '', false) . '"'; return $content; } add_filter('more_text', 'childtheme_more_text');

Bonus Tip: Install the Google XML Sitemaps Plugin

The Google XML Sitemaps plugin automatically creates special XML sitemap and submits it to Google, Bing, Yahoo and Ask.com. Using an XML sitemap is a great way to ensure that the search engine robots will find and index all of your pages. It’s great to ensure new sites are quickly indexed and equally useful for blogs with frequent updates to ensure that new pages and posts are indexed. Using an XML Sitemap does not guarantee that your pages are included in search engines, but it does provide helpful hints for web crawlers to do a better job of crawling your site which is particularly useful if your site structure and internal linking is a bit shoddy. The plugin uses Sitemap Protocol 0.9 defined by sitemaps.org. It’s an open standard with support from the likes of Google, Yahoo and Microsoft.

Summary

That’s it for now, the optimisation areas covered will improve your general on-page SEO for WordPress and hopefully give you a bit of a boost in rankings. In the next article I’ll be covering Canonical URLs and how to avoid duplicate content, how to format your posts using semantic HTML, tips for cleaning up your code and more.

6 Things to look forward to in XBMC Media Center 10.05

larfa — Wed, 21 Apr 2010 08:15:06 +0000

The latest release of XBMC (9.11 Camelot) was a major milestone for the media centre with regards to both stability and usability. The release stabilised and improved a lot of the core features, vastly improved the skinning engine and came with a completely new and much improved default look and feel.

What most existing users will notice is the new skin, “Confluence”; the skin takes advantage of the new features in the skinning engine and has given XBMC a much needed facelift. XMBC now not only works better but also looks better from a standard installation. Installing a new skin is also easier than before as most skins are now much more complete and stable on the released version. Before this release a lot of the best looking skins took advantage of changes to the skinning engine that was not available in the previous major release. This meant that users had to download and install various different versions of XBMC from SVN repositories depending on which skin you wanted to use which could be both daunting and a lot of effort even for tech savvy users.

Some of the features of the XBMC 9.11 Camelot release were:

New default skin “Confluence”

Significant improvements to the skinning framework

Improved support for multiple monitors

Database performance improvements (SQLite)

Added ability to scrape and scan TV Shows into the video library by air-date via TheTVDB.com

Support for High Definition, Surround Sound, and Subtitle Flagging and Filtering in Video Library

Support for more file extensions and speed improvements to RAW image loading

As well as several playback, library and scraper improvements…

See the full XBMC 9.11 Release notes

The XBMC 9.11 release took a major step towards making XBMC more accessible to average users and not just geeks and dedicated enthusiasts.

The next level – XBMC 10.05

While the dust from the XBMC 9.11 Camelot release is still settling the next major release is already well under way. The upcoming release 10.05 boasts several potentially game changing features that could completely change the way a lot of people use XBMC and make it an even more complete media centre software solution.

Here are some of the great features to look forward to in the XBMC 10.05 release scheduled for a mid-May release.

Unified PVR-frontend

Probably one of the most requested features for XBMC is PVR support. Started over two years ago the feature has been on many an XBMC users wishlist for some time now.

What does PVR mean? PVR is short for Personal Video Recorder, basically it will allow you to use XBMC as an interface for a number of different PVR applications and seamlessly integrate recording and playback functionality with the rest of your media. XBMC will provide the interface whilst the PVR software runs in the background or even across a local network.

What does this mean for you? If you have a TV tuner card it will allow you to have full control of live TV, record TV shows, access electronic program guides and teletext all from within XBMC, no longer will you have to switch between different modes, programs or interfaces to be able to enjoy both TV and stored media. TV is going to be sexier than ever and you can scrap that TiVo or at least hold off on buying one till you’ve tried XBMC.

PVR Support is planned for:

HTS Tvheadend

VDR (Streamdev)

MythTV

MediaPortal TVserver

New add-ons browser GUI and API

Up until now using add-ons and plug-ins with XBMC has been quite a tedious and often too technical for the average user. The new user interface will allow users to browse, find, install and manage third-party add-ons from within the XBMC interface. This is a major step for XMBC towards more mainstream use and a huge improvement in general usability.

In-development preview of XBMC Plugin Manager

The new add-ons API will allow add-ons to be written in any programming language paving the way for the creation of even more add-ons which can only be a good thing.

Additional improvements to the GUI and Skining Framework

The 9.11 release brought the skinning framework a huge leap forward, the improvements in 10.05 aren’t as comprehensive but will nevertheless please quite a few. For users this primarily involves improved mouse support and control support for sliders and scroll bars as well as click handling to support long or short clicks.

Scraper improvements

The automatic scraping and collecting of meta-data for your media library was one of the things that impressed me most about XMBC when I first started using it. The next release will improve upon this even further.

Support for scraping movie trailers from both IMBb and TheMovieDB.org.

Certain skins for XBMC have support for displaying movie trailers in addition to the synopsis and movie information. Previously trailers had to be added manually to the relevant directory in your media archive or through the use of add-ons. This new feature will no doubt save considerable time collecting movie trailers for your media by automating the process almost completely. We’ll likely start seeing support for movie trailers in more skins as well.

There will also be a host of improvements to and support for new international scrapers for languages other than English.

Playback and performance improvements

10.05 brings a host of playback improvements including improved Blu-ray support, several improvements to both audio and video codec support as well as better support for subtitles. There’s also added support for Broadcom Cystal HD PCIe hardware accellerated video encoders to which allows smooth playback even on lower end systems. There are also several performance improvements to SQL database queries in the library.

Read the details and follow the progress of the XBMC 10.05 release here