On 19 January, I spoke at the WordPress London meetup. The talk was a primer on Responsive Web Design, a topic I have a strong interest in (some might say an evangelical curiosity). The presentation briefly explains the basic philosophy of responsive design, demonstrates how Automattic has applied it to WordPress and offers suggestions to WordPress bloggers and developers ways of making their site responsive.

Video of the event is found on the website of Skills Matter, the organisation gracious enough to host the event.

The slide deck as shown, followed by an ordered list of my specific notes:

Slide 2
The state of the web today.
Designers and developers have spent the last decade fighting for the desktop.
We reach a consensus. 1024×768 was a safe resolution.
Mobile web is born, not much happens, and we continue to follow the same patterns.

Slide 3
We continue to create pixel-perfect layouts for a fixed canvas.
Individual layouts for every device.
We have widescreen television, desktop, tablet, mobile.
If mobile is acknowledged, it is commonly sand-boxed and dependent on user agent.

Slide 4
Designs are cut and cropped.
Performance issues.
No content hierarchy.

Slide 7
If you do have a mobile solution:
How many devices do you cater a service or product to?
How many experiences will a user have?
What assumptions and compromises are made to this end?

Slide 8
The idea is instead:
Accept “the ebb and flow of things”.
Websites cannot be pixel-perfect.
Presentation must change from desktop to tablet, tablet to smartphone.
It is context that plays an essential role in the user experience.

Slide 9
Ethan Marcotte.
Responsive web design is: Flexible grid, flexible images, media queries.
Consistent and focused experience.

Slide 10
Use percentages, not pixels.
Create a fluid layout from a modular grid.
Set minimum and maximum widths.
The grid must resize as the browser changes.

Slide 15
Scalable images and video.

Slide 16
Scale to the design, but never above original size.

Slide 17
We’ve had media types (screen, projector, print, handheld)
CSS3 provides better ways of testing.
Media queries look at physical characteristics.
Browser viewport, device screen size, device orientation.

Slide 19
The foundation of responsive design.
Create a single site and single experience that targets the browser, not the device.
Scales to fit all device sizes and orientations.

Slide 25
Responsive web design is not the first and last solution.
There are valid reasons to create tailored mobile sites and native applications.
Bespoke experience, advanced device features, hardware access, distribution, curated content.
Responsive design fills in the gaps.

Slide 32
Beyond presentation. Impact on site performance and user experience.

Slide 35
What can you do to make your site responsive?

Slide 36
Start new. Making a site responsive retroactively is difficult.
Focus on content. Mobile first.

Slide 37
Start small.

Slide 38
Use media queries to enhance and expand the design as screen real estate grows.
Perfect example of progressive enhancement.
Set queries at common smartphone sizes, tablet, desktop.

Slide 39
Javascript for conditional loading: sidebar content, social media share buttons.
Avoids overloading mobile users with supplementary material.
This is important. Forces you to focus on necessary content.
What do your site visitors really need?

Slide 40
matchMedia.
Set breakpoint in a variable.
Add a listener to the variable.
Set functions on load or resize.

Slide 42
No shortage of good themes.
Find themes that focus on mobile first.