Responsive Day Out | Examples | Responsive Web Design

Responsive Day Out

Responsive Day out Screen shots
Responsive Day Out across four different breakpoints

View Responsive Day Out

The responsive day out website is amazing. It weighs in at a whopping 26 requests and a little over 350kb which is impressive when you realise they’ve got 8 speaker profile images.

There’s a request for a font, but nothing for any CSS files because they’ve built them all inline to avoid another HTTP request (this is advisable when looking at single page websites because caching the CSS file has no relevance… unless of course you’ll update your page more often that the CSS perhaps).

The “blurr the background of image” technique is used on the profile pictures meaning all up they weigh in under 10k per image.

Responsive Day Out Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Media Queries

@media all and (max-width: 24.99em) { }

@media all and (min-width: 25em) and (max-width: 41.99em) { }

@media all and (min-width: 42em) { }

@media all and (min-width: 60em) { }

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.