WordPress is Mobile
WordPress is Mobile
You are Mobile
WordPress is MobileIsaac Keyet - WordCamp Netherlands 2012
It’s not a Thing(Seriously. Stop talking about it.)
The One Web To Rule     Them All
Talk passionately about whatever comesto mind for an extended amount of timeand compliment Remkus on his newhaircutRespons...
Talk passionately about whatever comesto mind for an extended amount of timeand compliment Remkus on his newhaircutRespons...
Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress ...
Responsive content   approaches
Smashing Magazine
More examples of   Responsive Web        Design     AWWARDS.com: http://goo.gl/FLV4O       WPMU.org: http://goo.gl/n4ZV1Re...
Making a WordPresstheme mobile ready
Meta TagsA List Apart: http://goo.gl/g8tyuQuirksmode: http://goo.gl/2WzlB
<meta name="viewport"content="width=device-width,     initial-scale=1.0">
@media screen and(max-width: 320px) {*rules here*}
http://wordcamp.tv Search for “mobile” or “responsive”
Designing for Touch
Size++
FormsSmashing Magazine: http://goo.gl/6SvAS
EnhanceCSS-tricks: http://goo.gl/VFyhW
High density screens
@media only screen and(-webkit-min-device-pixel-ratio: 2)
@media only screen and(-webkit-min-device-pixel-ratio: 1.5)
Furtherenhancements
OnSwipehttp://www.onswipe.com/
WPTouchhttp://www.bravenewcode.com/
Mobifyhttp://www.mobify.com/
Manage WordPress    on the go
iOS   Android  BlackBerryWindowsPhone
Other appsBlogpress, Blogsy, and more
Responsive wp-    admin
Recap
Responsive content approaches
Responsive content approachesMaking a WordPress theme mobile ready
Responsive content approachesMaking a WordPress theme mobile readyDesigning for Touch
Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancements
Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress ...
Dank u wel.   wordpress.org  automattic.com    @isaackeyet  isaackeyet.com
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
WordPress is Mobile - Netherlands 2012
Upcoming SlideShare
Loading in …5
×

WordPress is Mobile - Netherlands 2012

7,693
-1

Published on

Things to think about when preparing your WordPress install for the mobile space-age. Learn how you can manage your WordPress install on the go, and how to make it ready for your mobile visitors, too. Good responsive themes, and a thought-through mobile experience is becoming ever more important by the day.

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

No Downloads
Views
Total Views
7,693
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • I&amp;#x2019;m here to tell you something you already know - WP is mobile. and the web is.\n
  • I&amp;#x2019;m here to tell you something you already know - WP is mobile. and the web is.\n
  • I&amp;#x2019;m here to tell you something you already know - WP is mobile. and the web is.\n
  • Detail about us already being mobile\n
  • I&amp;#x2019;m Isaac, I&amp;#x2019;m with the mobile team at Automattic\nopen source WP projects, mainly the apps\nmobile solutions for WordPress.com\n3rd time going to WCNL - most frequent WC. compliment Remkus on his &amp;#x201C;new&amp;#x201D; haircut\n
  • So, let&amp;#x2019;s talk about small-screen devices\n
  • Mobile is not a thing. It&amp;#x2019;s a necessary step forward\nshouldn&amp;#x2019;t be an extra in any dev work, for most projects it&amp;#x2019;s a fundamental part\nat the very minimum you need to have a plan. not doing anything is not acceptable anymore.\n
  • Think about it for a second. It&amp;#x2019;s not called &amp;#x201C;Desktop Web Designer&amp;#x201D;. There is only one web, just different devices connecting to it. And it&amp;#x2019;s always been like this.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • so when you&amp;#x2019;ve decided which route you want to take with your content distribution, it&amp;#x2019;s time to get your hands dirty\n
  • \n
  • this is what a basic viewport meta tag looks like\nother parameters like allowing zoom (generally not a good idea unless you&amp;#x2019;re creating a web app)\n
  • if the viewport is 320px or less (iPhone portrait)\nmin-width, max width, targeting only landscape or portrait orientation\n
  • \n
  • \n
  • \n
  • Set the input type for form elements\n
  • Number of ways to enhance and simplify the interaction on a touch device, like enabling the callto: for phone numbers\nset webkit tap highlight color (or disable)\n
  • \n
  • Target high-dpi devices, mainly iPhone retina\n
  • More compatible - works with most high-dpi Android devices as well\n
  • Take the small-screen experience even further\n
  • Transforms your WP install to a gesture friendly tablet experience\nused on wpcom\nbest for magazine-type websites and portals\n
  • Creates an app-like experience for small screen devices (primarily iOS)\nthere are a lot of these out there\n
  • Allows more control, better for large websites\n
  • \n
  • ...and Nokia and webOS.\nTablet versions, including iPad, Android tablets, BlackBerry Playbook\n
  • Blogpress\nBlogsy\n
  • Remember, the WP dashboard is already semi-responsive\nin the future, WP apps may simply be wrappers around the dashboard\n\n
  • \n
  • Tom Hermans 14:15 tomorrow\n
  • Tom Hermans 14:15 tomorrow\n
  • Tom Hermans 14:15 tomorrow\n
  • Tom Hermans 14:15 tomorrow\n
  • Tom Hermans 14:15 tomorrow\n
  • \n
  • WordPress is Mobile - Netherlands 2012

    1. 1. WordPress is Mobile
    2. 2. WordPress is Mobile
    3. 3. You are Mobile
    4. 4. WordPress is MobileIsaac Keyet - WordCamp Netherlands 2012
    5. 5. It’s not a Thing(Seriously. Stop talking about it.)
    6. 6. The One Web To Rule Them All
    7. 7. Talk passionately about whatever comesto mind for an extended amount of timeand compliment Remkus on his newhaircutResponsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress on the goRecap
    8. 8. Talk passionately about whatever comesto mind for an extended amount of timeand compliment Remkus on his newhaircutResponsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress on the goRecap
    9. 9. Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress on the goRecap
    10. 10. Responsive content approaches
    11. 11. Smashing Magazine
    12. 12. More examples of Responsive Web Design AWWARDS.com: http://goo.gl/FLV4O WPMU.org: http://goo.gl/n4ZV1Responsive themes: http://wordpress.org/extend/ themes/tags/flexible-width
    13. 13. Making a WordPresstheme mobile ready
    14. 14. Meta TagsA List Apart: http://goo.gl/g8tyuQuirksmode: http://goo.gl/2WzlB
    15. 15. <meta name="viewport"content="width=device-width, initial-scale=1.0">
    16. 16. @media screen and(max-width: 320px) {*rules here*}
    17. 17. http://wordcamp.tv Search for “mobile” or “responsive”
    18. 18. Designing for Touch
    19. 19. Size++
    20. 20. FormsSmashing Magazine: http://goo.gl/6SvAS
    21. 21. EnhanceCSS-tricks: http://goo.gl/VFyhW
    22. 22. High density screens
    23. 23. @media only screen and(-webkit-min-device-pixel-ratio: 2)
    24. 24. @media only screen and(-webkit-min-device-pixel-ratio: 1.5)
    25. 25. Furtherenhancements
    26. 26. OnSwipehttp://www.onswipe.com/
    27. 27. WPTouchhttp://www.bravenewcode.com/
    28. 28. Mobifyhttp://www.mobify.com/
    29. 29. Manage WordPress on the go
    30. 30. iOS Android BlackBerryWindowsPhone
    31. 31. Other appsBlogpress, Blogsy, and more
    32. 32. Responsive wp- admin
    33. 33. Recap
    34. 34. Responsive content approaches
    35. 35. Responsive content approachesMaking a WordPress theme mobile ready
    36. 36. Responsive content approachesMaking a WordPress theme mobile readyDesigning for Touch
    37. 37. Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancements
    38. 38. Responsive content approachesMaking a WordPress theme mobile readyDesigning for TouchFurther enhancementsManage WordPress on the go
    39. 39. Dank u wel. wordpress.org automattic.com @isaackeyet isaackeyet.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×