Rachel is a freelance web designer and writer specialising in mobile and responsive WordPress development. She's the author of 'Mobile WordPress Development', a comprehensive guide to making yourWordPress site mobile-friendly, published by Packt, and also author of 'WordPress Pushing the Limits', published by Wiley.

A few HTML elements don’t play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube. In this article, we’ll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport.

For those occasions when non-coders will be embedding video on your website and you don’t want to rely on them adding extra markup, we’ll also look at a solution that uses JavaScript instead of CSS.

Moving WordPress is a task that many people find daunting. The advice on the Codex, while comprehensive, gives you a myriad of options and doesn’t describe the process simply and in one place.

When I had to move a WordPress installation for the first time, I spent hours searching online for information on the various aspects of the process, and eventually wrote myself a checklist — which I still use.
So to save you the hassle, here’s a step-by-step guide to moving a WordPress website.

At the recent WordCamp Edinburgh, I took part in a panel discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that there isn’t a one-size-fits-all answer and that the best method depends on the needs of the website and the capabilities of the developer.

But if you're starting out building WordPress themes, or want to develop a system for building them more efficiently or robustly, how do you decide which approach to take? In this article I'll briefly describe how WordPress themes work, and then look at some of the different approaches to developing them, with tips on which approach might be most suitable depending on your site and your circumstances.

In case you missed it, WordPress release 3.4 included a very exciting new development - the theme customizer. This allows users to tweak theme settings using a WYSIWYG interface and customise a theme so it includes the colours, fonts, text and pretty much anything else they want.

The purists out there may be throwing their hands up in horror - a WYSIWYG interface! Letting users alter themes themselves! Surely that opens the floodgates for the creation of thousands of ugly, messy WordPress sites?

If you've had half an eye on the tech press over the last few weeks, you'll be aware of the update to iOS, or at least of its replacement of Google maps with the new iOS Maps app.

Stories of parks appearing where once there were roads, seas disappearing and more, abound. I'm not going to wade into the debate about whether or not Apple should have done this or whether the new app is an improvement or not, but instead I'm going to focus on the update to mobile Safari — and specifically, what it means for Web developers.

Most of us are pretty familiar with responsive Web design by now. Basically, it uses a combination of a fluid layout and media queries to alter the design and layout of a website to fit different screen sizes. There are other considerations, too. For example, a lot of work has been done on responsive images, ensuring not only that images fit in a small-screen layout, but that the files downloaded to mobile devices are smaller, too.

But mobile design isn’t just about layout and speed: it’s also about user experience. In this article, we’ll focus on one aspect of the user experience — navigation menus — and detail a few approaches to making them work better on mobile devices.

It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices.

In this article, we’ll look at how to use WordPress' built-in featured images capability to deliver different-sized image files to different devices. "Featured images," sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3.

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book →

Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book.

Meet SmashingConf San Francisco 2017, featuring front-end ingredients, UX recipes and nothing but practical beats from the hidden corners of the web. Only practical, real-life techniques and recipes you can learn from. Get your ticket now!