The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating.

Thousands of designers have been searching for alternatives to Creative Cloud products, but with Adobe’s near-monopoly on professional grade web design software alternate applications are thin on the ground.

The time is right it seems, for an internet giant to step into the breach…

The biggest name on the web, perhaps the biggest name anywhere, is Google and they already provide business tools that many professionals can’t live without; most of us use Google Drive where once we may have used Microsoft’s Office, and most people access Google Mail numerous times per day.

Google haven’t previously looked like making a play for the huge web design market however, a curious decision given that they hold exclusive rights to the browser with the largest market share (it’s Chrome for anyone who’s been on the ISS for a decade).

That looks about to change. Buried at the bottom of a DoubleClick blog post, Google ‘let slip’ that its new product “Google Web Designer” will be launching in the next few months:

To help advertisers and publishers more seamlessly unlock the potential of cross-device programs, we are investing in a new HTML5 creative development tool – Google Web Designer. Available in the coming months, Google Web Designer will empower creative professionals to create cutting-edge advertising as well as engaging web content like sites and applications – for free. Google Web Designer will be seamlessly integrated with DoubleClick Studio and AdMob, greatly simplifying the process of building HTML5 creative that can be served through Google platforms.

Let’s be clear: it’s highly unlikely that you’ll be switching to a “Google Creative Suite” style product line anytime soon. “Google Web Designer” is expected to be an enhanced version of Google’s already available Google Sites — which isn’t going to threaten Adobe’s market position.

What we’re expecting — and at this point it’s mere speculation — is some kind of hybrid of Chrome’s Developer Tools and Adobe’s Edge tools.

Whilst details are very thin on the ground, what we do know is that the new application will be free. That should make the likes of Squarespace, 1and1, and create.net sit up and take notice. Google’s revenue stream will be driven by integration with its advertising.

It seems a stretch to think that Google Web Designer could replace Creative Cloud applications, but then it wasn’t that long ago that people thought of WordPress as “just a blogging tool”. So make room on your résumé, you may well find Google Web Designer becoming a marketable skill in the next 12 months.

Do you think Google Web Designer will be suitable for professionals? What features are you hoping to see? Let us know in the comments.

Featured image/thumbnail, web designer image via Shutterstock.

Improve Designer Communication with MicroPersonas – only $17!

The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating.

Thousands of designers have been searching for alternatives to Creative Cloud products, but with Adobe’s near-monopoly on professional grade web design software alternate applications are thin on the ground.

The time is right it seems, for an internet giant to step into the breach…

The biggest name on the web, perhaps the biggest name anywhere, is Google and they already provide business tools that many professionals can’t live without; most of us use Google Drive where once we may have used Microsoft’s Office, and most people access Google Mail numerous times per day.

Google haven’t previously looked like making a play for the huge web design market however, a curious decision given that they hold exclusive rights to the browser with the largest market share (it’s Chrome for anyone who’s been on the ISS for a decade).

That looks about to change. Buried at the bottom of a DoubleClick blog post, Google ‘let slip’ that its new product “Google Web Designer” will be launching in the next few months:

To help advertisers and publishers more seamlessly unlock the potential of cross-device programs, we are investing in a new HTML5 creative development tool – Google Web Designer. Available in the coming months, Google Web Designer will empower creative professionals to create cutting-edge advertising as well as engaging web content like sites and applications – for free. Google Web Designer will be seamlessly integrated with DoubleClick Studio and AdMob, greatly simplifying the process of building HTML5 creative that can be served through Google platforms.

Let’s be clear: it’s highly unlikely that you’ll be switching to a “Google Creative Suite” style product line anytime soon. “Google Web Designer” is expected to be an enhanced version of Google’s already available Google Sites — which isn’t going to threaten Adobe’s market position.

What we’re expecting — and at this point it’s mere speculation — is some kind of hybrid of Chrome’s Developer Tools and Adobe’s Edge tools.

Whilst details are very thin on the ground, what we do know is that the new application will be free. That should make the likes of Squarespace, 1and1, and create.net sit up and take notice. Google’s revenue stream will be driven by integration with its advertising.

It seems a stretch to think that Google Web Designer could replace Creative Cloud applications, but then it wasn’t that long ago that people thought of WordPress as “just a blogging tool”. So make room on your résumé, you may well find Google Web Designer becoming a marketable skill in the next 12 months.

Do you think Google Web Designer will be suitable for professionals? What features are you hoping to see? Let us know in the comments.

Featured image/thumbnail, web designer image via Shutterstock.

Improve Designer Communication with MicroPersonas – only $17!

App implements iHeartRadio’s current native app experience, providing automotive partners an easy-to-implement solution for embedding more than 1,500 live radio stations from across the country.

UMBC Rugby players past and present joined together for the first UMBC Rugby Day of Service, partnering with Habitat for Humanity of the Chesapeake and Habitat for Humanity Sandtown to demolish and clean up one site, and to build a new home on another. Close to 30 players from the men’s and women’s club participated.

“As an organization, we were looking for an event that would allow us to bring all of the teams together, past and present, to do something positive in the greater Baltimore community,” said Tracy Williams, Jr. ’06, who helped organize the event and who hopes to make this an annual event. “We were able to leverage our extensive alumni and current player network to make a long lasting difference in the lives of families in need.”

Sandtown Habitat: Back Row L-R: Tyler Tippett, Colin McGrath, Jeremy Boyer ’07, Karl Shuey, Robert Duvall ’06, Richie Campbell, Brendan McQueeny, Amha Sertsu. Front Row: Joe Letts, Hieu Truong ’05, Candice Simmons, Jasmine Cashin, Allie Alton, Soheyl Soltani-Nia, Matt Zvitkovitz, Jackson Sparrow Drury

Habitat Chesapeake: Back Row L-R: Mikhail Hershfield, Joe Bieberich ’12, James Park, Arya Koolaee, Tracy Williams ’06, Phillip Zwaig. Front Row: Andrew Gaither ’94, James Nardei, Josh Herring ’08,’11, Ricky Raccoon, Erik Anderson

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.

But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.

Can't Preprocessors Do Our Math?

All CSS Preprocessors do have math functions and they are pretty useful. But they aren't quite as powerful as native math. The most useful ability of calc() is it's ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time.

Syntax

.thing {
      width: 90%; /* fallback if needed */
      width: calc(100% - 3em);
    }

There must be spaces surrounding the math operator. You can nest.

Browser Support

It is surprisingly good. Can I use... is always great for checking out the details there. On desktop the concerns would be it's IE 9+, Safari 6+, and won't be in Opera until it is on Blink in 15+. On mobile, Android and Opera Mini don't support it at all yet and iOS just on 6.0+.

You'll have to make the call there. I've been able to actually use it in production in certain scenarios already.

Use Case #1: (All The Height - Header)

A block level child element with height: 100% will be as tall as it's block level parent element. It can be nice to make a colored module as tall as the parent element in some cases.

But now let's say the parent element becomes too small to contain all the content in the module. You want the content to scroll, but you want just the content to scroll, not the entire module. Just set overflow-y: auto; right? Not quite, because overflow-y is only useful if the content element itself has a set height that can be overflowed. We can't make the content element 100% high because with the header there, that will be too high. We need 100% minus the height of the header. If we know that header height, it's doable!

* {
      /* So 100% means 100% */
      box-sizing: border-box;
    }
    html, body {
      /* Make the body to be as tall as browser window */
      height: 100%;
      background: #ccc;
      padding: 20px;
    }
    body {
      padding: 20px;
      background: white;  
    }
    .area-one {
      /* With the body as tall as the browser window
         this will be too */
      height: 100%;
    }
    .area-one h2 {
      height: 50px;
      line-height: 50px;
    }
    .content {
      /* Subtract the header size */
      height: calc(100% - 50px);
      overflow: auto;
    }

You might gripe that the header shouldn't have a fixed size. Might be cool someday if calc() could subtract measured sizes of elements, but that's not possible yet. You could set the header to overflow with ellipsis.

Check out this Pen!

Use Case #2: X Pixels From Bottom Right Corner

We can position background-image X pixels from the top-left corner easily.

background-image: url(dog.png);
    background-position: 50px 20px;

That would put the dog 50px from the left and 20px from the top of the elements box. But what if you want it 50px from the right and 20px from the bottom? Not possible with just straight length values. But calc() makes it possible!

background-image: url(dog.png);
    background-position: calc(100% - 50px) calc(100% - 20px);

Check out this Pen!

Use Case #3: Fixed Gutters Without Parents

Let's say you want two columns next to each other. The first 40% wide, the second 60%, but with a fixed 1em gap between the columns. Don't Overthink It Grids have fixed gutters, but they aren't true gutters in a sense. The columns themselves bump right into each other and the columns are made by internal padding inside those columns.

Using calc(), we can make the first column 40% wide with a right margin of 1em, then make the second column 60% wide minus that 1em.

.area-one {
      width: 40%;
      float: left;
      margin-right: 1em;
    }
    
    .area-two {
      width: calc(60% - 1em);
      float: right;
    }

You could remove half the gutter from both if you wanted to keep the proportion more accurate. Now you have two true columns separated by fixed space without needing parent elements or using the internal padding.

Check out this Pen!

Use Case #4: Showing Math Is Easier To Understand

Speaking of columns, sometimes division math gets messy. Let's say you wanted a 7-column grid, you might have classes like:

.column-1-7 {
       width: 14.2857%
    }
    .column-2-7 {
       width: 28.5714%
    }
    .column-3-7 {
       width: 42.8571%
    }

Not exactly magic numbers, but difficult to understand at a glance.

.column-1-7 {
       width: calc(100% / 7);
    }
    .column-2-7 {
       width: calc(100% / 7 * 2);
    }
    .column-3-7 {
       width: calc(100% / 7 * 3);
    }

Check out this Pen!

Use Case #5: Kinda Crappy box-sizing Replacement

I'm a fan of universal box-sizing: border-box; because it means you don't have to do much math to figure out how big an element actually is, our adjust that math when things like border and padding change.

If you want to replicate what box-sizing does, you could use calc() to subtract the values as needed.

.module {
      padding: 10px;
    
      /* Same as box-sizing: padding-box */
      width: calc(40% - 20px);
    
      border: 2px solid black;
    
      /* Same as box-sizing: border-box */
      width: calc(40% - 20px - 4px);
    }

box-sizing has far better browser support than calc() though, so this would be rarely used.

The Future?

I think it will be interesting when we can use the attr() function in places other than the content property. With that, we could yank the value from HTML elements, run calculations on them, and use the new numbers to do design-y things. Like colorize inputs based on the numbers they contain.

Perhaps we could even use it to do fancy things with the <progress> elements like turn it into a speedometer like on this page. Perhaps something like:

/* Not real */
    progress::progress-bar {
      transform: rotate(calc(!parent(attr(value))*18)) + deg);
    }

Need a new look for your portfolio? Check out the Snap WordPress theme from The Theme Foundry. Sass files and Compass config are included!

A Couple of Use Cases for Calc() is a post from CSS-Tricks