Responsive Website Design
Responsive Web Design (RWD) is a way of building websites to scale to the size of each individual visitor’s screen size.
In the past, with desktop and laptop screens, websites were typically coded to a specified width in pixels – often 960px wide, sometimes wider, sometimes narrower.
Today, websites are viewed using a variety of devices: handheld web browsers (phones, personal gaming machines, music players), tablets (e.g. Apple iPad), typical-size screens (e.g. laptop), and ultra-large screens (e.g. HDTVs).
RWD allows the web page’s content to scale narrower to fit smaller-than-normal screen sizes. Sometimes, RWD enables scaling to wider-than-normal screen sizes as well.
Why Care about Responsive Web Design?
RWD enables the same site content to be displayed in a visually-appealing way on any size screen. No “mobile version” or “app” is required. The content isn’t different, it’s just “taller” on a smaller screen than on a wider screen.
RWD is more difficult to setup than a website that is a static size, but, in the long run, it’s less complicated than dedicating time and resources to a separate mobile version or mobile app.
At its core, it’s a way for websites to avoid the dreaded horizontal scroll bar and text too small to read, regardless of the viewing device.
The problem with building Responsive Websites
Tablets, like the iPad, provide an enjoyable web browsing experience. However, there are dozens of common screen sizes – 2 for the iPad, portrait and landscape.
How does a developer build a responsive web design without having to own every screen size that exists?
How to Test Your Website for Responsive Design
Step 1 – Build your website locally
Conventinal wisdom: make changes in a development environment, not a live website.
When building websites on your personal computer, you can use the free software called XAMPP for Windows or MAMPP for Mac.
For building WordPress websites locally, I recommend developing with ServerPress’ DesktopServer.
Step 2 – Test your website locally (development)
If you own more than 1 screen size (e.g. desktop, tablet, phone), you can at least test those devices before publishing the site. How? With Adobe Shadow. (UPDATE: Adobe Shadow doesn’t seem to work with DesktopServer’s .dev domains, but it does work with “localhost” setups as seen in the video below. DesktopServer is planning on coming out with it’s own local testing solution.)
- Install Adobe Shadow on your main computer (e.g. desktop computer running ServerPress DesktopServer).
- Install Adobe Shadow Google Chrome extension.
- Pair your other devices (apps available for Apple and Android) with the information provided by the Chrome extension.
- Navigate to your development website (e.g. example.dev – yes, .dev with ServerPress DesktopServer) in Google Chrome.
- Open Adobe Shadow app to view that Chrome tab.
- Tweak and test again as desired until the site is ready to be published live.
Step 3 – Test again once published
Using the free Responsinator (read their About to get the Bookmarklet) service, you can view each unique URL in a variety of devices. At the time of this writing, there are 10 height/width combinations (phones and tablets) for your browsing pleasure. Hopefully everything looks good. If not, dig into the code, make those tweaks, and get it to where you’re pleased.
Step 4 – Pixel by Pixel
After the basics are covered by Responsinator (above), plug your website into responsivepx.com to test pixel-by-pixel.
Step 5 – Bask in the glory
Responsive Web Design Resources
This is far from a comprehensive list. This section is more like the junk drawer area – everything’s important but it’s not organized…
- WordPress Responsive Plugin
- WordPress ‘flexible-width’ tagged themes
- WordPress Responsive Design tutorial
- Media Queries how-to
- MediaQueri.es showcase
- Frameless Grid design
- Twitter Bootstrap framework/components
Last but not least, the video for Adobe Shadow (just because it’s so cool)…