Top Banner

Click here to load reader

Being Responsive to Responsive Web Design

Jul 16, 2015

ReportDownload

Design

Click to add Headline

Thursday, December 6, 10:15 a.m.Hub Tag: #tech12 LK2

Thomas Kugler, John MillsBeing Responsive to Responsive Web DesignWelcome to our session! 1Thomas Kugler: Website Administrator, ASAE(1/11present, with prior contract assignment 9/101/11)Work with team on Web Strategies, Information Architecture, Content Planning, Social Media; Design & Develop; InnovateFormer ASAE web colleague of John Mills,co-Technology Idea Labs leaderGood design is problem-solving

Who We Are#TECH12LK2Graphic & Web Design & Development was a career change for me; Ive only been doing it fivesix years, following previous careers in film and music in Los Angeles. Ive found it to be a better way to bridge the gap between creativity and commerce, and to have more control over ones destiny than one has in the entertainment industry. In our web team meetings, we often discuss raising awareness that were not just technical, but also a creative team. Since design can be defined as creative problem-solving, RWD fits right in.2John Mills: Web Manager for PMMI (8 years in the association world overall)Design, content, video, narration, social spaces are how and where I live. Off-hours: Occasionally pretending I'm a Jedi.

Who We Are#TECH12LK2Ive been meddling in the Interwebs since 1992, learning as I went and ignoring what I thought was my initial calling theatre to take part in something that has grown into an artistic, thriving environment thats getting even more interesting as we have to tackle the challenges of responsive design.

There are those that see the design from a Mathematical perspective, but the beautiful puzzle has to do with straight up, unabashed art.

The reason Im so excited for Responsive Design is that this feels like that moment when things truly are limitelss and possible with the Web a tipping point. A way to make it so that everything is simple AND beautiful and places the emphasis on the users experience to get to what they want, when they want it, as easily as you can get it to them.3What is Responsive Web Design (RWD)?

In a nutshellAn approach where a site is optimized for easy reading and navigation across a wide range of devices

In other wordsone website, delivered differently for different media

(Take this one togetherIll do second part) 4

You Are Designing For?Source: http://blog.nielsen.com/nielsenwire/wp-content/uploads/2012/11/Holiday-Devices-K6-12.pngWe are finally at a stage where we all should know that were not designing just for our members and prospective members in the current day we are preparing the path to reach and appeal to the members who are currently 6.5Keeping your focus on your current audienceThe Balancing ActPlanning for the future: audience, membership, devicesResponsive Design is the Means to Accomplish BothResponsive Design has arisen as a way to make sites and their content accessible to the Brave New World that is no longer defined by consumption at a desk but on the go. We live in a world with endless tethers but no longer the anchors that used to define connectivity.

6Apps Do It All !The Myth of AppsMany people believe and preach that apps are a mobile strategy. They rightly focus on the prevalence and dominance of apps, but in the process lose focus on the fact that they are a piece of a mobile strategy, 7Apps Dont Do It All !The Truth of AppsThey are part of a digital ecosystem, all things interdependent and playing a part in a bigger picture.

Many people believe and preach that apps are a mobile strategy. They rightly focus on the prevalence and dominance of apps, but in the process lose focus on the fact that they are a piece of a mobile strategy, 8Apps do one thing (or set of things) very wellApps are often for a pre-existing audience (Esp. in case of associations)The Truth of AppsApps involve effort, updates, multi-platform iOS, Android, Blackberry, Windowsall separate apps

This is not to say apps dont have a place! Of course they do! They are a big part of a mobile strategy. But lets not forget what got us here in the first place: Web sites. Universal, all-encompassing.

Does Amazon have an app? Of course! But THEY ARE ALSO constantly working to make their Web site work the best it can cross-device.

Does Angry Birds have a Web site? YES THEY DO! To sell merchandise, promote their brand and give you ways to connect!9Theyre not excitingPeople dont expect muchApps are more important Less important than socialHTML5 the wonder tool

The Myths of the WebYour web site is the HUB for all of your content that you want to get to your members and the world. Its where youre sending people when you send out links. Its your presence in Google searches.

HTML5 is the next generation of Hypertext Markup Language. Thats it. HTML5 is not software to be installedbut rather a new version of HTML.

Irony: the rich experience of apps has led to people expecting more of Web sites. Do sites need to catch up to be as cool as apps? Yes but they are, and Responsive is part of that.

10The Universal PortalDraw people in Your Web audience is the WorldSell yourself to potential membersYour knowledge and value examples are out thereNo need to downloadSEOPeople find things through Google, Social Media they dont send links to appsThe Truths of the WebYour web site can do EVERYTHING (though sometimes not as well as you'd like)

11The Truths of the WebSo Why Responsive and not M?The dreaded M dot subdomainTechnical: Device detection redirects can have unwanted consequencesPerformance lag for redirectsRedirects and subdomains - device handlers - add a layer of unnecessary work and maintenanceWhen someone sends an m link to the world, only m users will get an arguably satisfying experience.

Do you go to www.amazon.com or m.amazon.com? (M-dot redirects you to www now)

12So Why Responsive and not M?Practical:A parallel site is not good for SEOGive people ONE URL as a resourceCost. Why develop twice what you can develop once?A funny little story about a big misunderstanding: When someone left a responsive site directly to a site with mobile detect.

Why Responsive Design MattersTeve Torbes made a site that worked on a range of devices, and while not perfect, was proud of the first foray into a more responsive world on a small scale.

One morning: panic had set in at the office. His site wasnt working properly, per board members and the CEO.

See, a link to a hotel registration site was used by necessity that used the dreaded m-dot subdomain that read an iPad (and other tablets) as a phone, leading to a CEO who got flustered (as well as a board), asking why Teve Torbes couldnt change it.

Someone brought up a great point: their membership base still uses Blackberry at a rate of 53% for mobile. All I will say is, good for them, that buys them an extra six months of development time before they get to change over, or accept that the new Blackberry 10 is going to have to play better by responsive rules than old models.

13Two upstart search engines recommend it: recommends responsive...http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html...and so doeshttp://www.bing.com/community/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-desktop-mobile-etc.aspxWhy Responsive Design Matters

and bing is the official search engine of Spider-Man, so they know what theyre talking about.

14Weve been in a mobile world long enough to start making real content strategy changes Obama and Romney campaigns both struggled with mobile content delivery: http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/Attention AdjustmentsResponsive Design and Content Strategy

And nowIcons source: http://www.iconarchive.com/Newspapers had to make room for radio, which had to make room for TV. While newspapers are now fading as mobile content consumption increasingly marginalizes their presence, the important thing to remember is this: All three coexist, and all three deliver you the news just in different formats and designed for where and how you will consume them. The newspaper is designed around a person reading a full article, with updates coming as they are available in new editions. Radio repeats and refines stories through the day in minutes-long segments designed for you to get the biggest highlights in a compressed amount of time on the way to work, while getting ready to head out. TV news blasts those headlines at you, and in-depth stories are shelved for other programs. The idea is that you will get all the news that is important to your world which to you is the world itself - within 20 minutes (allowing for ads).

And now we have to be mindful that responsive makes us more agile to make sure the content is easily consumed within the context of the newest devices, smartphones and tablets.15Boston Globe http://www.bostonglobe.com/Mobile-first thinkingDrag and resize the window to see RWD in actionThe Future is Now

THIS is what the future will be and its here now.

Pay special attention to the navigation and how it changes based on screen size!16The Information Accessibility RevolutionYour site and your content should be equally accessible to all devicesResponsive is a part of this.Congress.govNote that this is a Beta site its OK to be iterative!Even Congress Is On Board

They might not be able to agree about much, but Congress agreed to push out a Beta responsive site.

Important lesson: its OK to be iterative.17What is Responsive Web Design (RWD)?

An approach to web design in which a site is crafted to provide an optimal viewing experienceeasy reading and navigation with a minimum of resi