Responsive design

How does responsive design adapt to different screen sizes?

A responsive website sets rules in advance, like “if the screen is narrower than this, arrange things this way,” and applies the rule that fits each customer’s screen width. The widths where these rules change are called “breakpoints.”

For example, three photos that sit side by side in one row on a computer stack one above the other on a phone. Photos and text boxes aren’t a fixed size; they’re built to grow and shrink with the screen.

At the very top of the website’s code goes one line (the viewport setting) that says “fit this page to the device width.” Without that line, phones show a shrunken version of the computer layout.

Breakpoints are based on screen width, not specific device names. So there’s no need to adjust every time a new phone comes out; even on a screen size it has never seen, the layout follows the closest rule and arranges itself naturally.

What’s the difference between responsive, adaptive and mobile-only sites?

With responsive design, one website adapts to every screen, while adaptive and mobile-only sites show separate versions built for each screen. Google recommends responsive design because it’s easy to build and easy to maintain.

Google reads and ranks sites based on their mobile content. If a separate mobile site has less content, anything that exists only on the desktop version can lose out in search.

If you already use a mobile-only site like m.yourbusiness.kr, merge it into a responsive site when you rebuild, and set the old m. address to redirect automatically to the new one. That way customers coming in through old links won’t get lost.

What should be different on a phone screen?

On a phone, you don’t just shrink the page; you rearrange it so it’s easy to use with one thumb. Design it assuming customers are standing, using one hand, and looking for your phone number, location and prices in a short time.

For example, a hair salon’s price list can be a wide table on a computer, but on a phone it should be split into cards by service so customers don’t have to scroll sideways. A craft workshop’s class schedule is also easier to read on a phone as a list of dates than as a calendar.

You also need to rethink the order things appear in on a phone. “About us” and the “Book” button that sit side by side on a computer get stacked on a phone, so put the information customers look for first at the top.

For a cafe or restaurant, opening hours, whether you’re closed today and a directions button should be near the top of the phone’s first screen. Customers who pull out their phone near your place look for these three things first.

• Body text large enough to read without zooming
• Buttons and links big enough and spaced enough to tap with a finger (around 48 pixels wide and tall is usually recommended)
• Phone numbers that dial when tapped, and addresses that open a map app when tapped
• No big pop-ups covering the first screen
• Text as real text, not baked into photos (it shrinks and becomes unreadable on phones)
• Photos resized to fit phone screens so they load fast

Can I make my current website responsive?

You can, but with an old website it’s often better to rebuild than to fix it. A website built with fixed column widths for computer screens needs its layout framework rebuilt from the ground up, so the work ends up being almost as big as building a new site.

First, check what state your website is in. If the text shrinks so small on a phone that you have to pinch to zoom, it’s probably not responsive. If only some screens scroll sideways, fixing just those parts may be enough.

If you rebuild, take the chance to reorganize your content with phone screens in mind. For example, replacing an old restaurant website’s menu image with a text menu makes it easier to read on phones and lets search engines pick up your menu item names.

How do I check whether my website is responsive?

The surest way is to open it on several real phones and do exactly what a customer would do. Before checking whether it looks nice, check that calling, booking and getting directions work without a hitch.

If you find something odd, take a screenshot and note which device and browser you used before sending it to your provider. The same problem can look different on each device, so this information greatly cuts the time it takes to fix.

1. 01Scroll from the first screen to the very bottom on your own phone and check that nothing scrolls sideways.
2. 02Turn your phone sideways and check once more.
3. 03Open it on other types of phones (iPhone and Galaxy) and on a tablet.
4. 04On a computer, slowly narrow the browser window and check that the layout changes smoothly.
5. 05Tap the Call, Open map and Book buttons yourself.
6. 06Turn off Wi-Fi, open the site on mobile data and check that photos don’t load too slowly.

What do people often miss when ordering a responsive website?

The most common mistake is approving after seeing only the desktop design draft. If most of your customers browse on phones, getting the mobile design draft first and giving feedback on it brings you closer to the real result.

Many owners also put their menu or event notice in as one big image. On phones the text gets too small to read, and search engines can’t read text inside images well either.

Problems that only show up on phones, like text size or button placement, are often noticed first by customers after launch. Ask for time in the pre-launch check for you and your staff to go all the way through a booking on a few of your own phones.

• Will you also show me a mobile design draft?
• How do price lists, tables and schedules change on phones?
• Are photos resized to fit the screen when uploaded?
• Which devices do you test on before launch?