• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

WP SuperGeek

WordPress Design, Help & Training

Main navigation

  • Portfolio
  • Services
  • Learn WordPress
  • About
  • Contact
  • Blog

Why you should care about responsive web design

responsive-design

Sure, web design and development might be a little over your head. Maybe you forked out for a designer to build your site, maybe you bought a premium theme or use a free one. Maybe you’ve heard this buzzword “responsive design” being bandied about here and there. But what has it got to do with you?

Well, the short answer is: a lot. But let’s start at the beginning.

What is responsive design?

Basically, the idea is that your website design responds to the visitor’s screen size, so their experience is optimised no matter if they’re viewing on a high-definition display, a smartphone, or a tablet.

Unlike using a plugin to make your site more friendly to mobile visitors, responsive design allows you to have full control over what the user sees. You can set scale and position for images, text blocks, sidebars and navigation items.

How do you do it?

Firstly, check if your site is already responsive. If you’re using WordPress, there are many responsive themes out there already.

If you aren’t using a responsive theme, then hold on to your hats, I’m about to get technical! You’ll need to add a few lines of code to your theme’s CSS file, which many normal website owners aren’t comfortable with. But if you are comfortable with tinkering around, responsive designs use media queries, to determine the visitor’s device screen size and make the appropriate CSS changes. Most modern browsers support media queries.

You’ll also need to look into an adaptive grid system, especially specifying sizes in percentages, rather than pixels, to make everything fluid. If that’s too techy for you, you can certainly enlist the help of a web designer to make your site responsive.

What does it look like?

Well, the WordPress.org website is, of course, itself responsive. Notice how all the elements scale down and reposition themselves so the site is still usable and readable at various sizes? Cool, huh?

Another good example is the Food Sense website. Head over there and try resizing the window to see the responsive goodness.

Why should I care?

Can you imagine the frustration a visitor experiences when they navigate to your website on a mobile browser, only to have the page take a long time to load, the text unreadably teeny tiny, and having to scroll and zoom in and out to get where they’re going? That visitor is probably not going to stick around long.

In contrast, a responsive design will give your visitors a slick and customised experience, that will highlight the most important elements of your site. That translates to more time spent on your site, and more potential customers!

Extra resources

For more inspiration and examples of sites that are using responsive design, head over to one of these galleries:

  • Media Queries
  • Web Design Ledger
  • Web Designer Depot

This post originally appeared on Grassroots Internet Strategy.

Share this:

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Email
  • More
  • Print

More on WP SuperGeek:

14 great reasons to keep your web design simple How to use cool and interesting fonts on your website How to work with the media library in WordPress How to create responsive tables in WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Learn WordPress

WordPress Design

Categories

  • Ask a SuperGeek
  • Blogging
  • Coding
  • Design
  • General web help
  • Inspiration
  • Maintenance
  • Software
  • Troubleshooting
  • Uncategorized
  • WordCamp
  • WordPress Plugins

Search

Footer

Connect

  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
WordCamp US Speaker

Latest blog posts

Ask a SuperGeek: Understanding domain names and web hosting

How Dubsado has changed the way I do business

How to create responsive tables in WordPress

Ask a SuperGeek: How to redesign your WordPress website with no downtime

Why the Procreate app is the coolest thing ever

Search

Copyright © 2023 · Digital Pro on Genesis Framework · WordPress · Log in