frontend

Gmail I love you, but you’re bringing me down.

Dear Gmail, Why must you not allow more than a dozen fonts into your existence? My designers and I would love to use something different than (sans serif, serif, comic sans ms, courier new, garamound, Georgia, Tahoma, trebuchet ms, verdana). I am forced to embed text into images that never really shows up as clean as we would like.

Why oh why Gmail, do you thread any email with the same subject line? Which isn’t the worst thing in the world but what is, is that you then insist on coloring the duplicate font purple, specifically #500050 . Plus, you impose a class on the text called “im”. I am then forced to declare color value for my font not just in the containing table but also in every cell where font exists.

Why did you not allow style tags in the body nor the head? Then miraculously allow it with out notifying anyone or documenting it, forcing people to stumble upon this by happenstance? What worse is that you strip classes and ids on everything forcing people to chain table+tr+td+table+tr+td+table+tr+td+div on and on and on as deep as their nested tables go, in order to allow some kind of fluid styling to occur. You won’t even allow @import, @media or @font-face among other things that would allow for amazing email designs to occur.

 

P.S. Apple you’re no saint.

Why must you automatically see any date, time, address or any combination there of, and impose an anchor tag around it therefore styling default bright blue and of course adding an underline? This really messes with the design and adds unwanted linking to occur. If I wanted it to link I would code it that way. In order to fix this I have to style for an anchor tag that isn’t there knowing that is will be placed there without my say so. I am not a prognosticator and do not want to start having to be in order to fix things you might do.

 

P.P.S Outlook you suck the most!

Practically nothing renders for you the way it does for either of the above. It doesn’t even look the same between your own versions i.e. 2010, 2011, 2013. You would think that within your own family you’d keep some kind of fluency…nope!

 

Can’t you all play together nicely and have some kind of U.N. type organization that will oversee and perhaps unify this email-coding world into one big happy family?


RTR & the Clown Car Technique for Adaptive Images

<!--h1 { margin-top: 40px; } h3 { margin-top: 35px; margin-bottom: 0px; } -->

A recent conversation between Design & Tech at Rent the Runway:

Design: We want to let the user decide which size images they see.

Tech: Great, we will use percentage widths for the images and they will stretch with the page.

Design: Ok, so what size images do you need?

Tech: As big as the largest view you would like us to support.

...first implementation...

Design: The detail in this image is terrible when the browser is small.

Tech: Yeah, browsers are just ok at resizing images.

Design: We have all of these great photos, professionally edited, can we pick one depending on the browser dimensions?

...second iteration...

Tech: Clown Car Technique FTW!

Clown Car Technique

Why We Care...

Clown Car Technique
Clown Car Technique

We started using the Clown Car Technique (h/t Estelle Weyl) recently when our crack team of designers came up with a new design for “shortlists” -- RTR-speak for a user-defined collection of dresses.

The idea was to give users the choice of which image sizes they'd prefer, while maintaining flexibility with all browser dimensions, and resizing. The clown car technique allowed us to implement the pages to the designer’s liking, while keeping network traffic down and maintaining high quality images.

Why You Should Care...

Many of the best APIs we like to code against, return sets of images of many sizes and shapes. You should use them all to provide the best user experience possible!

What You Should Know

The Smashing Magazine article will do the technique far better justice than I ever could, but if you would like to see it in action:

  1. open this Shortlist
  2. open your browser's developer tools
  3. go to the Network Tab (filter on Images)
  4. change the image size using the "VIEW" icons and monitor your network traffic

The "VIEW" choice updates the width of the image (nothing more), and the SVG -- the essence of the technique -- determines which image to display.

Questions?  Comments?  Tweet at us: @rtr_tech