Reasons to be Responsive
LONDON – JUNE 3rd, 2013
A reason to be Responsive is a full-day workshop with Brad Frost (@brad_frost). Brad will take a deep dive into the world of responsive web design, covering broad concepts, strategy design process, emerging design patterns and principles, and development best practices and considerations. This is a rare opportunity to spend a full day with one of the most respected minds in responsive design today.
Info:
-================================================================================================-
Introduction:
– Introduction about how you are, examples websites and books (but enough about me, let’s talk about you)
– What are we going to talk about? Manage expectations.
– What do you want to Know? The audience answer: RWD advertising, RWD images, convinces another to being RWD. RWD performance, testing tools
-================================================================================================-
Starting:
– Talking about Percentage of devices connected to the web, charts, showing the revolution of ipad, 98% of the market, showing a lot of interesting charts of different devices connected to the web.
– Traffic coming from Mobile devices:
– Showing Morgan Stanley stats,: 23% facebook users are mobile, 60% user accessing from mobile devices. Important are: LINKS, this connections
– Smartphones are not consider a luxury anymore, are a necessity.
– APP Vs. Web AP: Oh another APP: Do you really need and APP for every single thing you do? Links don’t open APPs (Jason Grigsby)
– Final conclusion: There are a lot of good reasons for making APP. But not for everything. Separate device experience.
– Device experiences advantages: create a more dedicated, optimised experience, don’t worry about sizes
– Mobile wasn’t more important before, so people didn’t care. Mobile now is most important so be Mobile First.
– Brad talking about the BBC, guardian, people, and some others huge portals
– Responsive retrofitting
– Diversity is not a bug, it’s an opportunity.
– Mobile First and Mobile last comparison: degraded, shoe-horned, short-sighted , crappy Vs. Progressive-enhanced, future-friendly, awesome
– RWD is not just RWD, is : Feature detection, performance, ergonomics, dynamic loading, etc not just the 3 RWD principles: fluid grids, flexible fonts, and media queries.
– Showing different NON-mobile websites and those screens errors, landscape bad or non UX
– Mobile users don’t do that. That’s not true. Mobile users will do anything and everything desktop user will do, provided it’s presentation in a usable way. Give people what they want.
– In order to do that, we need “Content parity”.
– Performance: You have 5 second somebody else time: mean your website needs to load on 5 sec
– Smartphones: Now looks like nobody cares about BlackBerry, well Mr. Barack Obama is using blackBerry!
– Performance is INVISIBLE
– Performance as design
– Why Facebook design sucks so much? Are you doing performance test?
– Setting a Performance Budget.
– PE is not about just design for the lower denominator. Is about to start it from there
– True facts about Mobile First: “Everything is going to change”.
– There is no such a thing as future-proof but we can be future-friendly
– Invest in your content: Make APIs not WAR.
– Universal content. Content is like water. Web can go anywhere.
-================================================================================================-
Process and Workflow:
– Atomic Design: Going from “Abstract” to “Concrete”: Atoms (html elements), Molecules (set of atoms, encourage a “do a thing and do it well”), Organisms, (group of molecules joined together to form a distinct section), Templates (page-level, group of organisms, begin their life as HTML), pages (specific instance of a template, highest fidelity. Template content is replaced with real/sample content)
– Atomic Design: provides a methodology for crafting an effective design system. Easily traverse from abstract to concrete. Promotes consistency and cohesion.
– Pattern lab (made by Brad) is based on Atomic Design. It’s not a grid system.
– We are not designing pages we are designing system interfaces
– Frameworks in general: Why I like them but I don’t
– Focus on the goal: Put the brands brand out of the discussion. Keep height and width on the abstract level
– Testing: Try to test on real devices ASAP, avoid surprises
– The POST-PSD era: How we are moving away from .psd era?. Sketch out your websites. Why I don’t wireframe much. You do still needs to show how is going to be, .psd still valuable, but don’t depend on it. Is very hard for a designer POV to get Mobile first and then make Large
– Responsive Patters: a collection of patters and modules for responsive designs.
– What grid system should I use? The answer is I don’t know.
– Future of CSS layout. Grid layout. Flexbox, CSS3 columns, CSS regions.
– Mobile first styles against Desktop first styles. Media queries consideration: treat layout as an enhancement by writing mobile-first media queries. Let content, not device widths, determine breakpoints. Use relative units for media queries. Use major and minor breakpoints. Don’t overdo it.
– Solving the problem of layouts: Content choreography. Off canvas considerations: can be effective way to avoid simply stacking content
– Layout considerations: treat layout as an enhancement.
– Scrolling events.
– Performance matters: bandwidth and request are very important. Don’t punish Mobile Web. Screen size is just a variable. Large screens do not necessary mean fast connection
– Use conditional loaders. Load “the thing” you are specking and not “the things” we are not expecting. Use ‘enquire.js’ and ‘matchMedia()’, ‘conditional loading CSS’
– Touch consideration:
– Pixel perfect is going finger friendly: interesting considerations above the design and how the people control the devices
– Don’t rely on hover states.
– Look for opportunities to provide enhancement for touch devices, such as swipe gestures (like swipe.js)
– Be mindful of ergonomics and how people hold different devices
– RWD navigation menu. Anchor nav (link to footer). Toggle nav (=). Nav fly-out (<–>). Priority (+-)Links.
– Complex NAV Patters: Multi-toggle. Avoid Complexity, restructure. Make user test. Prioritise. Skip the sub-nav.
– Nested accordions (ie: sony complex navigation) problems when you rely on hover, ‘landing pages’ and ‘link pages’
– Finally some extra navigation considerations.
– Image-background: well supported. Multiple background ant download.
– Icons: Vectorize as many things as possible. Use HTML special characters. Use icon fonts. Use .svg with appropriate fallbacks If using sprites, consider making a high-resolution sprite sheet. icoMoon.
– RWD images: The devil is in the details. A smaller file size AND a better quality on both screen types! This is impossible.
– RWD approach: Possibility to change the source: may be cropped the original
– RWD approach: Picture element
– RWD approach: picture with picturefill.js
– What ever solution you put on the plate: Should be stable:
– Load the small image asset by default. Only make one request per image.
– Consider server-side detection
– Ensure content is legible on small screens.
– Preserve aspect ratio.
– Adaptive Maps: Use Google Static API (map picture) instead the Google Dynamic API (thinking progressive) they don’t want a fully experience on Mobile, just the place where they needs to go.
– RWD Flexbox. Magnific popup.
– RWD tables: having a look at some .CSS tricks ideas about them
– RWD carousels: Make sure you actually need one, is going to take a lot of resources. Use ‘<- prev’ and ‘next ->‘ instead ooo shortcuts. No-js solution, yepnope/Moderniz and swipe.js and implementation code.
– RWD accordions, forms, examples.
– Fully fluid forms: Subtract as much as possible. Design for touch. Smart defaults. Provide hinting. Validation. Use proper input types.
– Opt-out Responsive Design: Remove viewport meta and class the body
– Fixed positions: Doesn’t work on mobile devices. Avoid it, even js solutions.
– Viewports meta. Viewport considerations. Don’t disable the user ability to pinch and zoom. Only introduce the viewport meta tag when you are sure the content is Mobile-optimised.
– CSS box-sizing: * {box-sizing: border-box}
– SASS. Variables. Nested elements. Nesting media queries.
– Devices Support. Forget about “upgrade your browser”. These are people so don’t show a bad attitude: there is a difference between “support” and “optimization”. We can support as many as possible, but is going to be optimized for the primary ones.
– You don’t get decide which devices access your site, your users do. (Karen Macgrane)
– Emulators: modern.is, browserstack, etc. But test on real devices still the only way to proved your job really works.
– If you think you site works on every single device, you did test enough
-================================================================================================-
Bookmark:
Ish demo
Setting a Performance Budget
Mobitest speed
Detector combined browser- & feature-detection for your app
Atomic Design
Your Site’s Style Guide
The Post-PSD Era
Don’t Overthink It Grids
off canvas
Content choreography
- http://trentwalton.com/2011/07/14/content-choreography/
- http://www.jordanm.co.uk/lab/contentchoreography
enquireJS
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
touch events: swipe.js
RWD images
RWD images cropping
RWD picture element
- https://dvcs.w3.org/hg/html-proposals/raw-file/9443de7ff65f/responsive-images/responsive-images.html
RWD picture fill
Adaptive Maps
Magnific popup (RWD Flexbox)
RWD CSS tables
Chris Coyier
Opt-out Responsive Design
-================================================================================================-
My thoughts:
Venue: I did like the venue. Well connected. Nice place, I did like the futuristic coffe machine.
Speaker: Brad is a very easygoing guy and makes the workshop day pass eventually without notice.
Content: The content was good, I was expecting to see more javaScript and CSS (LESS/SASS) examples code, but it was good.
Recommend: Yes
@leolaneseltd
www.leolanese.com
One Comment
Simply want to say your article is as astounding.
The clarity for your post is just nice and i could
think you’re knowledgeable on this subject. Fine
along with your permission let me to grasp your feed to keep
updated with impending post. Thank you a million and please continue the gratifying work.