Creating Mobile Web
 Sites with TYPO3
      Dmitry Dulepov
Why mobile web is important?
Why mobile web is important?


What’s so special about mobile web?
Why mobile web is important?


What’s so special about mobile web?


Making mobile web sites with TYPO3
Why mobile web is important?
http://skyjohn.deviantart.com/
http://skyjohn.deviantart.com/
Mobile page views per month
Mobile’s share of web consumption
Life goes mobile
What’s so special about mobile web?
http://skyjohn.deviantart.com/
 http://zandog.devianart.com/
No rollover effects
No rollover effects


No hover effects
No rollover effects


No hover effects


Remember proximity
Mobile browser distribution: France




                              http://gs.statcounter.com/
Mobile browser distribution: France


                         10%
 Apple              5%
 Nokia
               5%
 Androi...
Rendering the mobile version
Rendering the mobile version


Creating special pages
Rendering the mobile version


Creating special pages


Testing with mobile devices
Rendering the mobile version
Rendering the mobile version
Rendering the mobile version

  Detect mobile devices: TypoScript
Rendering the mobile version

  Detect mobile devices: TypoScript



  Markup for the mobile version: iWebKit
iWebKit
iWebKit HTML markup

                    <div id="topbar">
                      <div id="title">Test site</div>
         ...
iWebKit HTML markup

                    <div id="topbar">
                      <div id="title">Test site</div>
         ...
Lists of text items
Lists of text items




Fancy lists
iWebKit
iWebKit
                  jqTouch

Sencha Touch
                  WebApp.Net




    Sprout Core      Pastry Kit
Creating special pages
Testing with mobile devices
Workshop in the afternoon!
Workshop in the afternoon!



       Questions?
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Creating Mobile Web Sites with TYPO3
Upcoming SlideShare
Loading in...5
×

Creating Mobile Web Sites with TYPO3

5,969

Published on

A presentation for the TYPO3 University 2010 in France.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,969
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

  • We are going to talk about three things today.
    Firsts, why mobile web is important to us all. Unless it is really important there is no point doing it, right? So we will talk about that.
    Next we will talk about what is so special about mobile web and why can&amp;#x2019;t we use all the same techniques we used so far.
    And finally we will see how we can make mobile web sites with the tool we know most. This is about making web sites with TYPO3.
  • We are going to talk about three things today.
    Firsts, why mobile web is important to us all. Unless it is really important there is no point doing it, right? So we will talk about that.
    Next we will talk about what is so special about mobile web and why can&amp;#x2019;t we use all the same techniques we used so far.
    And finally we will see how we can make mobile web sites with the tool we know most. This is about making web sites with TYPO3.
  • We are going to talk about three things today.
    Firsts, why mobile web is important to us all. Unless it is really important there is no point doing it, right? So we will talk about that.
    Next we will talk about what is so special about mobile web and why can&amp;#x2019;t we use all the same techniques we used so far.
    And finally we will see how we can make mobile web sites with the tool we know most. This is about making web sites with TYPO3.
  • So, let&amp;#x2019;s get to the first point: why mobile web is important? This is a really interesting question. Let&amp;#x2019;s think of what happened in the last couple of years.
  • I got my first mobile phone in 1998. That was the only color device with only three distinct colors. It was Siemens S25. Here it is. There were no Internet on these old phones. I did not even had SMSes at the beginning. And it cost me nearly a dollar per minute for any call (incoming or outgoing). Mobility was only for calls.
  • Then Nokia made the very first phone that could browse the web. A black and white screen, two color images in a special format that none of image editors could save. Sites could have hyperlinks, bold and italic text. Total size of the page could be less than a kilobyte. It was usable in some way. -- Things have changed.
  • Now we got far more capable devices. This is one example of many but the most successful so far. You can browse the web with it, pay your bills, search for restaurants and communicate with friends using voice, mail, SMS, Skype, instant messengers and so on. That&amp;#x2019;s mobility.
  • Some stats showing how mobile web grows over months.

  • Our life has gone mobile. We do far more mobile than two years ago. That&amp;#x2019;s why we need to adapt our practices to the mobile era. If we don&amp;#x2019;t, we will loose these customers and somebody else will get them.
  • So, what&amp;#x2019;s os special about mobile web? When we develop for mobile devices, we need to think differently because mobile web is different.
  • The first difference is devices. Most of mobile devices are smartphones. They are clever but they are small. 10 cm screen is the maximum what we have. These devices also have limited resources. Communicating with networks eats battery. CPUs are not the fastest in the world. In fact, 1 MHz CPU is the most we can hope for. Memory is also limited.
  • However the most important difference is how sites look on mobile devices. -- This is how one of my favorite sites look on the mobile devices. As you see it is hard to read or understand anything. I have to zoom, scroll and so on. Normal version of the web site is NOT suitable for mobile devices.
  • France Press uses a much better approach for mobile users. Here you can see the content much better. This is just one screenshot of the AFP mobile page but you see how more readable it is. This is because France Press web site was optimized for the mobile device.
  • Here is another example of optimized web sites. Twitter was of the first to optimize for mobile. Booking.com is my favorite site for hotel booking. Notice one interesting detail: you do not see browser&amp;#x2019;s address bar here. Mobile web sites can hide it to show more information to the user.

    This is what we aim for: a web site that is friendly for mobile user. It must be large enough to show stuff on the mobile device but small enough to feel the screen. It must load fast. It must not take a lot of memory. This is quite clear. What else?
  • Those of you who follow Apple products, know this picture. This is screenshot from the official Apple iPad advertisement. -- That is what is interesting. Mobile devices lack plugin support and most importantly they currently lack flash. Adobe says that Flash will come to Android and Windows mobile platforms this summer but I am skeptic about it. Flash eats phone battery like hell, so it is not realistic to use it on mobile devices. If you do a mobile web site, forget Flash for now.
  • Another important thing is that most of mobile devices use touch interface. It is either a finger or a stylus. This means you can&amp;#x2019;t use pop up menus. There are no hover effects, so make your links or other control elements clearly visible.
    You must remember that a finger or stylus have less precision than mouse. So think of how close elements are located together. If you place them to close, there are chances that users will tap a wrong element. So make sure that elements have clear bounds and they are not to close.
  • Another important thing is that most of mobile devices use touch interface. It is either a finger or a stylus. This means you can&amp;#x2019;t use pop up menus. There are no hover effects, so make your links or other control elements clearly visible.
    You must remember that a finger or stylus have less precision than mouse. So think of how close elements are located together. If you place them to close, there are chances that users will tap a wrong element. So make sure that elements have clear bounds and they are not to close.
  • Another important thing is that most of mobile devices use touch interface. It is either a finger or a stylus. This means you can&amp;#x2019;t use pop up menus. There are no hover effects, so make your links or other control elements clearly visible.
    You must remember that a finger or stylus have less precision than mouse. So think of how close elements are located together. If you place them to close, there are chances that users will tap a wrong element. So make sure that elements have clear bounds and they are not to close.
  • Another important thing is that most of mobile devices use touch interface. It is either a finger or a stylus. This means you can&amp;#x2019;t use pop up menus. There are no hover effects, so make your links or other control elements clearly visible.
    You must remember that a finger or stylus have less precision than mouse. So think of how close elements are located together. If you place them to close, there are chances that users will tap a wrong element. So make sure that elements have clear bounds and they are not to close.
  • Another important thing is that most of mobile devices use touch interface. It is either a finger or a stylus. This means you can&amp;#x2019;t use pop up menus. There are no hover effects, so make your links or other control elements clearly visible.
    You must remember that a finger or stylus have less precision than mouse. So think of how close elements are located together. If you place them to close, there are chances that users will tap a wrong element. So make sure that elements have clear bounds and they are not to close.
  • One good thing that you may like is that you need to care about very few browsers. Namely anything based on WebKit, which is Apple, Android and Nokia browsers. Then there is Opera, which works pretty well. FireFox does not really present on mobile devices and Windows devices have very little market sharing. If you are interested in browser distribution, here is figures for France. This is data from May 9 to June 10th. As you see, Apple devices is in the absolute majority. Nobody else is close. Nokia is the second with nearly 10% and Android gets 5%. Opera gets 5% and the rest is 10%, which includes Sony PSP, BlackBerry and so on. Statistics did not show any Windows Mobile devices, which I find a little strange but this is what I got. IEMobile shows in some other countries but not here. So we are good to assume that we need to optimize for WebKit and Opera. The rest is not very significant.
  • One good thing that you may like is that you need to care about very few browsers. Namely anything based on WebKit, which is Apple, Android and Nokia browsers. Then there is Opera, which works pretty well. FireFox does not really present on mobile devices and Windows devices have very little market sharing. If you are interested in browser distribution, here is figures for France. This is data from May 9 to June 10th. As you see, Apple devices is in the absolute majority. Nobody else is close. Nokia is the second with nearly 10% and Android gets 5%. Opera gets 5% and the rest is 10%, which includes Sony PSP, BlackBerry and so on. Statistics did not show any Windows Mobile devices, which I find a little strange but this is what I got. IEMobile shows in some other countries but not here. So we are good to assume that we need to optimize for WebKit and Opera. The rest is not very significant.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3. We need to think of three things: how to render the mobile version, how to create special pages (for example, a dedicated home page in many cases) and how to test it.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3. We need to think of three things: how to render the mobile version, how to create special pages (for example, a dedicated home page in many cases) and how to test it.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3. We need to think of three things: how to render the mobile version, how to create special pages (for example, a dedicated home page in many cases) and how to test it.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3. We need to think of three things: how to render the mobile version, how to create special pages (for example, a dedicated home page in many cases) and how to test it.
  • Now when we know about mobile web site specifics, we should see how we can create such web sites with TYPO3. We need to think of three things: how to render the mobile version, how to create special pages (for example, a dedicated home page in many cases) and how to test it.
  • We will need to render the mobile version appropriately. This means detection of the mobile device. We will use TypoScript with a custom user function for that. That user function will use a simple regular expression. There are other tools such as WFURL but they are too complex for our task, so we will use the simplest available tool: regular expressions.
    Next thing is to create a nice looking mobile layout. We could code all HTML and CSS ourselves but we will not do that. We will use one of the existing frameworks named iWebKit to create a good looking mobile web output.
  • We will need to render the mobile version appropriately. This means detection of the mobile device. We will use TypoScript with a custom user function for that. That user function will use a simple regular expression. There are other tools such as WFURL but they are too complex for our task, so we will use the simplest available tool: regular expressions.
    Next thing is to create a nice looking mobile layout. We could code all HTML and CSS ourselves but we will not do that. We will use one of the existing frameworks named iWebKit to create a good looking mobile web output.
  • We will need to render the mobile version appropriately. This means detection of the mobile device. We will use TypoScript with a custom user function for that. That user function will use a simple regular expression. There are other tools such as WFURL but they are too complex for our task, so we will use the simplest available tool: regular expressions.
    Next thing is to create a nice looking mobile layout. We could code all HTML and CSS ourselves but we will not do that. We will use one of the existing frameworks named iWebKit to create a good looking mobile web output.
  • We will need to render the mobile version appropriately. This means detection of the mobile device. We will use TypoScript with a custom user function for that. That user function will use a simple regular expression. There are other tools such as WFURL but they are too complex for our task, so we will use the simplest available tool: regular expressions.
    Next thing is to create a nice looking mobile layout. We could code all HTML and CSS ourselves but we will not do that. We will use one of the existing frameworks named iWebKit to create a good looking mobile web output.
  • A couple of words about iWebKit. iWebKit is a framework that allows you to create web sites or mobile applications quickly. You just do plain old HTML without any hacks or special tricks. Then you add a couple of lines to the &lt;head&gt; of your HTML and you get a nice looking pages. We will see that later today.
  • Here is a standard and mobile version of web sites together.
  • iWebKit markup is very clean and simple.
  • Here is how lists look in iWebKit.
  • Here is how lists look in iWebKit.
  • There are various frameworks that you can use. They have different degree of readiness. iWebKit is the most mature.
  • There are various frameworks that you can use. They have different degree of readiness. iWebKit is the most mature.
  • There are various frameworks that you can use. They have different degree of readiness. iWebKit is the most mature.
  • There are various frameworks that you can use. They have different degree of readiness. iWebKit is the most mature.
  • There are various frameworks that you can use. They have different degree of readiness. iWebKit is the most mature.
  • After we have rendered pages for mobile devices, we will need to create a special version of the home page for our web site. This is NOT necessary in all cases. For example, normally you do not need that for blogs or sites with a minimalistic design. But we will have a typical company web site, which needs a better mobile home page.
  • When our site is ready, we will need to test them. If you work in a big company, you can have some devices but in most cases you will be limited to using device simulators. We will use iPhone and Opera simulators to check our web site.
  • Here you see different simulators. We are not going to use Android because it is very slow and in generally not stable (crashes, works very slow, etc).
  • In the afternoon we will have a workshop where we apply all these steps to practice. We will create a mobile version of the existing TYPO3 web site. But for now we are done. If you have any questions, I am ready to answer.
  • Creating Mobile Web Sites with TYPO3

    1. 1. Creating Mobile Web Sites with TYPO3 Dmitry Dulepov
    2. 2. Why mobile web is important?
    3. 3. Why mobile web is important? What’s so special about mobile web?
    4. 4. Why mobile web is important? What’s so special about mobile web? Making mobile web sites with TYPO3
    5. 5. Why mobile web is important?
    6. 6. http://skyjohn.deviantart.com/
    7. 7. http://skyjohn.deviantart.com/
    8. 8. Mobile page views per month
    9. 9. Mobile’s share of web consumption
    10. 10. Life goes mobile
    11. 11. What’s so special about mobile web?
    12. 12. http://skyjohn.deviantart.com/ http://zandog.devianart.com/
    13. 13. No rollover effects
    14. 14. No rollover effects No hover effects
    15. 15. No rollover effects No hover effects Remember proximity
    16. 16. Mobile browser distribution: France http://gs.statcounter.com/
    17. 17. Mobile browser distribution: France 10% Apple 5% Nokia 5% Android Opera All others 10% 71% http://gs.statcounter.com/
    18. 18. Rendering the mobile version
    19. 19. Rendering the mobile version Creating special pages
    20. 20. Rendering the mobile version Creating special pages Testing with mobile devices
    21. 21. Rendering the mobile version
    22. 22. Rendering the mobile version
    23. 23. Rendering the mobile version Detect mobile devices: TypoScript
    24. 24. Rendering the mobile version Detect mobile devices: TypoScript Markup for the mobile version: iWebKit
    25. 25. iWebKit
    26. 26. iWebKit HTML markup <div id="topbar">   <div id="title">Test site</div> </div> http://theappleblog.com/2010/02/12/how-to-create-an-iphone-web-app/
    27. 27. iWebKit HTML markup <div id="topbar">   <div id="title">Test site</div> </div> http://theappleblog.com/2010/02/12/how-to-create-an-iphone-web-app/
    28. 28. Lists of text items
    29. 29. Lists of text items Fancy lists
    30. 30. iWebKit
    31. 31. iWebKit jqTouch Sencha Touch WebApp.Net Sprout Core Pastry Kit
    32. 32. Creating special pages
    33. 33. Testing with mobile devices
    34. 34. Workshop in the afternoon!
    35. 35. Workshop in the afternoon! Questions?

    ×