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!• Wes@CrowdedSites.com

Responsive widget-design-with-word press

Technology

AppLift Widget guideline

Widget Tutorial

Widget Scepia

Job widget

ACG Enterprise Widget - TeamSystem · 2. Definizione Widget, installazione e configurazione Homepage 2.1 Definizione Widget I widget sono catalogati in ACG Enterprise in un’anagrafica

Super widget

NOTA LAMAN WEB PERIBADI UPM-v1.1 · Berita Terkini) Penyedia widget: sumber widget anda. (contoh: TV3, Kod widget: skrip/kod yang

How to Create aAdvanced Wordpress WIdget Widget Plugin for WordPress - WPExplorer

Word press gets responsive 4x3

WIDGET REFERENCE

Widget 101

Widget Catalogue System Feature Scope Definition F001 Widget Colour Reporting - Tactical

Widget Platform

Webresourcesfree.com 35 free responsive word press magazine themes

Hi slider – the best and free word press slider widget

Ass widget

Uni Widget（ユニウィジェット）／ 15 アプリケー …...191 15. Uni Widget（ユニウィジェット）／アプリケーション Uni Widget（ユニウィジェット）

Widget financiero

Widget Ecosystem and Widget Economy

Widget SDK - reqdemo.polarion.com › polarion › sdk › doc › widget-sdk.pdf · 3.A new macro from the Script - Block widget and Script - Inline widget can now be used. 3.2.2