The days of building websites targeted solely at desktop or laptop environments are over. Users can and will access your website from a variety of internet-enabled devices.

Accessing the web from mobile devices is far from new. However, the popularity of smartphones and cheaper data packages from network providers have driven a sharp rise in mobile web usage, which is not just reserved for the latest and greatest smartphones.

As website owners, mobile devices also offer some fantastic features typically not available on the desktop – functionality such as clicking a hyperlink in your website to call your phone number, or adding your contact details to an address book. And with more advanced devices, a mobile website can provide more targeted, location-aware content for your visitors.

MOBILE FONTS: Computerlove's Advanced Profile on the iPhone demonstrates how the @font-face technique can be used to bring brand fonts onto a mobile site

With the growing importance of mobile devices and the diversity of access it brings, it's vital as website owners, designers and developers that we think smarter and broader about how we enable visitors to engage with our sites.

You need to have a clear policy and strategy in place for making your website accessible to as many internet-enabled devices as possible. Over the following pages, I'll look at some key lessons the team at Code Computerlove has learned while developing mobile websites. I'll cover general hopefully use and apply to your own websites.

Which technology for mobile sites?

The first question you may be asking is: What technology is involved? Well, a technology stack, served by your existing web server, and utilise your existing web development skills. You use XHTML and CSS. There's no need to invest in learning a new formatting language or resurrect an old one such as WML (Wireless Mark-up Language).

At Code Computerlove, our base-level entry devices have to support WAP 2.0, which in turn supports XHTML-MP (Mobile Profile) and WCSS (Wireless Cascading Style Sheets). We also target high-end devices that fully support XHTML and CSS through to HTML5 and CSS3.

XHTML-MP is simply a subset of XHTML for mobile use and WCSS is a subset of CSS. Whilst XHTML-MP has been adopted and superseded by the W3C with XHTML-Basic 1.1, it's still the most widely supported XHTML variant. If you know XHTML, you already know XHTML-MP and XHTML-Basic. The same applies for WCSS.

Styles can be embedded or linked into your XHTML just like normal desktop web pages. What about more interactive technologies such as JavaScript or Flash? Support for these is inconsistent.

However, at the lowest level, like the desktop version of your website, the mobile website should still work without them.

Device diversity

To reiterate, mobile websites are built using existing web technologies. The main challenge is that given the sheer diversity of mobile devices, support for these technologies is inevitably inconsistent.

Certain devices may not support particular features, or features common to devices may be implemented in different ways. So how can you be sure your mobile website will look and act the same on all mobile devices if they all implement the technology in slightly different ways? How can you test your mobile website effectively? How can you assure your clients that their mobile website will work flawlessly on all devices?

BASIC PROFILE: The Basic profile of the site on OpenWave shows the lowest common denominator

The simple answer to these questions is … you can't! It's a tough call to make, but an important one. It's logistically impossible to set up and test all of the XHTML-supporting mobile devices that are available, as well as dealing with quirks that each device offers.

Ironically, appreciating this early on will actually help your build, testing and quality assurance processes. At Code Computerlove, we came up with a two-pronged approach to help us deal with this diversity.

Firstly we agreed to support at the lowest level, only those devices that support XHTML and CSS. Secondly, we used the concept of 'device profiles'. A device profile is simply a way of logically grouping devices.

The criteria for each group can be based on device capability, manufacturer and operating system, or by any other criteria. We created three core profiles. The 'Basic' profile covers low resolution, text-only devices. The 'Intermediate' profile includes devices that support images and have a screen resolution greater than or equal to 240 pixels (such as the BlackBerry, Nokia N95 and Nokia Xpress).

Finally, the 'Advanced' profile includes the latest smartphones based on WebKit browsers, such as the iPhone and Android phones. These profiles help us both to generalise and specialise device capabilities. They help us form a design, build and testing strategy, as well as enabling us to demonstrate to our customers how a mobile website experience will differ between diverse mobile devices.

These profiles are not set in stone. Neither are they static. Profiles may vary between projects and customers. They reflect which agreed device features are to be targeted, as well as the specific handsets we need to support.

During the life cycle of a website, new profiles may be added and old profiles removed. Additionally, they require regular reviews to guarantee their relevance and to ensure that new devices entering the market are properly assigned to the right profile.

Device profiles play an important part in our build process. We assume that all devices adhere to the basic 'text-only' profile. This is our default, fallback profile that will work on all devices. We then progressively enhance a site for subsequent profiles.

INTERMEDIATE PROFILE: The intermediate device profile for the First Group TransPennine Express site shows how it looks on more advanced mobile devices

For example, the Intermediate profile introduces a wider colour palette and the use of images. The Advanced profile extends this further by using advanced CSS3 techniques or more interactive scripting elements.

Device detection

So how do you determine whether a web page request is coming from a mobile device? And secondly, how do you determine what profile a device belongs to?

We do this by simply inspecting a web browser's user agent details and matching them up in a device capability file, which contains extended details about the device. Each web browser has user agent information about itself, such as vendor, version or operating system.

Irrespective of whether a browser is running on the desktop or mobile device, whenever it requests a page from a server, it also sends this information as part of that request. A server can then use this information to determine whether a request has come from a mobile device or not and what capabilities that device has.

To help with this, there are a number of publicly available 'device capability' files that you can use with your server-side technology. These files contain extended information about the web browser and device accessing your site, such as screen resolution, colour depth, image support, touch screen support, manufacturer and operating system.

These database files come with a number of pre-built helper methods, enabling you to integrate them easily into various server-side web technologies such as PHP, ASP.NET and Java.

At Code Computerlove, we use the paid-for subscription service DeviceAtlas. For a minimal yearly cost, this service provides us with regular database updates as well as an online database for browsing phone capabilities.

There are of course alternatives, and a popular open source project called WURFL (Wireless Universal Resource File) is available from wurfl.sourceforge.net. Alternatively, you could write your own user agent detection routine!

Testing

How do you test your mobile website and device profiles? There's no substitute for using real physical devices. Not only will you see precisely how the site will look, but you'll also experience any hardware challenges that the device will throw up, such as screen size or quirky input mechanisms.

Physical testing on every single device is, of course, logistically impossible. But you should try to obtain a few devices that fit each of your device profile characteristics. And if you're building a site on behalf of a client, it's worthwhile trying to get hold of the common handsets they use. There are also a number of software-based testing tools you can use in your daily build and testing process.

TEST AS MUCH AS POSSIBLE: The more devices you can test on the better, but testing on all devices is next to impossible

For testing your mobile site within your desktop browser, use the Firefox User Agent extension. This extension changes the browser details that are sent to your server, spoofing the server into thinking you're accessing the site from a mobile device.

It's important to note that you'll still be viewing the website via the Firefox rendering engine, not how it will be actually rendered on mobile devices. What it will show you, though, is an approximation of how your site will look across various device profiles.

For greater accuracy, there are a number of device simulators available for you to install on your development box for BlackBerry, Android, and iPhone to name a few. Furthermore, there are hosted options offered by Opera, Nokia and Device Anywhere. The latter is a paid-for service hosting thousands of genuine mobile device simulators.

IMPROVING ALL THE TIME: The Intermediate profile on a BlackBerry shows improved formatting and imagery

Perhaps one of the most useful tools is the now-defunct OpenWave simulator. It's fantastic for experiencing your mobile website against a small resolution, text-only device profile. Due to its limited nature, what you'll get is an immediate indication of whether your navigation and content work for mobile.

Multiple websites

Throughout this article, I've been discussing mobile websites as distinct entities from desktop websites. But do you need to build separate websites? Do you need separate URLs for your mobile website?

There's no right or wrong answer to these questions. In an ideal world, your website should be accessible to all devices – desktop or other – and be capable of rendering itself where possible, using the same content and navigation structure.

This singular approach works brilliantly if you know from the outset that your website is to target multiple devices as this can be factored in accordingly when planning structure, layout and content. However, if you have to retro-fit mobile onto an existing desktop site, it may be easier to run the two as separate sites.

Navigation and content that traditionally works well on the desktop may not when displayed on a mobile device. Desktop navigation may seem unnecessarily complex on a mobile device, and content may need rewriting, either to be shorter and more immediate or to be split across multiple pages.

As the amount of server-side branching logic increases to alter navigation and content for desktop and mobile, it's then a case of either re-evaluating your design, structure and content or, if the two sites serve slightly different objectives, running the two as separate instances.

At Code Computerlove, we've separated out our desktop and mobile website. We've found this easier when internally managing site assets such as style sheets, scripts and images and server-side logic.

We are, however, in a convenient position in that our content management system enables us to share content between multiple websites. So, while both are distinct sites, there's crossover and shared content between both.

Do you need a separate URL to distinguish your mobile website from your desktop website? Again, there's no right or wrong answer to this: it's purely down to your own requirements. You don't need a '.mobi' domain, an 'm.' subdomain or a 'mobile' folder as part of your main website's URL.

At Code Computerlove we've used the 'm.' sub-domain approach for mobile – for example, m.codecomputerlove.com – and www for desktop, as this suits our requirements.

If a mobile device browses to the desktop URL, it's redirected to the mobile site. The mobile site contains a hyperlink that enables the visitor to navigate back to the desktop site if they wish to. Conversely, if a desktop browser visits the mobile site, we don't force a redirect back to the desktop version.

Structure and content

Due to restrictions on screen real estate and the various input mechanisms used by mobile devices, relying on a traditional multi-column desktop-based layout doesn't work. This is true even for smartphones that accurately render desktop websites. The novelty soon wears off when scrolling through and zooming around desktop-targeted websites.

At Code Computerlove, we've developed a standard template structure for our mobile websites, initially based on a template that can be found at MobiForge.

This template follows a single-column, fluid-width design. What this means is that the user need only ever scroll vertically and that the page always fits the available width of the mobile device's web browser. The template is purposely 'light'. It encourages simple navigation with tightly written, relevant and focused page content.

Additionally, the template promotes the use of clean and simple XHTML markup that mobile devices with limited processing capabilities, memory and variable network speeds are able to render quickly.

MOBILE TEMPLATE: This diagram will give you an idea on how to structure a mobile website

The template is composed of a header containing the company name or logo; top and bottom breadcrumb trails displayed on all pages except the homepage, enabling the visitor to navigate back through the site with ease; a page content area; sub-navigation links; and a footer containing copyright information plus, more importantly, a hyperlink to the desktop version of the site.

Final tips and tricks

To wrap things up, here are a few final tips and tricks to help with your mobile website development:

Mobile-specific META tags

A number of XHTML META tags that are specific to mobile websites can be used in addition to the common tags such as author and description. A review of these can be found here.

One important one is the viewport META tag, which can be used to set the initial scale of the width of the site to fit the screen. This is especially important for iPhone browsers. It forces your mobile website to fully fit the screen at the correct resolution and prevents the user 'zooming' into a page, for example:

CSS and presentation tips

Given the variable nature of screen resolutions, it's best as a rule to stick with relative units such as percentages and ems. Relative units will help when it comes to making a quality and scalable mobile design. With perhaps the exception of more advanced smartphones, fonts and sizes are in general poorly supported.

It's best to assume that most devices will only use their default font faces and sizes for XHTML elements. CSS background images tend to be well supported. However, your design must work well in the event that they aren't.

We did find a glitch with BlackBerry browsers. To ensure maximum support, make the URLs to your background images absolute, not relative, to the style sheet.

Image resizing and scaling

It's preferable not to push full-size desktop-targeted images to mobile users. Where possible, ensure your images are optimised accordingly. There may be instances where you need to scale images dynamically on the server to match the screen resolution you're serving to.

If you're using DeviceAtlas for browser detection, you can obtain the actual screen width of the web browser and rescale the image accordingly, using such tools as ImageMagick or any other server-side image manipulation library.

Google Analytics

Avoid using the default JavaScript-generated code. Many mobile devices don't support JavaScript and so using the default code will distort your website statistics. Google now offers tracking code options that are targeted specifically for mobile devices.

This code does not rely on JavaScript. You can find the option under the Advanced tab in the section where you normally generate your tracking code from.

Magic is experiencing something of a renaissance. Its online communities are thriving as wannabe Derren Browns rub shoulders with professionals. Once-struggling magic shops are thriving in new online incarnations as amateurs flock in to impress their friends or branch out into a lucrative new career.

Magicians themselves have even begun producing their own material for sale. On the surface, then, everything seems rosy in the world of the mystery arts. But magic relies on secrets, and one thing the internet can't keep is a secret.

For some professionals, the internet has given rise to a new fear – that of coming across a heckler who has seen how the trick is done on YouTube and is determined to ruin it for everyone.

The secret's out

Hang out with magicians for long enough and eventually the twin problems of internet exposure and piracy come up: "It is not a victimless crime," says magician Stephan Ward, speaking about magic piracy.

"Many of the creators rely on sales of their products to earn a living. There are a couple of examples where the creator cannot perform shows any more due to health reasons, so he's decided to make his secrets available to other performers. This makes the theft even more wrong."

The internet has transformed the magic scene into a multimillion pound industry, but life online has been both a blessing and curse for its practitioners. "I tend to work more on the corporate circuit now," says Ward, "but when I do perform at a bar or restaurant I've had the problem of people either looking things up on their phone while you do the trick, or telling you they saw it on YouTube."

YOUTUBE MAGIC: YouTube videos might show you how tricks are done, but not how to perform them well

Rich Newman is a semi-professional magician who appears regularly at Bristol's Illusions Magic Bar. "I've never had someone actually find what I'm doing on YouTube while I'm at the table," he says, "but certainly afterwards I've had people come up to me and say 'Is this right? Is this what you did?' You have to use the old magician's trick and say, 'Can you keep a secret? Well, so can I!' You have to keep schtum."

"I have a number of friends who are table workers," adds Paul Brook, a mindreader from Birmingham. "One of them went around the tables performing at a wedding recently and did a certain trick which is an astonishingly visual thing to see, but when he moved onto the next trick, someone at the same table had typed something into their iPhone and on YouTube there was the explanation. So he showed it to everyone while the guy was still working."

Brook has spent time investigating the quality of YouTube exposure videos and isn't impressed: "With YouTube, you won't be getting the whole trick. You get the bare bones and you won't look good performing something you learn on there."

PAUL BROOK: Paul Brook marks each copy of his work to help trace illegal copies

Instant piracy

Falling prices also mean that very small magic companies and even individuals can now produce professional DVDs for other magicians at a reasonable cost. But just like other forms of digital media, these discs are also difficult to protect from copying, as one prominent figure in the UK mentalism scene has discovered.

"My own DVD had been pirated within a week of its release and after only nine sales, all of which were to people I knew," says Dr Todd Landman, cofounder of Psycrets: The British Society of Mystery Entertainers, and organiser of the society's bi-annual Tabula Mentis conference. "As a result my new book project is printed and secretly marked, and available in hard copy only to avoid ebook file sharing," he says.

MAGIC PIRACY: Dr Todd Landman had his own magic DVD pirated after just nine sales

Piracy and exposure can even bar well known performers from entry into magic societies: "Our rules forbid members from engaging in exposure," says Dr Landman. "In fact we denied entry to a top mentalist from Canada who has openly exposed crucial secrets of our craft online."

Pirates should perhaps be wary of downloading stolen material for another reason. Some creators of new magic tricks deliberately seed file-sharing networks with corrupted versions of their material. The person downloading and learning it might think he's about to stun his friends, but the creator is actually playing an elaborate trick on him that will make him look stupid.

This is an approach that's catching on, but others simply mark each copy of their work so that they can tell who the upload has come from. "Part of the approach I take to piracy of the material I sell commercially is to mark each copy so that I can at least backtrack," says Brook.

"One of my books is over 600 pages long, and you'd think it was safe from piracy, but it wasn't. Doing a search on various filesharing sites, I came across it. I thought it was one of the ones that I'd put there to fool people, but no, someone had scanned all those pages. You have to wonder at someone who spends all that money on a 600-page book and then thinks: 'I'm going to scan that bad boy in'".

The dealer's view

Costas Damianou runs the Magic Tau online store. Willful sharing of secrets that may have cost the person sharing them a considerable amount of money to buy makes him genuinely angry.

"A while back I heard that a friend's books were being pirated, so I decided to conduct an experiment," he says. Within just 20 minutes he had found online copies of DVDs, books and lecture notes with a commercial value of thousands of pounds. "A few of these had only been released a few hours before," says Damianou.

"This means that someone went to the expense of buying them and then giving them all away for free." But such people seem to think they are some kind of hero or modern day Robin Hood.

What's Damianou's message to them? "Let me tell you something for nothing," he says. "You are not taking from the rich and giving to the poor, you are a thief giving to other thieves and freeloaders. Anyone who uses these sites is not only breaking the law; they also have no right to call themselves a magician. We have ethics in magic and we do not steal from our peers."

TALK MAGIC: Some members of the TalkMagic forum have gone on to find commercial success

Some pirates see so little wrong with what they're doing that they'll even brag to the people it hurts: "I have heard customers say that they will never buy a magic DVD as they can get it for free either by downloading it or getting a copy from a friend," says Damianou.

"This being said directly to the retailer shows how much people don't see that what they're doing is harming the industry."

Sharing success

Piracy apart, a mark of just how popular magic has become is that online magic forums are thriving. They're community sites where magicians, the creators of the tricks they perform and even magic dealers can be found debating the latest techniques and swapping ideas.

Paul Stevens is the chief moderator at Talk Magic, one of the UK's largest online magic forums. "The development of Talk Magic, along with other discussion boards, has certainly affected the art of magic," he says.

"Many newcomers display great enthusiasm but are quickly disappointed to find that the real secret to magic is practice, presentation, hard work and commitment. Anything less results in very poor magic and annoyed spectators."

This is something that resonates with Rich Newman. "Magic is very expensive," he says. "It's one of the most expensive and disappointing hobbies there is. You see something and go 'WOW!' but then you get the trick and go 'Oh', because there's a lot of work to fit it into your routine and your personality."

COSTLY BUSINESS: As a semi-professional, Rich Newman struggles with magic's expense

For those willing to put the hours in, however, fame and fortune could beckon, as Stephens confirms: "Many of our members have gone on to commercial success either in terms of performing or releasing their own work to great acclaim."

"I really like the fact that some of the forums have well-known magicians that will interact with other members," adds Ward. "And the dealers too – it is possible to ask any questions about their products and voice any concerns. It's also nice to talk to other professionals, exchange ideas and give a few tips to non-pros and people who are new to magic."

A vital aspect to magic forums is the review section. Reviews are posted by members, and can make or break a new trick. "Using a method or trick in the real world is a lot different to using it in your bedroom, so I always like it when you hear of workers giving their views of how it all pans out in the field," says Ward.

"One aspect [of Talk Magic] I'm particularly pleased to see," says Stephens, "is the rise and development of regional meetings. Not content with just sitting in front of a keyboard and chatting online, several groups of members have arranged to meet – usually in a pub somewhere – and share their art with each other as well as the public."

This is a great idea, but if you're meeting in a pub for an afternoon of vanishing coins, finding cards, reading thoughts or hypnosis, it's a good idea for someone to ask the landlord or manager if it's OK before you begin. Having attended several such meetings, I've witnessed first hand staff ejecting magicians after becoming worried that their activities might constitute a performance, which under some bylaws can require a licence.

Despite all the potential pitfalls, though, there's no doubt that the internet has altered the practice of magic for good, and no amount of trickery will change that.