DAILY BEAST TUMBLRS

6:41 PM, October 29th, 2013

In lieu of a Grand Theory Of The Internet or What-It-All-Means statements that tend to accompany website rollouts, I’ll just say that we hope these changes make it even easier to discover and enjoy our original journalism.  The only goal is to make a simple experience that pleases our users and advertisers alike. (Yes, we believe it’s possible to do both at the same time. More on that in the future.) 

Yes, The Daily Beast’s homepage has a new look!

Read more on the change from our Chief Digital Officer Mike Dyer

5:19 PM, January 8th, 2013
newsbeastlabs:

Responsive Design - A Mobile Retrofit
A few weeks ago we launched our new mobile optimized design of thedailybeast.com, and we couldn’t be more excited! Go check it out if you haven’t already (if you’re not using a mobile device scroll to the bottom and click on “Mobile Site”). 
The challenge was to take our existing design and reorganize the content into a space less than 1/3 of the desktop size. In addition, we needed to account for a wide range of phone sizes, layouts (portrait/landscape) and resolutions (up to 300ppi). Based on the new design and requirements we decided to recreate all the markup and css for the entire site….10 weeks and 1,342 cups of coffee later we had ourselves a mobile site! Here are two features that we’re most excited about:
Responsive Design
Ethan Marcotte, who coined the term “Responsive Web Design”, describes 3 foundations as core to a responsive site:
Flexible Grid
Fluid Images
Media Queries
Instead of creating multiple versions of the site to fit multiple device sizes and resolutions we decided to use a responsive design approach by implementing a flexible grid system. This way our site will expand and contract to fit any width browser. For example, when your phone is turned from portrait to landscape, the site will respond by expanding to fit the screen. To produce this, we are using a 12-column flexible grid designed by Stephen Bau that is based on the great work by 960 Grid System (we love grids!). All columns widths are set as a percentage of the page rather than a fixed pixel width which allows the site to expand or contract to any size.
The easiest part of the design was making all the images “fluid” by setting their width to 100%. Now images will expand/contract to fill the size of their parent element. As for media queries, new in css3, we are currently modifying the navigation so that each element is spaced properly based on site width. In the future, we hope to implement tablet and desktop media queries for a seamless site experience across all devices.
Icon Fonts
With the new responsive site we decided to abandon the use of sprites and most icon images in our css and have opted for creating our own icon font instead. Now when you visit the mobile site, all the icons are actually a part of our custom font, not jpgs or pngs. The browser references all icon images from a small font file (~30kb). One of the benefits is that your browser will not be downloading lots of icon images, taking up device memory, bandwidth and adding to the time it takes each page to download.
An additional benefit of using a font is also so that we don’t have to recut new images if designs change and we need the image slightly bigger, smaller or a different color. Now we can change each instance of the icon with css adjusting it accordingly. Lastly, icon images will never look blurry since they are now vector data (like an .svg) instead of raster (.jpg). Here’s an example of why icon fonts are awesome. You can make your own custom fonts over at icomoon.io or download the icomoon chrome extension and work on your fonts offline.
Shout out to the entire development and design teams who created lots of really great features!
— Lynn Maharas, Front End Developer

Go check out our mobile site! 

newsbeastlabs:

Responsive Design - A Mobile Retrofit

A few weeks ago we launched our new mobile optimized design of thedailybeast.com, and we couldn’t be more excited! Go check it out if you haven’t already (if you’re not using a mobile device scroll to the bottom and click on “Mobile Site”). 

The challenge was to take our existing design and reorganize the content into a space less than 1/3 of the desktop size. In addition, we needed to account for a wide range of phone sizes, layouts (portrait/landscape) and resolutions (up to 300ppi). Based on the new design and requirements we decided to recreate all the markup and css for the entire site….10 weeks and 1,342 cups of coffee later we had ourselves a mobile site! Here are two features that we’re most excited about:

Responsive Design

Ethan Marcotte, who coined the term “Responsive Web Design”, describes 3 foundations as core to a responsive site:

  1. Flexible Grid
  2. Fluid Images
  3. Media Queries

Instead of creating multiple versions of the site to fit multiple device sizes and resolutions we decided to use a responsive design approach by implementing a flexible grid system. This way our site will expand and contract to fit any width browser. For example, when your phone is turned from portrait to landscape, the site will respond by expanding to fit the screen. To produce this, we are using a 12-column flexible grid designed by Stephen Bau that is based on the great work by 960 Grid System (we love grids!). All columns widths are set as a percentage of the page rather than a fixed pixel width which allows the site to expand or contract to any size.

The easiest part of the design was making all the images “fluid” by setting their width to 100%. Now images will expand/contract to fill the size of their parent element. As for media queries, new in css3, we are currently modifying the navigation so that each element is spaced properly based on site width. In the future, we hope to implement tablet and desktop media queries for a seamless site experience across all devices.

Icon Fonts

With the new responsive site we decided to abandon the use of sprites and most icon images in our css and have opted for creating our own icon font instead. Now when you visit the mobile site, all the icons are actually a part of our custom font, not jpgs or pngs. The browser references all icon images from a small font file (~30kb). One of the benefits is that your browser will not be downloading lots of icon images, taking up device memory, bandwidth and adding to the time it takes each page to download.

An additional benefit of using a font is also so that we don’t have to recut new images if designs change and we need the image slightly bigger, smaller or a different color. Now we can change each instance of the icon with css adjusting it accordingly. Lastly, icon images will never look blurry since they are now vector data (like an .svg) instead of raster (.jpg). Here’s an example of why icon fonts are awesome. You can make your own custom fonts over at icomoon.io or download the icomoon chrome extension and work on your fonts offline.

Shout out to the entire development and design teams who created lots of really great features!

— Lynn Maharas, Front End Developer

Go check out our mobile site! 

Reblogged from NewsBeast Labs
12:52 PM, October 4th, 2011

cabbagerose:

alberto seveso

photographs of ink drops in water by Alberto Seveso.  available as a set of desktop wallpapers. Download them all on Behance.

via: twoandtwenty

10:57 AM, September 16th, 2011

utnereader:

(via Designboom)

On show at Designersblock during London Design Week 2011 is “Plantable,” a table which aims to reintroduce nature back into the experience of gathering, preparing, cooking and eating a meal. Designed by London-based studio Jailmake
(Liam Healy and Jamie Elliott), the table offers places for plants to grow within the base of each of the four legs, which are designed to allow vegitation to intertwine between its structure.

Cheat Sheet tumblr wants a Plantable.

Reblogged from Utne Reader
10:27 AM, August 31st, 2011

newsweek:

spdnews:

Cover of the Day, August 31, 2011 c/o Newsweek CD @dirkbarnett

Thanks to SPD (the Society of Publication Designers) for naming this week’s Steve Jobs cover their Cover of the Day! High fives to our Creative Director, Dirk Barnett, and our Director of Photography, Scott Hall, for their work on this.

*high five

Reblogged from Newsweek
4:59 PM, April 13th, 2011

jonathanchang:

OBOL // NEVER EAT SOGGY CEREAL AGAIN

Yes please.

Reblogged from JONATHAN CHANG
4:48 PM, January 31st, 2011

Apple Lisa is one of the first consumer computers with a graphic user interface, while its competitors relied on cryptic text and keyboard commands a la MS-DOS. Among the Lisa’s now familiar features: a drop-down menu bar, windows, a hierarchal file system, the ability to copy and paste, icons, folders and a mouse. The first Microsoft mouse does not roll off the line until 1987.

Newsweek has this great gallery of Apple’s seeds of innovation. Plus, read Blake Gopnik’s review of his MacBook Air, and why he sees Apple’s goods as more old-fashioned than contemporary.

11:45 AM, January 25th, 2011

A word cloud of Franklin Delano Roosevelt’s January 6, 1942 State of the Union address, which took place just a month after Pearl Harbor—as evidenced by the dominant word of the speech: WAR.

A speedy, smart summary of news and must-reads from across the web and around the Tumblrverse, brought to you by The Daily Beast.


Networks