Chapter 9. Creating a Mobile Website

Okay, we've built a handful of templates, updated the backend look, and even learned how to create flexible content elements for our website. Now we need to start making sure that our website works everywhere. That means that we need it to work across all the desktop browsers that we are targeting and even mobile devices. This is one of the most important chapters, come to think of it. Almost anybody can create a website these days, but there's a surprisingly smaller amount of websites that adapt well to browser and operating system changes. There are a handful of reasons that all sites don't handle this better, but TYPO3 gives us a few advantages when websites work on mobile devices:

• You don't have to create your own checks. In static HTML and even many CMSs, there's no built-in way to check the browser on the fly. You might be able to use some CSS hacks, but those are fragile and can be broken by any browser updates in the future. Even if you do check for the browser, you'll have to create your own routines to handle the different environments as you run into them. TYPO3 already has browser-checking functions as part of its core and we'll be able to access it using basic TypoScript.

• You don't need a separate mobile site. It's common to create a whole "mobile experience" through what basically amounts to a new website. You might be able to share the content in an ideal world, but you'll still probably need to create a whole new set of templates just for the mobile devices in other CMSs. Sometimes, you'll even have to direct everyone to a mobile URL (like http://m.example.com) to clearly show the separation of your mobile website and your full website. We're going to use our TypoScript only to slightly tweak the normal experience for the Web; no new templates and no special URL are required, but we still use them if we want to.