Responsive widget-design-with-word press
-
Upload
wes-chyrchel -
Category
Technology
-
view
4.000 -
download
0
description
Transcript of Responsive widget-design-with-word press
![Page 1: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/1.jpg)
Responsive Widget Design: With WordPress
Saturday, September 15, 12
![Page 2: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/2.jpg)
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
Saturday, September 15, 12
![Page 3: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/3.jpg)
• Responsive Web Design Update
• Creating Responsive Widgets
• Using Responsive Widgets in your theme
Responsive Widget Design
Saturday, September 15, 12
![Page 4: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/4.jpg)
What is Responsive Web Design?
Responsive Widget Design
Saturday, September 15, 12
![Page 5: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/5.jpg)
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
![Page 6: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/6.jpg)
Responsive Widget Design
- Image Source TheeDesign.com
Saturday, September 15, 12
![Page 7: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/7.jpg)
Responsive Widget Design
- Image Source Gaslight Creative
Saturday, September 15, 12
![Page 8: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/8.jpg)
Responsive Web Design Is Evolving
Responsive Widget Design
Saturday, September 15, 12
![Page 9: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/9.jpg)
Responsive Web Design
Responsive Widget Design
Adaptive Web Design
Progressive Enhancement
Mobile First
Structured Content
Conditional Loading
Saturday, September 15, 12
![Page 10: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/10.jpg)
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
![Page 11: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/11.jpg)
Creating Responsive WordPress Widgets
Responsive Widget Design
Saturday, September 15, 12
![Page 12: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/12.jpg)
What is a Widget?
Responsive Widget Design
Saturday, September 15, 12
![Page 13: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/13.jpg)
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
![Page 14: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/14.jpg)
How to create a WordPress Widget?
Responsive Widget Design
Google - About 26,400,000 results
Saturday, September 15, 12
![Page 15: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/15.jpg)
There’s bad code in my widget!
Responsive Widget Design
Saturday, September 15, 12
![Page 16: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/16.jpg)
5 ways to fix bad widget code
Responsive Widget Design
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
Saturday, September 15, 12
![Page 17: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/17.jpg)
Making Widgets Responsive
Responsive Widget Design
Saturday, September 15, 12
![Page 18: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/18.jpg)
Redesigning The Approach
Responsive Widget Design
Mobile First - Widgets are inherently small. Design flexibly starting small (phone) and use media queries for the larger viewports (Desktop).
Saturday, September 15, 12
![Page 19: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/19.jpg)
Redesigning The Approach
Responsive Widget Design
Think Liquid - As elements get bigger, increase their size and usability. Stay proportional. There are no rules it just has to make sense.
Saturday, September 15, 12
![Page 20: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/20.jpg)
Elements That Will Change
Responsive Widget Design
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
Saturday, September 15, 12
![Page 21: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/21.jpg)
Generated Widget Markup
Responsive Widget Design
<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)
Saturday, September 15, 12
![Page 22: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/22.jpg)
Adding Markup To A Widget
Responsive Widget Design
! 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.
Saturday, September 15, 12
![Page 23: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/23.jpg)
Real World Example
Responsive Widget Design
• No width on outermost container• Logos floated left and right• Form elements floated left & right• Percentage width on form elements• Buttons centered
(Default)
Saturday, September 15, 12
![Page 24: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/24.jpg)
Real World Example
Responsive Widget Design
• 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))
Saturday, September 15, 12
![Page 25: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/25.jpg)
Real World Example
Responsive Widget Design
• 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) )
Saturday, September 15, 12
![Page 26: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/26.jpg)
Using Responsive Widgets In Your Theme
Responsive Widget Design
Saturday, September 15, 12
![Page 27: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/27.jpg)
Widgets Are Awesome!
Responsive Widget Design
• 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
Saturday, September 15, 12
![Page 28: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/28.jpg)
Widgets Can Go Anywhere
Responsive Widget Design
Saturday, September 15, 12
![Page 29: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/29.jpg)
Widgets Responsive Flow
Responsive Widget Design
Saturday, September 15, 12
![Page 30: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/30.jpg)
Responsive Flow Issues
Responsive Widget Design
Saturday, September 15, 12
![Page 31: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/31.jpg)
Content Structure, Content Choreography, Content Stacking
Responsive Widget Design
Saturday, September 15, 12
![Page 32: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/32.jpg)
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
![Page 33: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/33.jpg)
Rearranging Content With Flexbox
Responsive Widget Design
• 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
Saturday, September 15, 12
![Page 34: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/34.jpg)
Real World Example
Responsive Widget Design
( TheIronBeam.com - Defining Areas )
Saturday, September 15, 12
![Page 35: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/35.jpg)
Setting Up Your Flexbox CSS
Responsive Widget Design
@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.
Saturday, September 15, 12
![Page 36: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/36.jpg)
Setting Up Your Flexbox CSS
Responsive Widget Design
.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.
Saturday, September 15, 12
![Page 37: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/37.jpg)
Setting Up Your Flexbox CSS
Responsive Widget Design
#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.
Saturday, September 15, 12
![Page 38: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/38.jpg)
Real World Example
Responsive Widget Design
( TheIronBeam.com - Ordered With Flexbox )
Saturday, September 15, 12
![Page 39: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/39.jpg)
Content Stacking Information
Responsive Widget Design
http://trentwalton.com/2011/07/14/content-choreography/
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
Trent Walton
Jordan Moore
Saturday, September 15, 12
![Page 40: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/40.jpg)
Questions?
Responsive Widget Design
Saturday, September 15, 12
![Page 41: Responsive widget-design-with-word press](https://reader033.fdocuments.in/reader033/viewer/2022052315/540736fc8d7f7288088b4a01/html5/thumbnails/41.jpg)
Thank you!• Slides at www.CrowdedSites.com• For any questions feel free to contact me!• [email protected]
Responsive Widget Design
Saturday, September 15, 12