Responsive widget-design-with-word press

Responsive Widget Design:
With WordPress

Saturday, September 15, 12

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 ﬁxed-width
bloated desktop-centric approach has been.

- Jeremy Keith, Developer, Author, Speaker

Responsive Widget Design

• Responsive Web Design Update
• Creating Responsive Widgets
• Using Responsive Widgets in your theme


What is Responsive Web Design?


Responsive Web Design is a combination of
ﬂuid grids and images with media queries to
change layout based on the size of a device
viewport.
- Luke Wroblewski, Mobile First


- Image Source TheeDesign.com


- Image Source Gaslight Creative


Responsive Web Design Is Evolving


Responsive Web Design
Adaptive Web Design

Progressive Enhancement

Mobile First

Structured Content

Conditional Loading


We are in a period of transition and still
ﬁguring things out. So expect to be learning
and iterating a lot. That's both exciting and
daunting.
- Luke Wroblewski, Mobile First


Creating Responsive
WordPress Widgets


What is a Widget?


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


How to create a WordPress Widget?
Google - About 26,400,000 results


There’s bad code in my widget!


5 ways to ﬁx 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


Making Widgets Responsive


Redesigning The Approach
Mobile First - Widgets are inherently small.
Design ﬂexibly starting small (phone) and use
media queries for the larger viewports (Desktop).


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.


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


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.


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>'
! )
);


Real World Example
(Default)

• No width on outermost container
• Logos ﬂoated left and right
• Form elements ﬂoated left & right
• Percentage width on form elements
• Buttons centered


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


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


Using Responsive Widgets
In Your Theme


Widgets Are Awesome!
• Extremely powerful and ﬂexible
• 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


Widgets Can Go Anywhere


Widgets Responsive Flow


Responsive Flow Issues


Content Structure, Content
Choreography, Content Stacking


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


Rearranging Content With Flexbox
• CSS Property - ﬂexible 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


Real World Example
( TheIronBeam.com - Deﬁning Areas )


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;
}


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


(Step 3)
#secondary {
-webkit-box-ordinal-group: 4; * Order your internal
} containers as you would like
.menu-main-nav-container { them to appear.
}
#content {
}


Real World Example
( TheIronBeam.com - Ordered With Flexbox )


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


Questions?


Thank you!
• Slides at www.CrowdedSites.com
• For any questions feel free to contact me!
• Wes@CrowdedSites.com


Responsive widget-design-with-word press

Recommended

Recommended

More Related Content

Similar to Responsive widget-design-with-word press

Similar to Responsive widget-design-with-word press (20)

Recently uploaded

Recently uploaded (20)

Responsive widget-design-with-word press