Weekly Recap

Hello everyone, feeling good today? You should, it’s Weekly Recap day! There was actually plenty of things going on the past week. Julia Ann Horvath talking about why she had to leave GitHub, an indiegogo campaign for implementing picture in Blink and much more. Enjoy!

.widget:media(max-width: 30em) {
    /* styles */
}

Weekly Recap

Hey fellow developers and who else might enjoy these lists. Welcome!
The feedback for the Weekly Recap has been great so far. That makes me really happy and keeps me going. This week is a particular good one, I think. That said, let’s not waste any more time and get right into it. Enjoy!

  • Device-Agnostic
    Building and designing websites these days is about more than just a fluid grid. There are so many things to consider which add up to really good web design and development. Screen sizes, touch capabilities, old browsers, slow connection speeds and more.

  • Responsive Web Design – Defining The Damn Thing
    Another attempt at trying to define Responsive Webdesign – by Mark Boulton.

  • Web 25
    This week the Web turned 25, isn’t that awesome? Happy Internet!

  • CSS-Tricks Redesign
    Chris Coyier redesigned the popular CSS-Tricks. He maintains the style of the site and takes it a step further. Responsive as we love it.

  • Multiline placeholder text
    Currently only working in webkit prefix supporting browsers, but a very clever idea.

  • The WhiteHat Aviatorâ„¢ Web Browser
    If you are very concerned about security and think your browser isn’t secure enough, Aviator might be for you.

  • Web Font Trends
    A nice overview of currently popular fonts on the web curated by Jenn Lukas.

  • Dedesign the Web
    A simple game in which you need to guess the website by only looking at a wireframe. I got 6 out of 12 right. Not very good, I guess.

  • Fluidity
    As the author of this site says, the web is almost 100% responsive out of the box. These 107 bytes of CSS fix the ‚almost‘ part. Go have a look at the code.

  • Sublime Text 3 is not dead
    Although I’m currently using Atom to see what it’s capable of, this is very good news.

  • Responsive Interview with Harry Roberts
    Interview with CSSWizard Harry Roberts on all things responsive.

  • Interview with Bryan Jones, creator of CodeKit
    Interview with Bryan Jones about CodeKit 2 and how it all started.

  • Why Mozilla’s mozjpeg project is a big deal
    You might have heard of Mozilla’s mozjpeg project and wondered why they don’t put all of their efforts into webp, here is why mozjpeg is actually a pretty awesome way to go.

New dorothee-schumacher.com

The last project I was part of at superReal was the new dorothee-schumacher.com for which I helped build the responsive Frontend. The site is now online and you can have a look at it. I really like the end result and overall the whole project run very smooth.

Screenshot 2014-02-14 09.50.02 Screenshot 2014-02-14 09.50.10

Weekly Recap

Hey there, it’s time for some awesome web development links. This week is very heavy on CSS and performance. Enjoy!

Weekly Recap

This week I’ve got a lot of links to share with you. So let’s get started:

  • The first year as a themeforest author
    Very interesting article on selling themes on ThemeForest. Sounds fun, even though the earnings aren’t that much, considering they need to suffice for two people.

Avoid loading unnecessary CSS background images

While working on a responsive website the question came up whether CSS background images are being loaded by the browser if the element they are applied to is set to display: none;

My initial reaction was that I thought they will be loaded even though they aren’t rendered by the browser. After creating a test case on CodePen (see the code below), I was proven right – sadly. All CSS background images will be loaded by the browser no matter if they are rendered on the page or not.

BUT this isn’t true for Firefox, which is much smarter and always only loads the images that are actually rendered.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  background: url(s.gif);
  
  @media (min-width: 499px) {
    display: none;
  }
}

.box--m {
  display: none;
  background: url(m.gif);
  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
  }
}

.box--l {
  display: none;
  background: url(l.gif);

  @media (min-width: 800px) {
    display: block;
  }
}

Test it yourself with this CodePen.
Let’s have a look at what we can do to avoid loading unnecessary CSS background-images.

Instead of creating three different elements and using display: none; to hide them you can just change the background image according to media queries. This will only load the image that is actually displayed.

<div class="box box--s-m-l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s-m-l {
  margin-bottom: 40px;
  background: url(s.gif);
  
  @media (min-width: 500px) {
    background: url(m.gif);
  }
  
  @media (min-width: 800px) {
    background: url(l.gif);
  }
}

CodePen Testcase.

In this special case this will work, but let’s say you have three boxes with different content and different background images and want to show either one according to viewport size, just using display: none; won’t do the trick. That’s sad, but it’s the way it is, at least for now.

What you can do is set all boxes to display: none; and only when the media query applies show the box and set the background image. This way you only load the image you are actually showing and you can have different boxes.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  display: none;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  @media (max-width: 499px) {
    display: block;
    background: url(s.gif);
  }
}

.box--m {  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
    background: url(m.gif);
  }
}

.box--l {
  @media (min-width: 800px) {
    display: block;
    background: url(l.gif);
  }
}

Try it with this CodePen.

DEYK.com Update

As you might know, last year I worked at superReal, an agency for mostly fashion e-commerce sites. Not much of what I did there can be found online at this point, but I just saw that two things are published that I built over the last few weeks in December.

I’ve made a new partly responsive homepage for DEYK.com as well as a new fullscreen slider. Because there wasn’t much to see from me in the past I thought I’d share this one with you.

Basecamp for mobile

Jason Z. for 37signals:

Today we’re announcing mobile web because it’s the right thing to do. Devices and platforms will come and go, but the web browser is here to stay. Does this mean there will never be native apps? Of course not, this isn’t our final word on mobile.

A few days ago I saw the mobile version of Basecamp on my iPhone for the first time and was really impressed.
Everything fits and it’s really fast – perfect for looking up something on the go while riding the subway.

Today the guys are announcing it officially and they even made their whole Basecamp Project public so that you can see how they’re using their own product.

The mobile Basecamp isn’t a responsive design, they build it completely new and while I’m a big advocate of responsive websites I think that was the right call because it makes the experience so much faster. More on that topic in the linked announcement post by Jason.

Devs ponder iPhone 5 web design impact

Sebastian Green:

„It just goes to show, even the big companies will change things we all rely on. Responsive designs should not be dependent on certain screen dimensions. It is just more proof that designs need to be fluid in between their media query breakpoints so that they will work on any size of screen.“

Exactly. And that’s why I try to do as much as possible without setting too much breakpoints and just making a website fluid. And if I need to set a breakpoint it will follow my design and not any specific device. So my media query at QUOTE.fm for mobile devices doesn’t exactly match the iPhone’s screen size but is written to effect a wider range of devices.

Fluid Apple.com Homepage for iPhone 5

Apple made a subtle vertical responsive Design for the iPhone 5 homepage on apple.com. Nice.