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!

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.
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