This document discusses responsive widget design for WordPress. It introduces responsive web design and how widgets need to adapt. It provides tips for making widgets responsive like using fluid grids and media queries. It also demonstrates how to add responsive markup and styles to widgets and discusses techniques for rearranging widget content on smaller screens using Flexbox.
2. This is a really exciting time for web design.
The increasing diversity of devices is throwing
into sharp relief just how complacent and
wrong-headed our traditional fixed-width
bloated desktop-centric approach has been.
- Jeremy Keith, Developer, Author, Speaker
Responsive Widget Design
Saturday, September 15, 12
3. • Responsive Web Design Update
• Creating Responsive Widgets
• Using Responsive Widgets in your theme
Responsive Widget Design
Saturday, September 15, 12
4. What is Responsive Web Design?
Responsive Widget Design
Saturday, September 15, 12
5. Responsive Web Design is a combination of
fluid grids and images with media queries to
change layout based on the size of a device
viewport.
- Luke Wroblewski, Mobile First
Responsive Widget Design
Saturday, September 15, 12
8. Responsive Web Design Is Evolving
Responsive Widget Design
Saturday, September 15, 12
9. Responsive Web Design
Adaptive Web Design
Progressive Enhancement
Mobile First
Structured Content
Conditional Loading
Responsive Widget Design
Saturday, September 15, 12
10. We are in a period of transition and still
figuring things out. So expect to be learning
and iterating a lot. That's both exciting and
daunting.
- Luke Wroblewski, Mobile First
Responsive Widget Design
Saturday, September 15, 12
12. What is a Widget?
Responsive Widget Design
Saturday, September 15, 12
13. WordPress Widgets are WordPress Plugins
that add visitor visual and interactivity options
and features, such as sidebar widgets for post
categories, tag clouds, navigation, search, etc.
- WordPress Codex
Responsive Widget Design
Saturday, September 15, 12
14. How to create a WordPress Widget?
Google - About 26,400,000 results
Responsive Widget Design
Saturday, September 15, 12
15. There’s bad code in my widget!
Responsive Widget Design
Saturday, September 15, 12
16. 5 ways to fix bad widget code
1. Contact the developer
2. Modify the widget yourself
3. Clone the plugin
4. Install the Widget CSS Classes plugin
5. Add functions for custom classes to
your functions.php
Responsive Widget Design
Saturday, September 15, 12
18. Redesigning The Approach
Mobile First - Widgets are inherently small.
Design flexibly starting small (phone) and use
media queries for the larger viewports (Desktop).
Responsive Widget Design
Saturday, September 15, 12
19. Redesigning The Approach
Think Liquid - As elements get bigger, increase
their size and usability. Stay proportional. There
are no rules it just has to make sense.
Responsive Widget Design
Saturday, September 15, 12
20. Elements That Will Change
1. Titles - Scale larger or smaller
2. Paragraphs - Scale margin and padding
3. Images - Will need to scale or crop
4. Form labels - Will need to scale and wrap
5. Form Inputs - Scale and increase padding
6. Button Size - Scale and increase font size
Responsive Widget Design
Saturday, September 15, 12
21. Generated Widget Markup
(Text Widget)
<div id="primary" class="sidebar">
<ul>
! <li id="text-1" class="widget widget_text">
! <h3 class="widgettitle">Widget Title</h3>
! ! <div class="textwidget">Text widget area.</div>
! </li>
</ul> * All generated widget ID’s and
Classes are different. Firebug
</div>
and Developer Tools are good
to use for this.
Responsive Widget Design
Saturday, September 15, 12
22. Adding Markup To A Widget
(Functions.php)
register_sidebar(
* The whole idea here is to
! array( get control. Edit or add
! ! 'id' => 'primary', markup as needed.
! ! 'name' => __( 'Primary' ),
! ! 'description' => __( 'A short description of the sidebar.' ),
! ! 'before_widget' => '<here><div id="%1$s" class="widget %2$s"><here>',
! ! 'after_widget' => '<here></div><here>',
! ! 'before_title' => '<here><h3 class="widget-title"><here>',
! ! 'after_title' => '<here></h3><here>'
! )
);
Responsive Widget Design
Saturday, September 15, 12
23. Real World Example
(Default)
• No width on outermost container
• Logos floated left and right
• Form elements floated left & right
• Percentage width on form elements
• Buttons centered
Responsive Widget Design
Saturday, September 15, 12
24. Real World Example
(@media only screen and (min-width: 301px)
and (max-width: 500px))
• Min/Max widths stop rotation hiccup
• More logo padding on right & left
• Increased font and padding on form
• 60/20 percentage width on form
• Increased font and padding on buttons
Responsive Widget Design
Saturday, September 15, 12
25. Real World Example
( @media only screen and (min-width: 501px)
and (max-width: 590px) )
• Less logo padding on
right & left
• Increased font and
padding on form
• 50/30 percentage width
on form
• Increased font and
padding on buttons
Responsive Widget Design
Saturday, September 15, 12
27. Widgets Are Awesome!
• Extremely powerful and flexible
• Display menus, video, text, images, etc.
• Place anywhere in your theme
• Easy to use and update by clients
• Great way to focus editing to certain areas
Responsive Widget Design
Saturday, September 15, 12
28. Widgets Can Go Anywhere
Responsive Widget Design
Saturday, September 15, 12
32. The concept of permanently placing content
on a web page for a single browsing width or
resolution is becoming a thing of the past.
- Trent Walton, TrentWalton.com
Responsive Widget Design
Saturday, September 15, 12
33. Rearranging Content With Flexbox
• CSS Property - flexible box layout module
• box-ordinal-group property reorder elements
• Supported by all current mobile browsers
• No need to hide content in one column view
• Degrades back to original source order
Responsive Widget Design
Saturday, September 15, 12
34. Real World Example
( TheIronBeam.com - Defining Areas )
Responsive Widget Design
Saturday, September 15, 12
35. Setting Up Your Flexbox CSS
(Step 1)
@media only screen and (min-width: 320px) and (max-width: 479px) {
/* Content Choreography starts here */
.site-content {
display:box;
display:-moz-box;
display:-webkit-box; * Creating the box around the
outermost parent container.
box-orient:vertical;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
Responsive Widget Design
Saturday, September 15, 12
36. Setting Up Your Flexbox CSS
(Step 2)
.menu-main-nav-container, #content, #secondary {
box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
} * Assign all containers inside
that you would like to order
to group 1.
Responsive Widget Design
Saturday, September 15, 12
37. Setting Up Your Flexbox CSS
(Step 3)
#secondary {
box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-webkit-box-ordinal-group: 4; * Order your internal
} containers as you would like
.menu-main-nav-container { them to appear.
box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
}
#content {
box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
Responsive Widget Design
Saturday, September 15, 12
38. Real World Example
( TheIronBeam.com - Ordered With Flexbox )
Responsive Widget Design
Saturday, September 15, 12
39. Content Stacking Information
Trent Walton
http://trentwalton.com/2011/07/14/content-choreography/
Jordan Moore
http://www.jordanm.co.uk/post/21863299677/building-with-content-
choreography
Responsive Widget Design
Saturday, September 15, 12
40. Questions?
Responsive Widget Design
Saturday, September 15, 12
41. Thank you!
• Slides at www.CrowdedSites.com
• For any questions feel free to contact me!
• Wes@CrowdedSites.com
Responsive Widget Design
Saturday, September 15, 12