My favorite design tool ... is a browser.

Ad96ace475ab89952489d5a2454d97da?s=47 Mary Baum
April 07, 2019

My favorite design tool ... is a browser.

I don’t want to say I’m old, but copiers were high-tech when I was in school. And I swore I'd never get stuck in an era as the years went by.

So I’ve tried all the new design tools! (Mostly). I’m a big fan of thumbnail sketches.

And I’ll do some sample layouts in Photoshop or XD or Affinity.

But as soon as I can, I head for the browser.

For a reality check? Sure.

But there’s also a heap of serendipity in them dev tools!

— For my vet, I stumbled on great typography just by hitting the Up and Down keys and seeing where they take me.
—Gutenberg and some new options in the Genesis Framework are making it easier than ever to build without thinking much about templates (the php kind).
— And you can hook your code editor right up to Chrome and see your changes (Local changes, of course!) come to life in real time!

So come take a look! If you love CSS like I love CSS, you’ll love designing elements and posts and pages — even entire sites — right in the browser!

Ad96ace475ab89952489d5a2454d97da?s=128

Mary Baum

April 07, 2019
Tweet

Transcript

  1. My favorite design tool… … Is a browser.

  2. I took Nemo and his brother, Whitey, in over Labor

    Day weekend a few years ago. And left with the same two cats, three boxes of flea treatment and the website.
  3. So I’m styling the archive page and it’s looking pretty

    bland.
  4. So I start messing with the up- and down-arrows in

    the style blocks, and things change in real time! Like this padding.
  5. And wind up with this, more or less. Serendipity!

  6. Now, I love design tools, including the old- school ones

    — thumbnails, anyone?
  7. Here we are in Photoshop, using Style Tiles from Samantha

    Roy.
  8. Hell. Here’s a header in InDesign someone did, that someone

    else built a site from. (I inherited, added WooCommerce) Course, who doesn’t love new tools?
  9. This is Affinity Designer, which is especially good for drawing

    things from basic shapes.
  10. This started out in Sketch, and then I pulled it

    back into Illustrator.
  11. This also started in Sketch, but now I’m playing around

    in Adobe XD.
  12. This is XD too — and an excuse to show

    you a baby picture. This is my baby, and she’s turning 29.
  13. So. I love design tools. I used Affinity and then

    Illustrator for this layout of a WooCommerce product page, sized for an iPad Pro.
  14. But. What happens when we get that feather duster into

    the browser?
  15. There’s a whole other screenful of stuff we have to

    style! It’s still not as compact as I’d like. But all this stuff HAS to be there if we’re really going to sell that product! So at this point, you’ve GOTTA be in the browser to see what you’re doing. But which one?
  16. There’s Chrome.

  17. Firefox? This is the Developer Edition icon, btw.

  18. How bout Safari? Purple means it’s the technology preview.

  19. I go about 75% Chrome and 25% Firefox.

  20. A lot of it is my muscle memory in Chrome.

    My fingers just know where to go.
  21. But I also like the way the dev tools can

    emulate any device, from phones …
  22. and tablets …

  23. to HD and 4K screens that scale so you can

    see them, but keep everything in proportion. You could design a Jumbotron view in Chrome!
  24. The current version of Chrome has great tooltips. Everything you

    wanted to know about an element — just hover.
  25. But the real killer thing in Chrome for me is,

    I can work twice as fast. (Or mess around twice as much… I mean, isn’t the real definition of design that we keep messing around and messing around until it doesn’t suck anymore? Design in the browser is MADE for that.)
  26. See that green dot on the style.css icon? That means

    the sheet is live — you’re making changes in real time that will save in the file.
  27. style editor. When we see an asterisk, we know the

    file has changed. Saving from here will save the sheet in our IDE.
  28. And we can make it happen by dragging our theme

    files on this grey area.
  29. this is my setup — viewport on the left; browser

    styles in the middle; phpStorm on the right.
  30. So if I'm that happy in Chrome, why bother with

    Firefox? For two things: Grid and CSS-Shapes.
  31. Here’s the CSS-Grid inspector in Chrome, and it’s not bad.

    It’s great, in fact, for some things.
  32. But if you’ve got more than one grid on a

    page? Firefox lets us see them all, and in different colors! And you can highlight a certain cell if you want.
  33. Here on the product page, we’ve got a bunch.

  34. Much easier to see what’s going on when they’re different

    colors.
  35. Welp. These are looking better.

  36. The other thing is CSS-shapes. Which now has support in

    every browser, once we see the new version of Edge that’s based on Chromium.
  37. Here’s how it works: See that liney thing? When we

    click on that,
  38. we get this inspector thing on the shape

  39. with handles! And as you move them around, you control

    the margin that controls where the type flows.
  40. None
  41. If time: Let’s go cross-browser: Speaking of messing with things

    until they don’t suck - here’s me having Fun With Buttons! And border-radius. Probably did this in Chrome.
  42. Here they are as blog headlines. Is that a case

    of banner blindness, or did you just eat a bad burrito?
  43. Better.

  44. Caveat…

  45. I woke up one morning and came down the stairs

    to this.
  46. I was pretty sure I’d gone to bed with this!

  47. I took Nemo and his brother, Whitey, in over Labor

    Day weekend a few years ago. And left with the same two cats, three boxes of flea treatment and the website.
  48. So I started pulling things apart until I discovered this:

    height: 86vw! Makes perfect sense on a phone view!
  49. I love it when one line of CSS snaps everything

    back to where it belongs.
  50. @marybaum marybaum