Are you working on a website design and don’t know which logo it will be using? Creating website templates for an online marketplace? You want to make sure the design is suitable for different logo shapes.

Photo by Tran Mau Tri Tam on Unsplash

Nothing is more frustrating for clients having a logo that is to small or to big on your beautiful crafted website design.

Define a logo window for your website design. A logo window has a maximum width and height. It’s a container in which most different logo shapes fits. A logo window helps making your website design beter.

I’ve been there myself.

I’ve created…

The hero module is widely used for websites. It usely consists of a large background image and a title. For this example I’ve also added a header with logo and menu button and two buttons for some call to action.

With Flexbox and the vh unit you can create a flexible hero module with efficient coding.

Browser support for Flexbox and the vh unit is great. You can read about browser support (and fallbacks) at the end of this article.

Step 1. The HTML structure

Let’s first start with the HTML. If this is overwhelming, don’t fear, I’ll go through it step by step.


Since the cool boys and girls are talking a lot about the new CSS Grid specification lately, it’s time to dig into this subject myself. For me, the best way by learning this, is: 1. choose a real world problem and 2. write about it in a post. The first is done and the second are you reading right now.

Please note, this is not a complete guide to CSS Grid. Others have already written about it. I’ve included references after this post. Please, also check the browser support of CSS Grid. …

These new attributes are available for some time now. However, I didn’t manage to understand it fully. There are great articles explaining this new syntax. But I couldn’t wrap my head around it. And especially, I missed in those articles how one could apply srcset and sizes to real world problems.

So, that’s why I wrote this article about srcset and sizes. It comes with an example of a common website layout: a page with sidebar. I hope it will help you better understand srcset and sizes and how to apply it to your website projects.

Why using srcset and sizes?

Let’s start with the…

Wouter van der Zee

web designer, teacher, introvert, morningness person, less is more, loves details, basketballer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store