Same URL, Different Look

Open a website you were viewing on your computer on your smartphone, and the layout is completely different. The menu turns into a hamburger icon (three lines), image sizes change, and text sizes differ. Why does the same URL look so different?

The answer is a technology called "responsive design."

How Responsive Design Works

Responsive design is a technology that automatically switches layouts based on screen width. It uses a CSS feature called "media queries" to set rules like "apply this style when the screen width is 768px or less."

  • Desktop (1024px and above): Three-column layout, sidebar present, large images
  • Tablet (768-1023px): Two-column layout, sidebar moves below the content
  • Smartphone (767px and below): Single-column layout, hamburger menu, images scale to fit screen width

The key point is that the HTML (page content) stays the same - only the CSS (styling rules) changes. The data sent from the server is identical; the browser adjusts the display based on screen size. This screen size information is also one of the data points used to create your browser fingerprint.

Before Responsive Design - The "Mobile Version" Era

Before responsive design became widespread (around 2010), many sites built separate "PC" and "mobile" versions.

  • www.example.com → PC version
  • m.example.com → Mobile version

Maintaining two separate sites was necessary, leading to frequent content inconsistencies and missed updates. When Google announced in 2012 that it "recommends responsive design," the approach of serving all devices from a single URL became mainstream. For a nostalgic look at how web design has evolved, see why old websites look terrible.

The Origin of the Hamburger Menu (☰)

The three-line menu icon (☰) commonly seen on smartphones is called the "hamburger menu." The name comes from the three lines resembling a hamburger's buns and patty.

This icon was actually first used in 1981 on the Xerox Star computer. Designer Norm Cox created it as "an icon that visually represents the contents of a menu," giving it over 40 years of history.

Since smartphone screens are narrow, there isn't enough space to display all menu items at all times. The hamburger menu is a space-saving solution that only expands the menu when tapped.

The "Mobile-First" Era

Today, approximately 60% of website traffic comes from smartphones. As a result, modern web design follows a "mobile-first" approach - designing for smartphones first, then expanding for desktop.

Google's search engine also uses "mobile-first indexing," evaluating sites based on their smartphone display. Sites that are hard to view on smartphones may see their search rankings drop. With smartphones now the primary way people browse the web, mobile privacy has become an increasingly important concern.

IP Check-san also uses responsive design, allowing you to comfortably check your IP address on both smartphones and computers.

Summary

The reason the same URL looks different on smartphones and computers is that CSS media queries switch the layout based on screen width. The hamburger menu is a 40-year veteran, born in 1981. Today, 60% of web traffic comes from smartphones, and mobile-first is the standard approach.

Related Terms in This Article

Browser The browser detects screen size and switches layouts based on CSS media queries. HTTPS Responsive design is a client-side technology. It doesn't affect server communication (HTTPS). IP Address The same IP address is displayed on both PC and smartphone. Only the CSS changes the appearance.