Beginner’s Guide to Web Development

View All Chapters
Badge building responsive websites

Building Responsive Websites

2 minute read

Web designers and developers used to just make different versions of websites for different devices, but now that sites are viewable on desktop, laptop, smartphone, and tablet screens, there needs to be a way to build a single website that can display appropriately on each device. Enter responsive websites.

Here’s what that looks like on alistapart.com:

Mobile and desktop sizes of A List Apart

See how everything in the desktop browser moves around to fit on a smartphone? That’s the main idea behind responsive web design, and there are a lot of advantages that come with it.

Consistency

A single, responsive website offers people a consistent experience across all their devices. Navigation and features may look different on different-sized screens, but they’re easy to recognize and offer the same functionality. That means if someone usually uses a site on their laptop, they won’t have to hunt things down if they need to do something on their phone.

The URLs are the same, too, so any shared links won’t take people to the “desktop version” on mobile or the “mobile version” on desktop.

Build Once, Not Twice

Responsive web design doesn’t just make things easy to use and understand for users — it’s also better for web designers and developers. Creating a responsive website means coordinating design and development all at once, rather than separately for different desktop and mobile sites. It’s much simpler to design and develop one website than two.

Responsive web design has become wildly popular across today’s websites. The next time you’re browsing the web, try stretching your browser back and forth on different sites to see if they’re responsive. Finding a site that isn’t responsive is a lot harder than you’d think.