{"id":2171,"date":"2013-03-17T19:51:01","date_gmt":"2013-03-17T19:51:01","guid":{"rendered":"https:\/\/2013.atlanta.wordcamp.org\/?p=2171"},"modified":"2013-03-18T17:56:17","modified_gmt":"2013-03-18T17:56:17","slug":"live-blogging-wordpress-navigation-in-responsive-design","status":"publish","type":"post","link":"https:\/\/atlanta.wordcamp.org\/2013\/live-blogging-wordpress-navigation-in-responsive-design\/","title":{"rendered":"WordPress Navigation in Responsive Design"},"content":{"rendered":"<p><strong>Speaker:<\/strong> Erick Arbe<br \/>\n<strong>Twitter:<\/strong> <a href=\"http:\/\/www.twitter.com\/erickarbe\" target=\"_blank\">@erickarbe<\/a><br \/>\n<strong>Presentation Slides:<\/strong> <a href=\"http:\/\/shrd.by\/RyAW0x\" target=\"_blank\">shrd.by\/RyAW0x<\/a><\/p>\n<blockquote><p>\u201cPoorly executed navigation can spell disaster for user experience\u201d &#8211; Gene Crawford<\/p><\/blockquote>\n<p><strong>What is RWD?<\/strong> &#8211; Where can I learn about it?<\/p>\n<ul>\n<li><a href=\"http:\/\/bradrost.github.com\/this-is-responsive\" target=\"_blank\">bradrost.github.com\/this-is-responsive<\/a><\/li>\n<li><a href=\"http:\/\/www.teamtreehouse.com\" target=\"_blank\">teamtreehouse.com<\/a><\/li>\n<li><a href=\"http:\/\/www.google.com\" target=\"_blank\">google.com<\/a><\/li>\n<li><a href=\"http:\/\/www.mediaqueri.es\" target=\"_blank\">mediaqueri.es<\/a><\/li>\n<\/ul>\n<p><strong>How your content strategy plays into RWD &amp; navigation<\/strong><\/p>\n<ul>\n<li>What do I want my users to see on mobile<\/li>\n<li>Should I show a \u201clite\u201d version of my site?<\/li>\n<li>But aren\u2019t users within different context when viewing my site on their phone?<\/li>\n<li>Retro-fitting an existing website to be responsive can be difficult&#8230;especially one with a large menu<\/li>\n<\/ul>\n<blockquote><p>\u201cUse mobile as an excuse to revisit navigation\u201d &#8211; Brad Frost<\/p><\/blockquote>\n<p><strong>Manipulate wordpress for a better responsive nav<\/strong><\/p>\n<ul>\n<li>Target your navigation through better css classes<\/li>\n<li>use multiple menus if necessary<\/li>\n<li>Use # in custom links for top level navigation so users on mobile devices click for a drop down, not to go to that page<\/li>\n<\/ul>\n<p><strong>think touch<\/strong><\/p>\n<ul>\n<li>optimal sizes for touch elements<\/li>\n<li>average human finger pad is 10-14mm<\/li>\n<li>apple suggests a 44&#215;44 points (basically, 44px) touch target size (11.6mm)<\/li>\n<li>windows suggest a 9x9mm touch target size<\/li>\n<li>nokia suggests a 7&#215;7 touch target size<\/li>\n<\/ul>\n<h3>Navigation Patterns<\/h3>\n<p><strong>simple padding method<\/strong><\/p>\n<ul>\n<li>very easy to implement<\/li>\n<li>users know where your nav is<\/li>\n<li>no JS required<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>won\u2019t work with sub-nav<\/li>\n<li>can look akward at certain points<\/li>\n<\/ul>\n<p><strong>grid \/ percentage based<\/strong><\/p>\n<ul>\n<li>easy to touch &#8211; buttons are great size<\/li>\n<li>looks terrific &amp; scales nicely<\/li>\n<li>no js required<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>can\u2019t really work with sub-navigation (unless you hide sub-nav)<\/li>\n<\/ul>\n<p><strong>multi-toggle\/accordian<\/strong><\/p>\n<ul>\n<li>accordian style menu<\/li>\n<li>great solution for large menus<\/li>\n<li>provides good user experience<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>usually requires JS (doesn\u2019t need it)<\/li>\n<li>can push page content way down<\/li>\n<\/ul>\n<p><strong>footer nav<\/strong><\/p>\n<ul>\n<li>great concept &#8211; content first<\/li>\n<li>pretty easy to implement<\/li>\n<li>works across all browsers<\/li>\n<li>\u201cgive em\u2019 content, not menus\u201d<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>provides an akward jump to footer &#8211; especially on long pages<\/li>\n<li>usually need to maintain two sets of navigation<\/li>\n<\/ul>\n<p><strong>select nav<\/strong><\/p>\n<ul>\n<li>can be super easy to implement<\/li>\n<li>easy to retro-fit an existing site<\/li>\n<li>works well with large menus<\/li>\n<li>uses native ui controls<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>not incredibly sexy (tough to style)<\/li>\n<li>usability is just ok<\/li>\n<li>requires js<\/li>\n<\/ul>\n<p><strong>off-canvas\/page slide<\/strong><\/p>\n<ul>\n<li>facebook style off-canvas menu<\/li>\n<li>very slick when used with annimation<\/li>\n<li>terrific ux<\/li>\n<\/ul>\n<p><em>drawbacks<\/em><\/p>\n<ul>\n<li>can\u2019t be used with a huge menu<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Speaker: Erick Arbe Twitter: @erickarbe Presentation Slides: shrd.by\/RyAW0x \u201cPoorly executed navigation can spell disaster for user experience\u201d &#8211; Gene Crawford What is RWD? &#8211; Where can I learn about it? bradrost.github.com\/this-is-responsive teamtreehouse.com google.com mediaqueri.es How your content strategy plays into RWD &amp; navigation What do I want my users to see on mobile Should I [&hellip;]<\/p>\n","protected":false},"author":8480538,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2171","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2YmVp-z1","_links":{"self":[{"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/posts\/2171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/users\/8480538"}],"replies":[{"embeddable":true,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/comments?post=2171"}],"version-history":[{"count":10,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/posts\/2171\/revisions"}],"predecessor-version":[{"id":2201,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/posts\/2171\/revisions\/2201"}],"wp:attachment":[{"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/media?parent=2171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/categories?post=2171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atlanta.wordcamp.org\/2013\/wp-json\/wp\/v2\/tags?post=2171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}