Widget areas
1 like240 views
The document discusses the flexibility and power of web design through widget areas, emphasizing the importance of user experience and visual stimulation. It highlights the capability of designers to manipulate content layout while acknowledging the need to balance creativity with user familiarity, especially for functional tasks. The author shares insights on executing designs using Genesis and Underscores themes, focusing on markup and widget registration.
Widget areas
- 2. Ultimate freedom! Register a few widget areas and make your site look like anything!
- 3. I’ve been beating that horse for a while.
- 4. It’s definitely a skill worth developing. And we will - in a few minutes.
- 5. But let’s take a step back.
- 6. Here’s a slide from last summer, complaining about phone views that look too much alike. Should we change things up every time we get a hankering to try something new?
- 7. Not if you follow the gospel of the heat map. Where the eyeballs go, so must the content.
- 8. Oh really? Where are the eyeballs going now?
- 10. We’re designers. We can make the eyeball go wherever we please!
- 11. We can make the eyeballs go where WE want. We’re designers. We can make the eyeball go wherever we please! Which is great if the situation calls for a new approach.
- 12. We can make the eyeballs go where WE want. If our users are looking for visual stimulation. Inspiration. Excitement.
- 13. But sometimes, they’re just filling out a form for a car loan. Or paying a bill.
- 14. In which case, a little more attention to the heat maps might be a good idea. This is my young friend Jimminy, a developer who splits his time between West Virginia and the Bay area. He spends a lot of time around regular people - who are actually just like the rest of us when we’re trying to get stuff done.
- 15. I saw this tweet of his a couple days ago - just as I was thinking about how we have all this power - the power to direct the eye.
- 16. Now, sometimes we do need to break away. We’re building something new. (My poor husband. He sees these tennis balls every damn day, practically.) As a home page goes, this site - a Genesis site, btw, is pretty out there. No header. No footer. Main navigation around the ball.
- 17. But it didn’t come from nowhere. There was this folder, first.
- 23. So. How do we execute this in Genesis? Or any other theme?
- 24. Widget. Areas.
- 25. Here’s a demo from a talk I did last year.
- 26. So. How do we execute this in Genesis? Or any other theme?
- 27. What’s the difference? Like I said. Ultimate power. 90% of the basis of layout flexibility, I think, is widget areas.
- 28. 1 2 3 4 And these FOUR widget areas.
- 29. Underscores. How would we do this in Underscores?
- 31. Before.2 3 4 1 Let’s start with the markup. This is a home page, but it could be any page - a blog page, a special page you’ve created for a reason - even an archive page. But this happens to be an Underscores home page. We’ve got our main content area, with the Loop and then two sidebar widgets.
- 32. markup - before Let’s start with the markup.
- 33. After. 1 2 3 4 And these FOUR widget areas.
- 34. front-page.php
- 35. Step 2. From boxes to widgets.
- 37. And, finally . . .
- 38. Let's dress ’em up! And get ’em dressed. See what I mean about floating everything left?
- 40. Genesis. Same three files. It looks more complicated and codey, but it’s really not. For one thing, there’s about a million people writing code snippets we can just drop in.
- 41. Again, our demo.
- 42. So with Genesis - I saw there was a sticky header menu already hard-coded in the Minimum Pro theme, so I decided to leave it. So let’s go through the process one more time.
- 43. The visual reference. Now let’s take the clothes off these divs.
- 44. And here are the asides we’re going to make…
- 45. and move. And here they are in place. K - let’s code it up!
- 46. The code to make the asides is pretty much identical to the Underscores code. You can add markup, like …
- 47. Underscores:Widgeted area with markup. Underscores, if you want. Generally, I only add it when I’m changing the style of the widget title. I mean, really - h4? But the only arguments you really need are those first three: id, name and description. (Now, this is not a CSS id - I’m not big on those. I greatly prefer classes, and in fact I make these IDs class names, or parts of class names.) If you want more control, you can add the before-widget and after-widget arguments, and give them some markup too. Again, just like Underscores.
- 48. front-page.php Laying out the widgets is pretty straightforward. I just found a recent article that showed you can do it without the action hook - almost exactly like Underscores. But I KNOW this works. I commented out the loop, but I could just as easily have blown it away. If I wanted a bunch of post excerpts above or below the widgets, the loop will bring ’em in.
- 49. style.css Now let’s make them match the Underscores widgets.
- 50. Widgets panel. Now let’s add the Featured Posts … without rewriting the markup, I might add, the way I did with the plugin we used with Underscores.