Responsive Web
Responsive Web Design
What is responsive web design?
- Automatically rearranges to fit the screen size
- Looks good on desktop and mobile alike
- Essential in the mobile era
Going responsive reduces the number of sites you have to manage to one. Companies that ran a desktop site and a separate m.domain have to do the work twice to change a single banner, and sometimes fix only one side, leaving prices displayed differently. In practice, having a single address (URL) matters even more. A link shared on KakaoTalk opens the same way on a desktop, and search engines concentrate their ranking signals on one page. Cutting maintenance effort and ad link management in half is the real reason to adopt it.
The reference points are screen transition points, known as breakpoints. In practice, teams usually define three ranges: mobile up to 480px, tablet 768 to 1024px, and desktop 1200px and above. Don’t confuse this with adaptive design, which swaps in a few fixed layouts prepared in advance for each screen size. Responsive design, by contrast, stretches and shrinks smoothly at values in between. Also, if the viewport meta tag is missing, no matter how well the site is built, mobile will show the desktop page simply scaled down.
At the build stage, the key question is how much testing is enough. For visitors in Korea, checking on real devices such as the last 2 to 3 iPhone generations, a budget Galaxy and an iPad catches most problems. Do a first pass with the responsive mode in your browser’s developer tools, then tap through only the revenue-critical screens, such as payment or inquiry forms, on actual devices. When you hand screens over to AI, just saying 'make it responsive' is not enough; specifying the criteria, such as 'split it into three ranges: 480/768/1200px', gives more stable results.
The most common misconception is that 'responsive means mobile optimization is done.' If you serve a 2MB desktop image as-is, the screen shrinks but loading stays slow, and on a mobile network visitors leave if a page takes more than 5 seconds. Wide tables such as product spec tables become hard to read once they collapse into one column and force horizontal scrolling, so on mobile they should be redesigned as collapsible cards. It is also common to see button spacing set for a mouse, so fingers keep hitting the neighboring button. Switching to designing for mobile first, then expanding to desktop greatly reduces these problems.
Seungtae ParkHands-on AX instructor who teaches AI business development and marketing automation by building real systems
John KimInstructor John Kim, CEO of Nanum Consulting and author of “B2B Marketing Design”Web designer Ethan Marcotte introduced and popularized the concept and the name 'Responsive Web Design' in a 2010 article.
Consider a hypothetical case. Company A, which makes industrial valves in Gyeongnam, has 48 employees and annual revenue of KRW 22 billion (≈ US$16,459,700). It had used a website built in 2015 for eight years, and even though 71% of its traffic came from mobile, pages appeared as a shrunken desktop screen. The redesign discussion began when an overseas buyer emailed to say 'the spec table is unreadable.'
- When Kim, a manager on the marketing team, pulled the traffic stats, average mobile time on site was 19 seconds, and only 0.4% of visitors reached the inquiry form. Kim told the CEO, 'It isn’t that inquiries aren’t coming in. They can’t get through.'
- Outsourcing quotes came in at KRW 28 million (≈ US$20,900) for separate desktop and mobile builds versus KRW 19 million (≈ US$14,200) for a single responsive build. Park, a deputy general manager on the operations team, said, 'I can’t keep doing the work twice just to change one banner,' so they went with responsive.
- They set breakpoints at three ranges (480, 768 and 1200px) and rebuilt the 12-item valve spec table as collapsible cards on mobile. Product photos are now served as a separate 400KB mobile version.
- Two days before launch, Kim tapped through the inquiry form on a Galaxy, an iPhone and the office iPad. Fingers kept hitting the neighboring button instead of 'Request a Quote', so Kim increased that button’s tap area to 48px in height.
- Three months after the redesign, average mobile time on site rose from 19 seconds to 1 minute 12 seconds, and monthly online inquiries grew from 6 to 23. The time to update a banner or notice also dropped from 40 to 15 minutes per task.