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.
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.
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:
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.
Responsive / Mobile-friendly
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
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.
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
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)