Archive for August, 2010

Benefits and Challenges of the Mobile Stylesheet

Posted: Monday, August 16th, 2010 Clock Icon

at 7:46 am

In a day and age where we see a boom in the use of mobile devices such as the Apple iPhone or Google’s Android, or really any smartphone geared up to browse the web in some sort of browser such as Safari, Opera or Firefox, we find ourselves having to deal with a much higher demand for mobile design.

When designing for web now we need to think long and hard about carrying the designs we create through to mobile devices, and this is not always a simple thing.

From the outset we of any design now we are dealing with the for gone conclusion that at some point the website will be viewed on a mobile device. So the decision really lies at the beginning of any project as to how much time and concentration is to be put in to designing the site for mobile.

There is a difference between gearing up a site to be useable and accessible on a mobile device and actually creating a mobile stylesheet to solely display the website in a different way on a mobile device.

There are lots of things to think about and take into consideration when designing for mobile, not only will it mean the initial design and ongoing up keeping of essentially two websites, but we must also think about why a user would be looking at your site on a mobile device, what usage would they be trying to gain from it and when would they be doing this?

First of all we will look into the reasons for designing for handheld devices.

Recent studies have proven that more and more people are using mobile devices as their primary connection point to the internet.

“Mobile is clearly on the rise, with 56 percent saying they have used a mobile device in public Wi-Fi locations like airports, hotels, and cafes, and 14 percent saying this is now their primary device for connecting in these locations,”

Quote taken from David Staas, JiWire, a mobile audience media company

This is a huge increase from only a few years ago and it will only increase over time as mobile devices become more technical and desirable as a browsing option.

Difficulties of diversity in usage

At the moment there are many ways to make your website mobile friendly. The problem does not lie in our ability to include a mobile offering but more on which mobile devices uses which method.

The simple solution would be to add a mobile stylesheet into the header of your website so when a user views it from a mobile device they are immediately presented with the mobile version, like so:

<link rel="stylesheet" href="screen.css" media="screen"/> To only show on screen

<link rel="stylesheet" href="mobile.css" media="handheld"/> To only show on mobile

Now this would be fine, apart from certain mobile devices do not read the mobile version of the stylesheet, some read both the screen version and the mobile version, some don’t read either, and some ignore the mobile version and only read the screen version.

Confused?

Well after getting your head around this, the reasons for the above are simple. It is not necessarily technical, certain providers choose not to implement the usage of mobile stylesheets on their devices because they feel a mobile styled website is an inferior offering in comparison to being able to view a full website as it would be on your everyday home PC.

For example Blackberry devices will only read the handheld style sheet, an iPhone would read the screen style sheet with media Query support, a Nokia S60 browser would view a website with only the screen style sheet, and a Palm would view both style mobile and screen style sheets.

The poses difficulties! But there is a solution. Thanks to the article by Dominique Hazaël-Massieux there is a technique for tackling most options while minimizing the amount of sylesheets we need to create.

We simply use a technique similar to Eric Meyers CSS reset to convert all styling from the screen stylesheet back to basics on handheld devices, then presenting all hand held devices with the correct CSS options.

So we would set our document out with a core style sheet, and then import out screen and mobile options like so:

@import url("screen.css");

@import url("mobilereset.css") handheld;

@import url("mobilereset.css") only screen and (max-device-width:480px);

This simply says to all devices using screen stylesheets to continue using them, to all mobile devices using both screen and handheld to use the screen reset then use the handheld version implemented later on, and for all mobile devices soley using handheld versions to continue doing so!

So in out website build we would implement the above as:

<link rel="stylesheet" href="core.css" media="screen"/>

<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width:480px)"/>

Because the mobile reset is being brought in through the core.css file then in an idealistic world “most” devices will end up acting as we intend them to.

Tags: web design, web development
Posted in Blog, Mobile Web Design | No Comments »

Prepping content while optimizing for a CMS

Posted: Monday, August 2nd, 2010 Clock Icon

at 5:06 pm

Trying to your page content optimized for the web is difficult at the best of times, especially if you are dealing with a Content Management System ‘CMS’ which is not particularly user friendly.

There are so many options and resources of advice at our finger tips, with different professionals and companies telling us what we should and should not be doing, and what is best for us without evening really getting to know us, our business or the systems we are using.

Well in this article we are going to discuss SEO, but not the best practices of how you should write your keywords, nor are we going to cover what the best way is to write your content in to be most effective with your description, as all that information would be purely speculative, impossible to tell without knowing your business, and also highly down to personal preference. Yes there are best practices but they to are only effective from personal experience, who is to say they work for everyone?

No, this article is going to cover a few simple stages in getting page content that you have already written ‘ready’ to be added into a content management system and to try to make optimizing it a much easier and hassle free process.

Step 1 – Prep Prep Prep.

So to start with, we need to prepare our content. By this I mean the content needs to be fully written and in a state that you are happy with it and are not going to be changing or editing anything at this stage at least.

This should be done outside of your CMS, especially if you are struggling to use your CMS. There is nothing worse than writing straight into a CMS WYSIWYG editor, to then have to strip everything back, mess around with content and start creating keywords, descriptions and clever titles. Do this before hand in an environment you are comfortable in.

Now, we have our content and we assume we have optimized it the way we want to. Bear in mind that you optimize content as you write, I already know what I want this article to be optimized for, and therefore as I type I am sub consciously gearing my copy towards my chosen direction of SEO.

Step 2 – The Description.

So what we do next is we take our copy and create a description from it. This is a block of keyword rich copy that best describes your whole article in one paragraph (maximum of 160 characters)

This needs to make sense also, as it is used by search engines, but it also needs to be very keyword heavy. This is the time to create this content before it is added into the CMS.

Step 3 – Keywords.

So, as mentioned above, we are not going to go into what are the best practices for keyword creation, but what I would say is you keywords need to relate to your page copy, throwing a load of generic site wide keywords on a page will not do it any good. That is why this three step process is quite good as it windles down your main article to your description to your keywords, keeping everything linked in one document so you have a full overview of all your copy.

So all I would say here is your keyword list needs to be generated from your copy and description so it remains related.

Step 4 – Images and supporting media.

Once we have our copy, description and keywords, we need to gather up any other media we intend to use on the page, whether it be images or links to videos. This is important as if you are mid adding copy to your page and realize you want to add an image, you have to save your copy (If the CMS your using allows you to save as drafts) then go and find an image, upload, go back to your previously half crated content, find your image…etc etc you can see where I am going with this.

So basically in a nut shell, you need to gather all elements of a page or article together before hand as it allows you to keep in a flow while writing, it saves time in the long run and it stops you having to dart all over gathering content once your are in your CMS.

The final step now becomes the fun part.

All you do is get into your CMS environment, and start copying your content in. Be careful copying from Microsoft Word or certain text editors as they can bring in nasty code, use the safe copy tool in the WYSIWYG, or paste from a plain text editor.

And that is it, simply preparing all your content and media before hand can make for creating optimized content through your CMS a much quicker, more effective and simpler experience.

Posted in CMS | 2 Comments »