Learn what makes a blog responsive.
What does “Responsive” in the WordPress.com Theme Showcase mean? Let’s find out.
Responsive design is a term that’s been tossed around in the design community for a while now, but you might not be familiar with it yourself. Let’s talk about where the term comes from, and how it relates to your blog. First, here’s a definition that’s easy to remember:
A responsive theme is designed to adjust itself to any screen size.
Whether being viewed on a smartphone, a desktop computer, or somewhere in between, a responsive theme will preserve its look and feel while optimizing its content and menus for the display. Responsive themes are a great theme choice nowadays, because they ensure that no matter how your visitors access your site, it’ll look fantastic. But where’d they come from in the first place?
The history of responsive design
Let’s take a trip back in time to the mid-2000s. We all usually “surfed the web” from desktop and laptop computers. A lucky few of us had giant displays, but for the most part our screens were all around the same size. Web designers typically designed sites that were somewhere between 800 pixels and 1024 pixels wide. That way, we could be fairly certain our sites would fit on people’s monitors nicely.
Fast forward a few years. After smartphones became common, people started to browse the web on small screens too. Unfortunately, those larger websites from before didn’t look great on our phones. This was a bit of a challenge for web designers, but we had a solution: two separate websites! We’d design our usual version for desktop screens, and a smaller version for mobile devices. This was a bit of extra work, but it was worth it to deliver fast, beautiful websites to everyone.
That approach worked for a while, but the number of different size screens exploded between 2010 and today. Now we have small phones, large phones, tablets, laptops of varying sizes, desktop computers with giant screens, and internet-connected TVs with even bigger screens. We clearly can’t design a separate website for each one, so web designers came up with a new approach: design a single, smarter website that changes its layout in response to the screen size. That’s the core idea of responsive design.
Ethan Marcotte’s article “Responsive Web Design” is widely recognized as the de facto manifesto for responsive design. Give it a read if you’re interested in the details of how this works!
This was a breakthrough, but it was also a fundamental change to how websites were designed. Web designers had to stop relying on hard specifications for width and height of page elements. Websites needed to be fluid and flexible. Content would need to flow differently depending on the screen width: three columns of text on a larger screen might need to drop down to one on a tiny screen. Images had to scale up and down as needed, and paragraphs learned to adjust to available space. It was a lot more complicated, but the payoff was great for website visitors.
Responsive design on WordPress.com
When you’re in the Customizer, you can preview how your site will look at various sizes by tapping the desktop, tablet, and smartphone icons on the lower left.
Since its emergence, responsive design has become a standard practice on the web. For example, your WordPress.com dashboard and The Daily Post are both fully responsive. Try visiting them on different devices and take note of how the layout adapts.
In addition, all new themes on WordPress.com are designed responsively, ensuring your site will look great everywhere.
You can view our responsive themes in the Theme Showcase. What’s your favorite responsive theme? Feel free to share in the comments.