{"id":7564,"date":"2012-07-21T13:05:47","date_gmt":"2012-07-21T21:05:47","guid":{"rendered":"http:\/\/www.perivision.net\/wordpress\/?p=7564"},"modified":"2012-07-22T21:07:50","modified_gmt":"2012-07-23T05:07:50","slug":"html5-css3-uxui-and-mobile-design-oh-my","status":"publish","type":"post","link":"https:\/\/www.perivision.net\/wordpress\/2012\/07\/html5-css3-uxui-and-mobile-design-oh-my\/","title":{"rendered":"HTML5, CSS3, UX\/UI and Mobile Design; oh my!"},"content":{"rendered":"<div id=\"attachment_7565\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-12-38-29-PM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7565\" class=\"size-medium wp-image-7565\" title=\"7-21-2012 12-38-29 PM\" src=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-12-38-29-PM-300x180.png\" alt=\"\" width=\"300\" height=\"180\" srcset=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-12-38-29-PM-300x180.png 300w, https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-12-38-29-PM.png 870w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-7565\" class=\"wp-caption-text\">http:\/\/www.flickr.com\/photos\/mr_o\/sets\/72157630681836960\/<\/p><\/div>\n<p>&#8220;CASCADE SF&#8217;s first &#8220;Innovators of the Web Conference&#8221;<\/p>\n<p>Yes, this fine Sat I&#8217;m at the Adobe building in SF watching presentations on the intersection of design and programming.\u00a0 The focus of the talks today are line by line examples of how to break through the limits of design for the web with new cutting edge techniques in CSS and graphic asset creations in photoShop and illustrator.\u00a0 Talks dive as deep as designs and creating icons that can scale but up and down without breaking.<\/p>\n<p>So the most important part of this post,<a href=\"http:\/\/lanyrd.com\/2012\/innovators-of-the-web\/\"> links to the presentations<\/a>.<\/p>\n<p>FYI, finding the slides is not all that easy, the link is in pretty small font.\u00a0 You can see in the screenshot provided.<\/p>\n<p><a href=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-2-02-47-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-7568 alignnone\" title=\"7-21-2012 2-02-47 PM\" src=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-2-02-47-PM-300x193.png\" alt=\"\" width=\"300\" height=\"193\" srcset=\"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-2-02-47-PM-300x193.png 300w, https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-2-02-47-PM.png 542w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>From the <a href=\"http:\/\/cascadesf.com\/\">CASCADE <\/a>site:<\/p>\n<blockquote><p><strong>On July 21, 2012, CASCADE SF is throwing the\u00a0<a href=\"http:\/\/innovatorsoftheweb.eventbrite.com\">Innovators of the Web Conference<\/a>\u00a0in San Francisco, and the lineup is stellar.\u00a0<\/strong>Top talent in the industry will cover best practices of HTML5, CSS3, UX\/UI and Mobile Design, focusing on product design for an optimal user experience. Attendees will leave with sparks, fresh perspectives and cutting-edge skills from highly engaging presentations.Breakfast and lunch catered by local restaurants to help grow and promote small businesses.<\/p><\/blockquote>\n<p><strong>Breakfast, lunch, beer-tasting catered by local restaurants to help grow and promote small businesses. Local jewelry company, Padis Jewelry donated luxurious gift bags filled with jewelry cleaner and other branded products.<br \/>\n<\/strong><\/p>\n<p>Including Travelin&#8217; Joe Espresso, Nico&#8217;s Tacos, Healthy Spirits catering lunch and providing an international beer-tasting from light to dark &#8211; largest selection in the Bay Area.<\/p>\n<p><strong>We aim to take care of our speakers and volunteers, VIP room with massage therapists. Exquisite wine tasting donated by Padis Vineyards at 3pm for VIP guests only. <\/strong><strong><br clear=\"all\" \/><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div>\n<div>\n<div>9:30am<\/div>\n<p>Breakfast<\/p>\n<h1>Espresso &amp; Belgian Waffle Bar<\/h1>\n<p><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/belgiumwaffles.png\" alt=\"Belgian Waffles\" \/><\/p>\n<\/div>\n<div>\n<div>\n<div>10-10:45am<\/div>\n<h1>\u201cMicroformats 2 \u2013 The Next Evolutionary Step For Web Data\u201d<\/h1>\n<p><a href=\"http:\/\/www.twitter.com\/t\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/tantekcelik-mozilla.png\" alt=\"Tantek \u00c7elik\" \/><\/a><\/p>\n<\/div>\n<p><strong>with Tantek \u00c7elik<\/strong><strong>Mozilla, W3C Invited Board Member<\/strong><em>Standards Lead, International Speaker &amp; Author, An Event Apart Speaker<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/mozilla-logo.png\" alt=\"Mozilla\" \/><\/p>\n<p>Microformats are published on millions of sites, providing a simple API for the data on those pages with no additional URLs, file formats, callbacks etc. Similar approaches have subsequently emerged and grown as well, like RDFa and microdata. This talk discusses lessons learned in all HTML data in general, and how those lessons have been incorporated into microformats 2.0, the latest in the evolution of web data.<\/p>\n<\/div>\n<div>\n<div>\n<div>11-11:45am<\/div>\n<h1>\u201cSelect This!\u201d<\/h1>\n<p><a href=\"https:\/\/twitter.com\/#%21\/estellevw\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/estelleweyl-standardista.png\" alt=\"Estelle Weyl\" \/><\/a><\/p>\n<\/div>\n<p><strong>with Estelle Weyl<\/strong><strong><a href=\"http:\/\/www.standardista.com\" target=\"_blank\">Standardista<\/a><\/strong><em>International Speaker &amp; Author<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/standardista-logo.png\" alt=\"Standardista\" \/><\/p>\n<p>Pick an element, any element. Style it. No IDs. No classes. No jQuery necessary. We\u2019ll learn all the new features of CSS3 selectors that enable you to select this DOM node, that DOM node, and even imaginary DOM nodes based on attributes, relation to other elements, location in the DOM, or just an element\u2019s mere existence. The possibilities are endless, if you know how to use the tools in your tool box. Today\u2019s tool is CSS3 selectors.<\/p>\n<\/div>\n<div>\n<div>\n<div>12-1:00pm<\/div>\n<h1>\u201cSay Hello to Octicons\u201d<\/h1>\n<p><a href=\"https:\/\/twitter.com\/#%21\/jonrohan\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/jon-github.png\" alt=\"Jon Rohan\" \/><\/a> <a href=\"https:\/\/twitter.com\/#%21\/cameronmcefee\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/cam-github.png\" alt=\"Cameron\" \/><\/a><\/p>\n<\/div>\n<p><strong>with Jon Rohan &amp; Cameron McEffee<\/strong><strong><\/strong><strong>GitHub<\/strong><em>New Media Designers \/ Front-End Developers<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/github-logo.png\" alt=\"GitHub\" \/><\/p>\n<p>The web is increasingly becoming more fluid &amp; scalable. With higher resolution screens coming out, GitHub wanted to be ahead of the curve by building a font icon set. Listen to what critical decisions we made for Octicons as we detail the successes, failures, &amp; compromises.<\/p>\n<\/div>\n<div>\n<div>\n<div>1-2:15pm<\/div>\n<p>Lunch<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/lunch.png\" alt=\"Lunch\" \/><\/p>\n<\/div>\n<h1>Local Restaurants, Various Cuisines \u2013 Both Vegetarian and Non-Vegetarian. Lots of Choices!<\/h1>\n<\/div>\n<div>\n<div>\n<div>1:30-2:15pm<\/div>\n<h1>\u201c\u201dHow Does Interaction Design Work with Technology?\u201d<\/h1>\n<\/div>\n<p><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/method-logo.png\" alt=\"Method\" \/><\/p>\n<p><strong>Ryan Gates<\/strong><strong>Interactive Design Production Lead, Method Inc.<\/strong><br \/>\n<strong>Melissa Martin<\/strong><strong>Sr. Interaction Designer, Method Inc. <\/strong><br \/>\n<strong>Jacob Surber<\/strong><strong>Sr. Product Manager HTML Design, Adobe <\/strong><br \/>\n<strong>Sumeet Saxena<\/strong><strong>Principal of Engineering, GlobalLogicPanel Description<\/strong><\/p>\n<p><strong>Panel Description <\/strong><br \/>\nIn order to bring brands, products, and services to market successfully, designers and technologists must find ways of collaborating together to build products and services that are useful, valuable, and differentiated. This panel will discuss how interaction designers and technologists should work together to bring these designs to life, and why it is so critical for the two disciplines to communicate and collaborate during design and development.<\/p>\n<p><strong>Meet Ryan Gates (Moderator)<\/strong><br \/>\nRyan Gates is Method\u2019s Interactive Production Design Lead, helping to guide their digital production unit. He brings hands-on experience with branding, UI design\/prototyping\/implementation, responsive web environments, video production and motion graphics to support a true end-to-end creative production process. Ryan has previously designed and supported campaigns for CalArts, Roy and Edna Disney\/CalArts Theater (REDCAT), AT&amp;T, Dreyer\u2019s, H\u00e4agen-Dazs, SanDisk, Samsung, Chiquita and Logitech. He earned a BFA in Graphic Design from California College of the Arts and University of San Francisco.<\/p>\n<\/div>\n<div>\n<div>\n<div>2:30-3:15pm<\/div>\n<h1>\u201cThe Process of Creating Useful &amp; Elegant Responsive Design\u201d<\/h1>\n<p><a href=\"https:\/\/twitter.com\/#%21\/ryankirkman\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/ryankirkman-saymedia.png\" alt=\"Ryan Kirkman\" \/><\/a><\/p>\n<\/div>\n<p><strong>with Ryan Kirkman<\/strong><strong>Say Media\u00a0<\/strong><em>Art Director<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/say-logo.png\" alt=\"Say Media\" \/><\/p>\n<p>User experience will determine whether a visitor leaves your page or hangs out for a while. The site needs to be readable and easy to navigate on a smart phone, iPad or laptop. Having attractive design won\u2019t hurt either. Ryan is a hidden gem in the industry when it comes to interactive and web design. This is a presentation filled with tips you won\u2019t want to miss.<\/p>\n<\/div>\n<div>\n<div>\n<div>3:30-4:00pm<\/div>\n<h1>\u201cNew Developments in Sass 3.2 &amp; Compass 0.13\u2033<\/h1>\n<p><a href=\"https:\/\/twitter.com\/#%21\/chriseppstein\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/chriseppstein.png\" alt=\"Chris Eppstein\" \/><\/a><\/p>\n<\/div>\n<p><strong>Chris Eppstein<\/strong><strong>Founder of COMPASS<\/strong><em>Software Architect for @<a href=\"http:\/\/www.twitter.com\/caring\">Caring<\/a><br \/>\nRubyist, Creator of the Compass stylesheet framework, Sass Core Developer<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/compass-logo.png\" alt=\"Compass\" \/><\/p>\n<\/div>\n<div>\n<div>\n<div>4:15-5:00pm<\/div>\n<h1>\u201cHTML5:The Mobile Approach\u201d<\/h1>\n<p><a href=\"https:\/\/twitter.com\/#%21\/girlie_mac\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/tomomiimura-girliemac.png\" alt=\"Tomomi Imura\" \/><\/a><\/p>\n<\/div>\n<p><strong>Tomomi Imura<\/strong><strong>Nokia<\/strong> <em>HTML5 Evangelist &amp; App Developer<\/em><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/speakers\/nokia-logo.png\" alt=\"Nokia\" \/><\/p>\n<p>Building a mobile web no longer means dumbing down an existing desktop website. With HTML5 and ever-evolving smartphone capabilities, now you can create awesome web apps running on mobile browsers.<br \/>\nIn this talk, I will cover the adaptive design approach, to support many form-factors including desktop to mobile phones, and mobile-specific approach, to leverage HTML5 APIs that enable to have native-like experience on browser.<\/p>\n<\/div>\n<div>\n<div>\n<div>5:15-6:00pm<\/div>\n<h1>\u201c\u201dFrom Ideation to Innovation: The Process of Making Something Yours\u201d<\/h1>\n<p><img decoding=\"async\" src=\"https:\/\/evbdn.eventbrite.com\/s3-s3\/eventlogos\/1040789\/danielbru-1.png\" alt=\"Daniel Brusilovsky\" \/><\/p>\n<\/div>\n<p><strong>Daniel Brusilovsky<\/strong><strong>Founder &amp; CEO of Teens in Tech Labs<\/strong><br \/>\n<a href=\"https:\/\/twitter.com\/#%21\/danielbru\" target=\"_blank\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.cascadesf.com\/images\/teenintech.png\" alt=\"Teens in Tech\" \/><\/a><\/p>\n<p>Daniel Brusilovsky is the Founder and CEO of Teens in Tech Labs, a company he founded in February 2008. He\u2019s also a Summer Associate at Highland Capital Partners on the Internet &amp; Digital Media investment team.<\/p>\n<p>Previously, he was on the founding team of Qik (acquired by Skype), and spent time at TechCrunch (acquired by Aol), atebits (acquired by Twitter), Apture (acquired by Google), and JESS3. He also actively advises Y Combinator funded startup Everyme, and is an Associate Producer of Olive The Movie. Follow him on Twitter: <a href=\"http:\/\/twitter.com\/danielbru\" target=\"_blank\">@danielbru<\/a>.<\/p>\n<\/div>\n<\/div>\n<div class=\"SPOSTARBUST-Related-Posts\"><H3>Related Posts<\/H3><ul class=\"entry-meta\"><li class=\"SPOSTARBUST-Related-Post\"><a title=\"Qubop Creates MICROS inMotion, Bringing The Consumer Experience to Enterprise Mobile\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/04\/qubop-creates-micros-inmotion-bringing-the-consumer-experience-to-enterprise-mobile\/\" rel=\"bookmark\">Qubop Creates MICROS inMotion, Bringing The Consumer Experience to Enterprise Mobile<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"YouTube does the Harlem Shake. Coolest HTML5 effect from a major site\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/03\/youtube-does-the-harlem-shake-coolest-html5-effect-from-a-major-site\/\" rel=\"bookmark\">YouTube does the Harlem Shake. Coolest HTML5 effect from a major site<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"SimLibrary &#8211; When Danish Libraries Go Digital\" href=\"https:\/\/www.perivision.net\/wordpress\/2013\/02\/simlibrary-when-danish-libraries-go-digital\/\" rel=\"bookmark\">SimLibrary &#8211; When Danish Libraries Go Digital<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"Hyper Fast HTML5. Fastest Javascript CSS ever.\" href=\"https:\/\/www.perivision.net\/wordpress\/2012\/12\/hyper-fast-html5-fastest-javascript-css-ever\/\" rel=\"bookmark\">Hyper Fast HTML5. Fastest Javascript CSS ever.<\/a><\/li>\n<li class=\"SPOSTARBUST-Related-Post\"><a title=\"A beautiful functional watch in HTML5.  NO IMAGES\" href=\"https:\/\/www.perivision.net\/wordpress\/2012\/08\/a-beautiful-functional-watch-in-html5-no-images\/\" rel=\"bookmark\">A beautiful functional watch in HTML5.  NO IMAGES<\/a><\/li>\n<\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>&#8220;CASCADE SF&#8217;s first &#8220;Innovators of the Web Conference&#8221; Yes, this fine Sat I&#8217;m at the Adobe building in SF watching presentations on the intersection of design and programming.\u00a0 The focus of the talks today are line by line examples of how to break through the limits of design for the web with new cutting edge&hellip; <a class=\"read-more\" href=\"https:\/\/www.perivision.net\/wordpress\/2012\/07\/html5-css3-uxui-and-mobile-design-oh-my\/\">Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":7565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_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":[1449,59],"tags":[1671,392,1785,1786,1784],"class_list":["post-7564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-event","category-tips","tag-css3","tag-html5","tag-mobile-design","tag-online-presentations","tag-uxui"],"jetpack_featured_media_url":"https:\/\/www.perivision.net\/wordpress\/wp-content\/uploads\/2012\/07\/7-21-2012-12-38-29-PM.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pjzQD-1Y0","_links":{"self":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/7564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/comments?post=7564"}],"version-history":[{"count":5,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/7564\/revisions"}],"predecessor-version":[{"id":7570,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/posts\/7564\/revisions\/7570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/media\/7565"}],"wp:attachment":[{"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/media?parent=7564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/categories?post=7564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.perivision.net\/wordpress\/wp-json\/wp\/v2\/tags?post=7564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}