• No results found

Responsive Academy. Feel free to:

N/A
N/A
Protected

Academic year: 2021

Share "Responsive Academy. Feel free to:"

Copied!
7
0
0

Loading.... (view fulltext now)

Full text

(1)

Responsive Academy

It's time to get our hands dirty with what industry leaders are calling the biggest paradigm shift in web design in the last decade - Responsive Web Design. In fact, Mashable has dubbed 2013 "The Year of Responsive Web Design" (source). This is huge. Below are links to resources

(articles/video/audio) by the Internet's best and brightest here grouped around different

topics relating to RWD. Take the time to read/watch/listen to them all (or at least as much as you can) and we'll meet together to discuss, share, ask questions, and generally have a good time learning.

Feel free to:

• Send me any resources you stumble upon and are interesting or helpful (or perhaps even confusing) to you that you think we should look at together.

• Subscribe to updates to this Wiki page so you know if/when something gets added. • Email/Chat/Talk to me or your team leaders about anything along the way.

• Add any good examples of RWD that you find to the designated wiki page. A quote to get us started:

"Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to 'design for the ebb and flow of things.'" - Ethan Marcotte (the guy who coined the term "Responsive Web Design")

(2)

1. What is Responsive Web Design and Why Do We Need it?

Objectives:

This will help you understand...

• the basic concept of Responsive Web Design (bird's-eye view) • the impetus (driving force) behind RWD

Resources:

Essential

Responsive Web Design - http://alistapart.com/article/responsive-web-design - This is the article that started it all, written in May 2010. The author followed it up with a book by the same name in late 2011. There's a bit of techy stuff in here (code), but try to understand the general concept he's getting at - content that is flexible enough to adapt to varying viewport sizes. You will see this author and article referenced by everyone else and their mother, so it's good to know what they're talking about.

Why 2013 Is the Year of Responsive Web Design

http://mashable.com/2012/12/11/responsive-web-design/ - An article I referenced in the introduction. Cashmore highlights the differences between RWD and device-specific sites. Also, their site is a great working example of RWD.

Why Responsive Web Design? (VIDEO)

http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-responsive-web-design/why-responsive-web-design - This is part of a larger series of videos, but this one explains the RWD concept visually and concisely.

Extra

Responsive Web Design: What It Is and How To Use It

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ - Written over two years ago (in the "infancy" of RWD). Don't get bogged down in the code stuff, skim it for highlights and look at some of the examples they give. • Responsive web design: the war has not yet been won

http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/ - This article, just a few weeks old by contrast, is Elliot Jay Stock's plea for designers and developers to embrace the inherently flexible nature of the web. • Responsive Web Design - http://en.wikipedia.org/wiki/Responsive_web_design -

Wikipedia is the fount of all wisdom. Period. • Device Experiences & Responsive Design

(3)

https://developers.facebook.com/blog/post/2012/01/24/device-experiences---balanced with the need for device-specific functions. This article does a good job of breaking it down.

Over-achiever

A Dao of Web Design - http://alistapart.com/article/dao - This was written in 2000, yet speaks volumes about the need for flexibility on the web. This article is the philosophical foundation upon which the concepts of RWD are built (and you thought developers were all about "nuts and bolts")

• Skim through some writings here (http://responsivedesignweekly.com/) and here (http://bradfrost.github.com/this-is-responsive/).

(4)

2. What is My Role in Responsive Web Design?

Objectives:

This will help you understand...

• who is involved in the website creation process and what role(s) they play • what is required of you, and conversely, what is not

Now, more than ever, web design is a team effort. Responsive web design necessitates a re-thinking of how we do content strategy, design, and development. Each of us in this office excels at one of those areas. In addition to articles on your area of expertise, I would encourage you to read at least the bold articles for the others to further your understanding of the entire process.

Resources:

Content writers/strategists

Content Strategy and Responsive Design

http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/ • The Mobile Content Mandate - http://www.lukew.com/ff/entry.asp?1701 • The Case for Responsive Web Content It's All about the Users

http://www.netmagazine.com/features/case-responsive-web-content-its-all-about-users

• Content Choreography - http://trentwalton.com/2011/07/14/content-choreography/ • Extra

o Responsive Design, Nimble Architecture

http://www.clickz.com/clickz/column/2142760/responsive-design-nimble-architecture

o Content Strategy for Responsive Websites (slideshow)

http://www.slideshare.net/clarissapeterson/content-strategy-for-responsive-websites

Designers

Designing for a Responsive Web - http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/ - although the author makes a lot of definitive statements that I don't necessarily agree with ("you must... you cannot"), there are some good overall tips, cautions, things to avoid, etc.

(5)

http://www.uxbooth.com/articles/how-• Practical Design Considerations for Responsive Sites

http://designshack.net/articles/layouts/practical-design-considerations-for-responsive-sites/

• The Top Responsive Web Design Problems and how to Avoid Them

http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

• Principles of Responsive Web Design - http://snugug.com/musings/principles-responsive-web-design

• Extra

o Design Process in the Responsive Age

http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ - This article delves a bit into workflow considerations (which we'll get to) but has some good tidbits about designing responsively in general. Developers

I won't bore you with all the super-techy stuff, but here are a few things you can skim to get the gist of the sorts of things that developers have to think about in regards to RWD.

• http://www.html5rocks.com/en/mobile/responsivedesign/ - if none of the code stuff makes sense, skip down the "Wrapping up" section.

• Responsible Considerations for Responsive Web Design

http://coding.smashingmagazine.com/2013/03/11/responsible-web-design/

In case you didn't pick up on this already, a lot of these articles don't focus solely on one area of expertise. With RWD, it's hard to talk about content without talking about design without talking about code without talking about user interface without talking about layout without talking about workflow, etc, etc, etc. Hopefully this highlights for you the interdependency that's necessary on projects like this.

(6)

3. How will this Look in Practice?

Objectives:

This will help us...

• understand what processes and workflows are being used by others in our field • formulate ways to do our work more efficiently

• define a better workflow for website creation from start to finish that incorporates the principles of RWD

• some new tools (and perhaps some familiar ones) to help you get your job done • what others are using and how they're collaborating with their teams

Resources:

What makes a better deliverable? Mockups/wireframes or style prototypes? Our New Responsive Design Deliverable: The Style Prototype

http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_p rototype - The "why," "what," and "when" of using style prototypes to get signoff from your clients

• Responsive Comping: Obtaining Signoff without Mockups

http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups • Style Tiles as a Web Design Process Tool -

http://badassideas.com/style-tiles-as-a-web-design-process-tool/ - Style Tiles are really taking off as a helpful tool/resource in the web design world. Here's a great introduction to them.

• http://styletil.es/

What might a RWD workflow look like?

Responsive Web Design Workflow Considerations

http://webdesignledger.com/tips/responsive-web-design-workflow-considerations - Great overview of new techniques and emerging processes.

Sarah Parmenter: The Responsive Workflow (audio)

http://huffduffer.com/adactio/103309 - This is a short talk from March of this year. Well worth a listen.

• An Event Apart: Responsive Design Workflow - http://www.lukew.com/ff/entry.asp?1617 - Luke W summarizes another talk by Sarah Parmenter from 2012.

• Responsive Design Workflow (slidedeck)

https://speakerdeck.com/stephenhay/responsive-design-workflow - Slide decks are never as helpful by themselves as they would be accompanied by the actual presenter,

(7)

• http://media.smashingmagazine.com/wp-content/uploads/2013/02/rwd.jpg - Sorry it's not higher-res, but this is a simple, visual example of an RWD workflow. Notice how certain things can be done in tandem. Death to the waterfall.

• Mastering RealWorld Constraints

http://uxdesign.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/ What are other companies doing right now?

Responsive Summit: Workflow - http://www.markboulton.co.uk/journal/responsive-summit-workflow - 25 industry leaders got together in London to talk RWD workflows. • Sparkbox -

http://webdesign.tutsplus.com/articles/workflow/the-sparkbox-responsive-design-process/

• Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

• Caplin - http://blog.caplin.com/2012/11/09/our-responsive-web-design-workflow-for-caplin-com/

References

Related documents

Since 1992, the principal income distribution series (reported annually in Households Below Average Income) has been based on household survey data in which the incomes of a

The local trade union federation holds together the trade union federation holds together the plant level unions at the local level in a. plant level unions at the local level in

Chlamydia often has no symptoms for weeks so the infected individual and continue to spread the disease without knowingA. Chlamydia is usually a genital disease but can cause

Roughly one year ago (on January 31, 2007 to be exact), following the announcement of the programme by the Honourable Prime Minister in his budget speech, the Bank launched the

What amount of investment income should Cabbage report in its income statement for the year ended December 31, 2012, under the fair value method.. What amount of investment

Day 2 Friday morning, ater some time to eat breakfast and freshen up, we hook up with the best walking tour in the city, Sandemans New Prague Walking Tour.. Our tour will cover

Overall pooling for occlusal outcomes of fixed appliance (FA) treatment assessed using the Orthodontic Grading System proposed by the American Board of Orthodontics Mean

None of the public policies served by the firefighter's rule would be served by an extension of the firefighter's rule to cover manufacturers in this situation. Hass stated