Och Aye The Wapuu! Spotlight On WordCamp Edinburgh 2015

The last time Edinburgh had a WordCamp was in 2012. I was fresh out of university and eager to meet members of the WordPress community.

I’d dabbled a bit with WordPress a few years before, but was keen to learn more and meet members of the local WP community. The weekend conference drew attendees from all over the UK.

Fast forward on a few years… I now make my living as a web designer, with WordPress as my platform of choice.

The Edinburgh local WordPress group disbanded and reformed as the WordPress Edinburgh Meetup group.

And then they decided to put together a WordCamp… in 8 weeks. I didn’t think it could be done, but the organising team made it happen.

It took place on Saturday 24 November 2015.

Here’s my take on the day..

Mark Wilkinson – Beyond FTP

Following the introduction, I started my day with the code track and this talk from Mark on his method of building and deploying websites.

Tools and software Mark uses for development

MAMP for local development. (Mark uses a virtual hosts file to point his local server to markwilkinson.dev rather than the standard http://localhost:8888/ – clever!)

Git client Tower for version control ($69 for a license).

Staging site on the client’s server, to make sure the code runs smoothly on the production environment.

To synchronise the database data, either Interconnect.it’s Database Search & Replace Script (free) or WP Migrate DB Pro – currently $199 for a developer license. These make the process faster and avoid any issues with serialized data.

DeployHQ for full site deployment (from £6/month).

One tip: don’t put your wp-config.php ifile n a public repository, unless you want to be a target for hackers!

Lots of tools to investigate then, plus an interesting insight into another developer’s process.

Slides link: Beyond FTP

Dave Green – Building Themes With The WordPress Customizer API

Dave explained how he’s had fun with the WordPress Customizer, which has been around since WordPress 3.4. It allows you to change options within your theme and see the changes in preview before you apply them.

It’s now part of Core, and theme developers are now required to move away from custom theme options panels to using the Customizer.

To get started with the Customizer API, you need:

• An /inc/ folder in your WordPress theme
• A customizer.php file in that folder
• Code in your functions.php which references the customizer.php file

You then need to create sections, panels and controls.

Panels are the top-level containers which hold Sections. Controls live within the sections. It’s usual to group controls of a similar type in the same section e.g. heading controls.

You can’t add controls without putting them in a section or panel.

You save and validate data and allow preview mode through Settings. There are 2 save modes, Theme_Mod (recommended, unique to that theme) and Option (can be used by all themes/plugins).

Dave showed us an example of some customizations he’d implemented, where the user could type in text and see it immediately on the front end.

I enjoyed Dave’s talk and it made me want to investigate further. I just need to improve my Javascript. 😉

Graham Armfield – Assistive Technology Demo

Graham demonstrated two programs to assist disabled web users:

• Dragon Naturally Speaking, an application for motor impaired users which allows you to control the computer screen by voice
• NVDA, a free screen reader for Windows for users with visual impairments

In terms of browser support, we learned that Dragon works best with Internet Explorer – support for the new Windows 10 browser Edge is not yet so strong. NVDA works optimally with Firefox. People with access needs don’t tend to use Chrome.

Dragon Naturally Speaking

Dragon requires a certain amount of training to master the program and for it to become accustomed to your voice.

Dragon has a lot of commands built in, including recognising application names (‘Open Microsoft Word’) and email addresses. It also has drag and drop support, though it’s very slow to use.

Fine-grained selection can be done using the Mouse Grid.

NVDA

NVDA is controlled primarily by the keyboard. WebAIM have a useful list of NVDA keyboard shortcuts.

NVDA and other screen readers are improving at recognising updates to pages, though this depends on developers using aria-live regions.

Accessibility issues

Graham showed us some examples of forms marked up well and badly to see how the technology handled them. In some cases it was impossible to access a form control or to select the desired option.

Modal windows also cause accessibility issues, as the z-index of them is set so high the user can never access the form controls.

This was an eye-opening live demo. It was good to see what could (and couldn’t) be done with each program. I’ve had some practice with Dragon as I have a copy myself, but I haven’t mastered it.

Steven Jones – The Ultimate Guide To Image Optimization

After lunch, I chose to go with the Content track.

I was particularly interested in Steven’s talk as I’ve recently blogged about the importance of optimizing images for web. Having massive images on a site is common mistake for users to make.

Steven explained that most web pages are now around 2MB in size, and two-thirds of the total are images.

Optimizing images

The problems and solutions are:

1. Large file size images uploaded.
   Solution: Use Imsanity plugin.
2. Large file size images after upload.
   Solution: Compress images with a plugin like Kraken.
3. Images that come with a theme not optimized.
   Solution: Use a task runner like Grunt to compress them.
4. File type not optimal.
   Solution: Choose types with smaller file sizes like WebP where you can.
5. Dimensions larger than shown on the page.
   Solution: Use the add_image_size() function in your theme.
6. Lots of small images being loaded.
   Solution: Use image sprites or a CDN.
7. Images below the fold still downloaded if the user does not scroll.
   Solution: Use a lazy loader like LazySizes.

Responsive images

Steven also discussed responsive images and the difficulties of serving the right image to the right device.

The latest version of WordPress, 4.4 now has responsive image support built in. This means that larger images for desktop won’t be loaded on mobile devices – a smaller version will instead.

For generating and using Retina images, the WP Retina 2x plugin is worth looking at.

Slides link: The Ultimate Guide to Image Optimisation in WordPress

Valerie Adler – Your Website? It’s Not For You

Valerie’s talk was another I was looking forward to, as we’d made contact before the event and chatted before her presentation.

Valerie was talking about SEO, but was careful not to describe herself as an SEO expert. She regards the industry as filled with cheats and charlatans.

A lot of what she said was plain common sense – but sometimes we need reminded!

Google’s advice is to:

Write high quality, relevant content.

The main thing to remember is that your website is for your audience. Knowing them, visualising them, having a niche and being apt are key.

As web designers we need customers that meet the following criteria:

• They have enough money to pay for us.
• There is a high chance we’ll satisfy them.
• The business relationship is of prime importance.

We also need to remember that:

Long tail keywords are our best chance of getting pages to rank. Once we’ve got visitors to our site we need to do all in our power to eep them there – use internal links, supply contact details, have a newsletter signup, links to products – whatever it takes.

Slides link: Your Website? It’s Not For You

Panel Discussion – WP REST API and the future of WordPress Development

Nate Wright, Tim Nash and Sergio Estevao chatted about the REST API and what it means for the future of WordPress.

I attended this as I’d missed the other REST API talks. Perhaps this was a mistake, as I didn’t really get what they were talking about. I just know that it’s the best thing since sliced bread. 😉

The WP REST API is being rolled out gradually into WordPress Core, and stage 1 is now implemented in WordPress 4.4.

Find out more about what the REST API integration means for WordPress.

Jason Agnew – Open Source: The Story of Herbert

The last talk of the day came from Jason. As it straddled both code and content. it was fitting that we all listened to his story.

Herbert was Jason’s attempt at building an open source WordPress framework for plugin development, named after the Family Guy character.

It started really well with 100 stars in GitHub on just 4 days.

5 days after the launch, it was obvious that Herbert was broken, and needed a complete rewrite.

He fixed it – with 2 weeks’ work.

Jason reflected on his learnings from the project.

What Jason learned from Herbert

• Don’t launch your project immediately – wait a fortnight
• Build a brand
• Document everything
• You can learn a lot from others

Benefits of working on an open source project

1. More credibility, which lead to work.
2. Critical feedback from others helped him to improve processes.
3. Freedom to explore which generated better motivation.

The good news is that now, Herbert is still alive and well, but needs a team to work on it.

Slides link: Open Source: The Story of Herbert

And that was it for the day, and we were off to the party.

Slide presentations

Slide presentations for all the talks are available to download from this link:

WordCamp Edinburgh: Sessions, speakers and slides

Videos of the talks will be on wordpress.tv soon!

Highs and Lows of WordCamp Edinburgh 2015

Highs

• Loved Edinburgh Wapuu! <3

  

• Food was lovely – haggis, neeps and tatties, yum!

  

• The venue was excellent. Skyscanner’s office is a joy to behold.

  

• Great crowd of people. I enjoyed catching up with Graham Armfield again (we first met at WordCamp Edinburgh 2012), and chatting to Valerie Adler and Ben Usher-Smith.

  

Lows

• Needed more swag – it was a bit thin on the ground. The Buff (a kind of multifunctional scarf) was a novel idea, but I missed having a t-shirt – though a jumper might have been better for the cold weather!
• I missed my opportunity to speak as I wasn’t feeling well. Though it has to be said, Graham’s accessibility demo benefited as he was able to cover more ground.

Enjoyed reading about WordCamp Edinburgh 2015?

Phew, you made it to the end!

Did you enjoy this post? Why not read about my other WordCamp experiences:

• WordCamp Bournemouth 2014
• WordCamp Birmingham 2015: Day 1
• WordCamp Birmingham 2015: Day 2
• WordCamp London 2015: Day 1
• WordCamp London 2015: Day 2