Websites that can be handled fully functional on tablets and mobile devices get more relevant each day, as the usage of mobile devices browsing the web increases dramatically.

As a website administrator it is a huge benefit for you to make your website compatible with mobile and tablet devices ("mobile-friendly"). This increases visibility of your web site. People can browse your website anywhere from any device.

If you run your current website on TYPO3 or plan to set up a new website with TYPO3, we recommend this guide so you can adapt your site to make it really "mobile-friendly".

How can I make my TYPO3 site mobile-friendly?

Please note that your administration interface or TYPO3 Backend is not subject of discussion here, it's all about what the website visitors see when they visit your website, which is the frontend.

Here are a few guidelines for your websites that you should consider incorporating in your website. 

Setting up a new TYPO3 CMS website

If you set up a new website, you can build your site on the bootstrap package extension like the Introduction Package does it, where the frontend theme is already mobile-friendly and prepared for all your needs.

Existing websites

See our advice below what to do with existing websites.

1. For Beginners

If you've just set up your site running with TYPO3 CMS and the bootstrap package extension and your customized theme, you are all set with a responsive layout. Please check the Google PageSpeed Insights to see how your website performs.

2. For Advanced Website Integrators

If you've used a non-standard template, have written your own TypoScript and know your way around, you can tackle even more things.

HTML5 out-of-the-box

The best foundation for a mobile-friendly website is using HTML5 and its elements from the ground up.

You can check if your website is running in HTML5 mode when looking at the source code, which starts like this:

<!DOCTYPE html>

If you're using frames or any old website running with HTML4, you should consider switching to HTML5. But be aware that you need to invest quite some time in testing depending on your site structure and your HTML code.

If you're running the latest version of TYPO3 CMS, you only need to add this line in your TypoScript setup to enable HTML5:

config.doctype = html5

Running TYPO3 with default content elements from CSS Styled Content with the option above, all native HTML5 elements and tags are already used.

Please make sure that your styling via CSS does not include bad hacks for specific browsers that might break on other devices, like IE-specific hacks. Also, a common practice is that JavaScript code from jQuery plugins might alter the output that could be problematic, also they might use "click" and "hover" events that are different for mobile devices.

Responsive / Mobile-friendly

If you set up a new site, a responsive website is best suited for you. This basically means that the website' content readjusts based on the device and/or the browser width. However, this is mostly frontend work and done via CSS3 and JavaScript, so you better check the templates before they are integrated into TYPO3 that they are mobile-ready.

Please also consider frameworks like Zurb Foundation or Twitter Bootstrap that deliver HTML code with responsive and mobile-first. There are plenty of free templates based on Zurb or Bootstrap that you can use to integrate in your own website.

However, if you don't have a responsive website and still want to make sure that the website just fits into your tablet or phone, make sure that the following meta tag is added to your website:

<meta name="viewport" content="width=device-width, initial-scale=1">

This ensures that regardless of the mobile device the full width of the websites is always scaled to the device width. For more options see this documentation about the viewport meta tag.

In TYPO3 CMS, you can add this option via this line of TypoScript setup:

page.meta.viewport = width=device-width, initial-scale=1

Avoid Plugins

The biggest enemy of mobile devices are websites requiring proprietary plugins like Adobe Flash and Microsoft Silverlight to display content or navigate through the website. If possible, try to use Flash just as a fallback scenario for older browsers but build on HTML5 elements like HTML5 video, HTML5 audio, and elements like canvas.

See the following Wikipedia articles for a better grasp on the technologies: 

Running a theme? Having frontend extensions?

If you've set up your site using a pre-defined package like with the TYPO3 CMS extension "bootstrap_package" your base output is already prepared for mobile devices.

Please also make sure to check any extension you've installed to see if it is outputting valid HTML5 content.

You can find public available extensions on the TYPO3 Extension Repository (TER) - if you search for "HTML5" or "responsive" you will get a selection of extension that are mobile-aware.

Activate Caching

Make sure your website is completely cached to speed up delivering of your site. Of course, this only works on static page without any user interaction.

Add this line to your TypoScript to ensure that all HTTP Cache Headers are always sent to the browser.

cache.sendCacheHeaders = 1

 

 

Running a separate mobile version of the website

If you have an existing and complex page, a separate mobile site might be the best approach to serve to mobile devices. There are some extensions that can redirect to specific templates, pagetypes etc based on certain user-agents / devices.

From there on a different, mobile-only, template can be used to display mobile-ready content.

Test Your Website

After taking the points above under considerations, make sure to test the output for yourself. There are several ways to do so:

  • if you have a mobile device at hand, browse your website completely - also make sure to reach all navigation elements, dropdowns etc.
  • If you are using Google Chrome, you will find a “mobile device emulation” feature in Chrome Developer Tools. These tools can be found under the "View" > "Developer" > "Developer Tools". There is also a good documentation about the emulation feature.
  • If your website has a Responsive Design, you should be able to narrow the desktop window to mobile device size - the viewport should change depending on the size of your screen. Please note that some responsive designs are based on the user agent, so this is not a 100% perfect solution to test.
  • We recommend to check your website with Google's PageSpeed Insights tool which has a nice addition and preview for mobile devices. The UX score in PSI - at the bottom of the page - is a good indicator that the TYPO3-powered site works well with mobile devices.
  • Mobile Friendly Test! - Google has launched a new tool that will help  users test if a website is mobile-friendly and thus eligible for the badge (mobile-friendly mention) in the Search Engine Result Page: g.co/mobilefriendly 

 

Need help?

In case you still have difficulties to make your site mobile-friendly, you're not lost. You can ask the community for help

Use the Facebook or via Twitter (just use the hashtag #typo3) to ask for any assistance. 

For the Go Mobile campaign we have also a newsgroup, mailinglist and mailinglist at the URL's below:

This page is the result of combined effort of the TYPO3 Associaton and the CMS Team (Benni Mack)