Responsive widget-design-with-word press

Responsive Widget Design: With WordPressSaturday, 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 DesignSaturday, September 15, 12

• Responsive Web Design Update • Creating Responsive Widgets • Using Responsive Widgets in your theme Responsive Widget DesignSaturday, September 15, 12

What is Responsive Web Design? Responsive Widget DesignSaturday, September 15, 12

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 Responsive Widget DesignSaturday, September 15, 12

- Image Source TheeDesign.com Responsive Widget DesignSaturday, September 15, 12

- Image Source Gaslight Creative Responsive Widget DesignSaturday, September 15, 12

Responsive Web Design Is Evolving Responsive Widget DesignSaturday, September 15, 12

Responsive Web Design Adaptive Web Design Progressive Enhancement Mobile First Structured Content Conditional Loading Responsive Widget DesignSaturday, September 15, 12

We are in a period of transition and still ﬁguring things out. So expect to be learning and iterating a lot. Thats both exciting and daunting. - Luke Wroblewski, Mobile First Responsive Widget DesignSaturday, September 15, 12

Creating Responsive WordPress Widgets Responsive Widget DesignSaturday, September 15, 12

What is a Widget? Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

How to create a WordPress Widget? Google - About 26,400,000 results Responsive Widget DesignSaturday, September 15, 12

There’s bad code in my widget! Responsive Widget DesignSaturday, September 15, 12

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 Responsive Widget DesignSaturday, September 15, 12

Making Widgets Responsive Responsive Widget DesignSaturday, September 15, 12

Redesigning The Approach Mobile First - Widgets are inherently small. Design ﬂexibly starting small (phone) and use media queries for the larger viewports (Desktop). Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

Using Responsive Widgets In Your Theme Responsive Widget DesignSaturday, September 15, 12

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 Responsive Widget DesignSaturday, September 15, 12

Widgets Can Go Anywhere Responsive Widget DesignSaturday, September 15, 12

Widgets Responsive Flow Responsive Widget DesignSaturday, September 15, 12

Responsive Flow Issues Responsive Widget DesignSaturday, September 15, 12

Content Structure, Content Choreography, Content Stacking Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 Responsive Widget DesignSaturday, September 15, 12

Real World Example ( TheIronBeam.com - Deﬁning Areas ) Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

Real World Example ( TheIronBeam.com - Ordered With Flexbox ) Responsive Widget DesignSaturday, September 15, 12

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 DesignSaturday, September 15, 12

Questions? Responsive Widget DesignSaturday, September 15, 12

Thank you! • Slides at www.CrowdedSites.com • For any questions feel free to contact me! • Wes@CrowdedSites.com Responsive Widget DesignSaturday, September 15, 12

http://crowdedsites.com	77
http://blog.jaffamonkey.com	51
http://crowdedsites.dev	8

Responsive widget-design-with-word press

by Wes Chyrchel on Sep 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 136

Statistics