Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EE + Mobile

116851367b985e98a1236f59bc4717ce?s=47 Fred Boyle
October 16, 2011

EE + Mobile

Overview + discussion for one method of creating a mobile version of an existing EE site.

116851367b985e98a1236f59bc4717ce?s=128

Fred Boyle

October 16, 2011
Tweet

Transcript

  1. EE + Mobile creating an alternate version of your EE

    site for mobile devices 3 Tuesday, May 31, 2011
  2. ★ Define your mobile URL ★ Setup the URL in

    your DNS ★ Check with your server administrator or hosting company on how to add a domain alias IN THE BEGINNING... 4 Tuesday, May 31, 2011
  3. if($_SERVER['SERVER_NAME'] == 'm.ngenworks.com') { $assign_to_config['global_vars'] = array('is_mobile' => true); }

    else { $assign_to_config['global_vars'] = array('is_mobile' => false); } THE MAGIC 5 ★ Place the following in your index.php file Tuesday, May 31, 2011
  4. WHAT DID I JUST DO? CODE TRANSLATES TO ★ If

    this site is being accessed using the m.ngenworks.com URL ★ set the global variable 'is_mobile' to true ★ otherwise set it to false. 6 Tuesday, May 31, 2011
  5. NOW WHAT? TEMPLATE MAGIC 7 {if is_mobile} {embed="mobile/blog-detail"} {if:else} <template

    code here> {/if} Tuesday, May 31, 2011
  6. THE MOBILE CONTEXT 8 Tuesday, May 31, 2011

  7. THE MOBILE CONTEXT 9 ★ Context is important ★ Not

    all content from your “full” site is needed ★ Define what the focus of your mobile site is ★ What content is most important in the mobile context? Tuesday, May 31, 2011
  8. DIGGING DEEPER THE CONTENT ★ Get back to basics, analyze

    your content ★ Prioritize your different content elements ★ What type of site is this? ★ If an event site, upcoming events are priority ★ If a product site, finding products and details 10 Tuesday, May 31, 2011
  9. URL STRUCTURE MOBILE - Approach - Work - <case study>

    - Team - <team member> - Blog - <post> 11 FULL - Approach - Work - <case study> - Team - <team member> - Contact - Blog - <post> - Archive Tuesday, May 31, 2011
  10. HTML5 + USABILITY ★ New input types ★ email, url,

    number and tel ★ placeholder attribute ★ Simple change will improve the experience 12 Tuesday, May 31, 2011
  11. DESIGN CONSIDERATIONS ★ Large link hit areas ★ Don’t use

    rollover effects or interactions ★ Use an appropriate font size ★ Optimize images and videos for mobile (wifi + 3G) ★ Use sprites to reduce number of requests ★ Optimize images with tools such as ImageOptim 13 Tuesday, May 31, 2011
  12. SEPARATE vs RESPONSIVE WHAT IS RESPONSIVE WEB DESIGN? Serving up

    the markup but using CSS media queries and potentially some Javascript to alter the layout based on the dimensions of the browser accessing the site. In RWD you can also serve up images scaled to better fit lower, or higher, browser sizes and optimize the experience. 14 Tuesday, May 31, 2011
  13. LINKS HTML5 input types ★ http://miketaylr.com/code/input-type-attr.html ★ http://diveintohtml5.org/forms.html Image Compression

    ★ ImageOptim: http://imageoptim.pornel.net Responsive Web Design ★ http://globalmoxie.com/blog/mobile-web-responsive-design.shtml ★ http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ ★ http://fivesimplesteps.com/books/hardboiled-web-design 15 Tuesday, May 31, 2011