• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
D2WC 2012: Looking Good: Mobile WordPress
 

D2WC 2012: Looking Good: Mobile WordPress

on

  • 543 views

If you’ve ever been faced with the task of making WordPress look good on mobile devices you know how hard it can be, especially if you are developing for clients who don’t hire you to maintain ...

If you’ve ever been faced with the task of making WordPress look good on mobile devices you know how hard it can be, especially if you are developing for clients who don’t hire you to maintain their sites. In this session we will look at the different methods to make your WordPress site look good in mobile and give solutions to the challenges you will face.

Statistics

Views

Total Views
543
Views on SlideShare
538
Embed Views
5

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 5

http://www.xldstudios.se 4
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • FIRST: What is responsive design?\n--- SHOW OF HANDS: HOW MANY *KNOW* THIS WELL? ---\nExplain briefly what responsive design is all about. Makes it easier to design for various screen resolutions. BUT comes with problems.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • There are two groups of people: Authors and Devs who have to make sure site owners and bloggers can get things that just work.\n--- SHOW OF HANDS: HOW MANY ARE DEVS vs. SITE OWNERS ---\n
  • Let’s talk about some challenges that WordPress specifically demonstrates when building a site for mobile.\n
  • \n
  • \n
  • \n
  • \n
  • SIDEBAR: What to do with it when reducing the size? We can hide it. Position it below content under 2-col width. HOWEVER, creates a problem => Sidebar is much wider now. Looks hideous.\n-> Example. DeveloperDrive\n
  • \n
  • Why use a fixed sidebar?\nIt streamlines the user experience. Users design sidebar banners for one screen: Fit across all.\n+ Sidebar not THAT important\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Kudos to them: Good WIDE screen version.\n
  • Move down: Standard blog format, not two columns anymore.\n
  • Moving down further, position navigation under logo.\n
  • Sidebar problem. They hide it.\n
  • \n
  • \n
  • \n
  • \n
  • \n

D2WC 2012: Looking Good: Mobile WordPress D2WC 2012: Looking Good: Mobile WordPress Presentation Transcript

  • LOOKING GOODMOBILE WORDPRESS
  • Who is the guythat’s talking?
  • Erik Bernskiold note the spelling
  • LOOKING GOODMOBILE WORDPRESS
  • Mobile Devices
  • Mobile Devices Tablets & Smartphones
  • 3 Ways Of Making WordPress Look Good on Mobile
  • responsive designdesktop tablet phone
  • Mobile-Specific Design
  • Separate Mobile Site
  • Pros Cons- Easy to make lightweight - Completely separate - Only designed for one type of device - Easy to go away from feature-parity.
  • Mobile-Specific Design
  • Pros Cons- Easy to get feature-parity - Only targeted to one type of device- Easy to for customers to maintain- Optimized for the screen size
  • BANNED
  • Pros Cons- Easy to get feature-parity - Only targeted to one type of device- Easy to for customers to maintain- Optimized for the screen size
  • DON’T CREATETHE BAD MOBILEEXPERIENCE ALL OVER AGAIN!
  • responsive designdesktop tablet phone
  • Theme Authors Site OwnersWordPress Developers Bloggers
  • CH ALfor LE the me NG a uth o rs ES and d ev elo p er s
  • Making It Easy For Users
  • metaboxeshtml css theme options shortcodes double configuration
  • Serving Up Right-Sized Images Server Side Check - Conditional Loading
  • RESSResponsive Design + Server Side Components
  • Should We Hide The Sidebar?Photo by Scott Liddell
  • fluid % fixed px
  • Why Fixed Sidebar? Streamlines User Experience &fixed px Makes it Easy to Update
  • 2 Simple Techniques To Make Your Life Much Easier
  • Using Classes in Your HTML Code
  • <article id="post-5334" class="post">!! <h1>This is my post title</h1>!! <p>Post body text.</p>! <p>Keeps continuing here.</p>!! <div class="post-meta">! ! <ul>! ! ! <li>May 18, 2012</li>! ! ! <li>Design / Development</li>! ! ! <li>Erik Bernskiold</li>! ! </ul>! </div></article>
  • <article id="post-5334" class="post">!! <h1 class="post-title">This is my post title</h1>!! <div class="post-body">! ! <p>Post body text.</p>! ! <p>Keeps continuing here.</p>! </div>!! <div class="post-meta">! ! <ul>! ! ! <li class="post-meta-date">May 18, 2012</li>! ! ! <li class="post-meta-categories">Design / Development</li>! ! ! <li class="post-meta-author">Erik Bernskiold</li>! ! </ul>! </div></article>
  • Adding a Select/Down-down Menu
  • Find the codehttp://www.xldstudios.com/generating-select-menu-in-wordpress/
  • Examples
  • Discussion
  • Find The Slideserikbernskiold.com/d2wc-2012-slides
  • Get in touch with me...http://www.erikbernskiold.comhttp://www.xldstudios.comFacebook: http://facebook.com/bernskiolderikTwitter: @ErikBernskioldGoogle+: http://gplus.to/bernskiolderikemail me: erik@bernskioldmedia.com
  • Questions?
  • LOOKING GOODMOBILE WORDPRESS