It’s an honor for me to be here presenting this topic to you: the newly developed and powerful web design tool & idea, the responsive design.

The most content I’ll cover today is based on the slides, which I picked up from the Internet. The download url is also for ppt and keynote.

Since the slides doesn’t contain much technic details, I’ll introduce some useful tools & websites for your reference.

And also a general introduce following for you.

What is it?

The name was first introduced by ETHAN MARCOTTE in his famous blog Responsive Web Design. However the idea comes from even earlier the year of 2000, when the blog A Dao of Web Design was addressed.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things

What’s the problem nowadays?

  • Different Platform:
    • Windows
    • Mac
    • Linux
    • iOS
    • Android
    • WP 7
    • WebOS
    • Chrome OS
  • Plenty of devices
  • Multiple resolutions
  • Landscape & portrait
  • Smart devices increasing quickly.
  • Cloud Computing, browser is the future

The Responsive Web Design

  • No more sub domains
  • No more iPhone-special page
  • One page for all devices

How to do it

  • Media query
  • Fluid grid: using percetage length
  • Flex box


  • Less working
  • No more device-special sub-domain
  • Adaptive many kinds of devices


  • Bandwidth limitation
  • Small memory & slow CPU
  • Download useless resources
  • Image size


  • Design for mobile first,pc as an extend
  • Use a fluid grid
  • Modular
  • No iframe
  • Fluid img: 100% width or max-width,so does videos


Reference & Recommends