DEV Community


Posted on

Learning About: Building Responsive Websites

I'm currently learning about designing and coding responsive websites.

To get a good understanding of what a responsive website is, it's pretty important to understand what a responsive website isn't. Or, in other words, it's important to understand what other types of websites exist and that we interact with.

3 types of non-responsive websites:

  1. Static:
    These websites are designed for desktops and desktops only, and are built with a fixed width. We want to avoid building these as much as possible!

  2. Fluid:
    These websites are, well, fluid. All websites are fluid if you don't specify a width, actually. Fluid sites work on all devices and if widths are specified, they are done so in percentages as opposed to pixels. The thing to note here is that the layout never changes.

  3. Adaptive:
    Adaptive sites, you guessed it, adapt to the width of their device. The hitch? Widths have to be specified for EVERY. SINGLE. DEVICE. Which means that you need different stylesheets for EVERY. SINGLE. DEVICE.

Responsive Websites:

  • Are a fabulous combination of easily maintained fluid websites with user optimized adaptive websites.

  • Combine the ability to specify widths in percentages and also declare minimum widths in pixels.

  • Use media queries to specify sizes, and can coexist in the same stylesheet. SCORE!

Next up: Media Queries

Top comments (0)