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

Responsive Widget Design

- Jeremy Keith, Developer, Author, Speaker


• 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 fluid 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 figuring 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 fix bad widget code


1. Contact the developer2. Modify the widget yourself3. Clone the plugin4. Install the Widget CSS Classes plugin5. Add functions for custom classes to

your functions.php


Making Widgets Responsive



Redesigning The Approach


Mobile First - Widgets are inherently small. Design flexibly 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 smaller2. Paragraphs - Scale margin and padding3. Images - Will need to scale or crop4. Form labels - Will need to scale and wrap5. Form Inputs - Scale and increase padding6. Button Size - Scale and increase font size


Generated Widget Markup


<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></div>

* All generated widget ID’s and Classes are different. Firebug and Developer Tools are good to use for this.

(Text Widget)


Adding Markup To A Widget


! register_sidebar(! ! array(! ! ! 'id' => 'primary',! ! ! '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>'! ! )! );

(Functions.php)

* The whole idea here is to get control. Edit or add markup as needed.


Real World Example


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

(Default)


Real World Example


• 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

(@media only screen and (min-width: 301px) and (max-width: 500px))


Real World Example


• Less logo padding on right & left

• Increased font and padding on form

• 50/30 percentage width on form

• Increased font and padding on buttons

( @media only screen and (min-width: 501px) and (max-width: 590px) )


Using Responsive Widgets In Your Theme



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


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


Real World Example


( TheIronBeam.com - Defining Areas )


Setting Up Your Flexbox CSS


@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; box-orient:vertical; -moz-box-orient:vertical; -webkit-box-orient:vertical; }

(Step 1)

* Creating the box around the outermost parent container.




.menu-main-nav-container, #content, #secondary { box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; }

(Step 2)

* Assign all containers inside that you would like to order to group 1.




#secondary { box-ordinal-group: 4; -moz-box-ordinal-group: 4; -webkit-box-ordinal-group: 4; } .menu-main-nav-container { 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; }

(Step 3)

* Order your internal containers as you would like them to appear.


Real World Example


( TheIronBeam.com - Ordered With Flexbox )


Content Stacking Information


http://trentwalton.com/2011/07/14/content-choreography/

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

Trent Walton

Jordan Moore








Questions?



Thank you!• Slides at www.CrowdedSites.com• For any questions feel free to contact me!• [email protected]



http://www.CrowdedSites.com

http://www.CrowdedSites.com

mailto:[email protected]

mailto:[email protected]

Responsive widget-design-with-word press

Technology

responsive

responsive

flexbox css

luke wroblewski

12 real world

media queries

logo padding

widget