Mobile Workshop – Ladies Learning Code

Modified: September 3, 2017 | First Published: Posted on
ladieslearningcode-mobile-workshop
Photo of Me taken by Peter Newhook

I attended the first Ladies Learning Code Mobile Workshop on January 28th. Ladies Learning Code is a women-run not-for-profit group working to empower women in Toronto to feel comfortable learning beginner-friendly technical skills in a social, collaborative way.

Courses currently include HTML & CSS, WordPress, Ruby, Javascript, the new Mobile Workshop and coming later this month Photoshop & Illustrator. The Ladies Learning Code workshops are highly popular, selling out moments after tickets are made available. This March Break will see the first Girls Learning Code Camp for ages 11-14.

We worked in pairs to create separate stylesheets for desktop and mobile versions of the site. Our goals were to:

  • change the wide desktop design to make it linear for mobile
  • simplify the content and the navigation. Less is more!
  • use mobile versions of images, resized to fit the smaller screen.
  • to style larger buttons for link navigation. Desktop links can be small as a mouse pointer is accurate to 1 pixel BUT our fat fingers need about 44px x 44px to be accurate.

If you are using WordPress for your website you can start with the WPTouch plugin. You can simply activate the free version of the WPTouch WordPress plugin and whala you’ll have a mobile site. Create a custom icon and play with the settings.

I wasn’t able to achieve all I wanted to with the free plugin so I upgraded to the WPTouch Pro version (developer license). I also signed up as an affiliate so if you want to buy WPTouch Pro for your own site please use this link and I’ll make a little something.

advertisment

As I worked through the WPTouch Pro documentation, I was very glad that I had attended the Ladies Learning Code Mobile workshop. The workshop prepared me to build my own child theme with the WPTouch Pro plugin.

The WPtouch Pro Plugin

  • Create a Mobile Theme: You can use one of the mobile themes that comes with the WPTouch Pro plugin. It is recommended that you create a child theme (with the click of a button) so that your modifications will not be overwritten when the theme updates
  • Styling: Open the WPtouch Pro Style / Appearance editor to set a custom header image, fonts and colours
  • Use stylesheet to hide things from mobile or desktop view with css. I opened my desktop theme’s css file and created the class .mobile-only {display:none;} and to the WP Touch child theme css file I added .desktop-only {display:none;}

Here is one example…
My recent post “The Mobile Shift is Changing Web Design” contains a YouTube embedded video. The size of this video was too large for the mobile site. The iframe width needs to be 100% for mobile but that is too large for the desktop version. Here’s how I fixed this.

<div class="desktop-only">
<iframe width="560" height="315" src="http://www.youtube.com/embed/9GalBu_cEkM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="mobile-only">
<iframe width="100%" height="250" src="http://www.youtube.com/embed/9GalBu_cEkM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

I don’t have the mobile theme looking the way I want it to yet but it is coming along and thanks to the WPTouch Pro plugin I really like the way that my blog posts are displaying.

Did you attend the Ladies Learning Code Workshop? If you’ve created your own mobile theme please add a comment with your link I would love to see what you’ve accomplished.