Last update: 07-02-2025

This is a discussion and collection of links about web design which tries to give some guidelines. It is in no way meant to be complete.

A responsive layout in website design means that the website automatically adjusts its layout, images, and content based on the screen size and device being used (desktop, tablet, or smartphone). This ensures a consistent and user-friendly experience across different devices.

Key Features of a Responsive Layout:

• Flexible Grid System – Uses relative units like percentages (%) instead of fixed pixels (px).
• Media Queries – CSS rules that adapt styles based on screen width.
• Fluid Images & Media – Images resize automatically (max-width: 100%).
• Mobile-First Approach – Designs prioritize mobile usability first and scale up for larger screens.
• Touch-Friendly Elements – Buttons, links, and interactive elements are easy to tap on mobile devices.

Examples of Responsive Design:

• Mobile View: A stacked layout with a hamburger menu.
• Desktop View: A wider, multi-column layout with a full navigation bar.

Read more here for an in-depth discussion about this, with best practices & examples.

More articles:

• The fundamentals of responsive website design
• A Guide on Layout Types in Web Design

Do: Test your site on your mobile, on other computers, at home etc.

What’s good? … and what’s not?

• 

  Content is king! [readable, clear, to-the-point]
• Texts: quick-scan & in-depth [texts should be very short, but if necessary, provide more info]
• Navigation [easy to navigate, can we find what we want… and expect?]
• Graphics & colors
• Technical aspects: valid HTML, multiple browsers… (test!)

Articles:

• About.com: Webdesign basics
• Learn good web design by looking at bad web design: webpagesthatsuck.com (this is becoming old)

Composition

Look at the images below. Which one do you think looks the best? Why?

Now look again, with added sections, 3 rows and 3 columns:

(thanks to dolcepics.com)

When to compose an image, page, or layout, try to follow this “Rule of thirds” or “Divine proportion” (1.62).

Example for a webpage:

Articles:

• See Pinterest examples
• Understanding the rule of thirds in web design
• Design rules you should never break

Color

See w3schools color tutorial, use palette of matching sets of colors.
Use tools like the W3schools ColorPicker, ColorZilla (it has a color picker, gradient generator and more).

Design resources

• Css-tricks: design resource sites

Remember to:
Respect the rights of owners of media*
Check copyrights/license/terms of use of (stock) media*

* “Media”: texts, quotes, templates, scripts, plugins, fonts, photos, images, icons, pictures, animations, video’s…