This really echo's the reasons why I still have trouble with the 'thoughts on flash' mentality (although, I know flash is irrelevant here). It's similar in that there is this self proclaimed 'support' for html5 (making needing flash irrelevant)… but in real life the devices are far from supporting HTML5. Support to apple and support to developers is a totally different story. Even many simple things that are HTML5 become very difficult in developing for iPhone, iPad or other iOS devices. Here's an example of many issues that result in attempting to use features that iOS claims to "support".
Embedded Link
Issues with position fixed & scrolling on iOS
With the release of iOS 5, fixed positioned layout is said to be supported in MobileSafari. The word supported needs to be taken with a pinch of salt, because there's all kinds of issues which I i…
Here is a great example but an even better writeup on the full process. Some great details on the inner working on css3 animations and the different browser implementations. It's amazing the things that css can accomplish now, especially when we don't support ie! Jokes!
Hakim / CSS3 Scroll Effects
Decided it was time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. Not intended for any practical use but the visuals are surprisingly impactful.
I hadn’t heard there was support for calc() in css yet, but apparently you can use it in a couple browsers! This is very exciting news and I wonder how long until it’s fully supported. Currently it can be used in the chrome 19 (with vendor prefix: -webkit-calc), firefox since ff8 (with the vendor prefix: -moz-calc) and the biggest surprise of all is that IE9 supports it already with no prefix! It seems css will begin contending with some of the css preprocessors.
Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first.
Compare process to print with a press – linear process has been co-opted for the web
discover, design, develop, deliver
Break down the one way process from design to develop. The workflow should cycle between design and develop.
Text:
How well does the layout adapt?
Do individual modules still feel usable?
Mobile First! – Luke Wroblewski
The argument: Mobile traffic has explided, new capabilities (touch, geo, voice, ubiquity), narrower screens force us to focus.
Think about these things earlier in the process gives a better end product
What value does each content have for our mobile users?
Mobile First and Design for Content First (really Content always)
500 Android – snapshot from google analytics: http://stephanierieger.com/the-trouble-with-android/
Will screen resolutions standardize over time? Who knows, we need to be thinking flexible, it is even the more future proof solution.
Grids
The History of Grids – Every movement in art can be seen as a response to another
Start design with a network of modules
…methods and rules upon which it is impossible to improve have been developed for centuries… -Jan Tschichold
Mark Boulton introduces “The New Canon” for web design
-Content out, not canvas in.
-Create connectedness
-Bind the content to the device
aworkinglibrary.com – change – Mandy Brown “rich designs can emerge from flexible roots… the web is not print…
it’s all about balancing the ease of dev vs ease of maintenance
Frameworks are very valuable for prototyping
Design your source code order. think about linear and layout at the same time.
Bandwidth
no correlation between screensize and connection speed (or price even)
a matter of serving appropriate images
a hack really: preloaders, cookies and race conditions (http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions)
Each browser does this differently though and it’s not standardized.
Can we solve this with new markup? A new html element? Like th evideo or audio elements?
Video element can have media query attached and multiple source files referenced.
Backgrounds
stuntbox.com
background-position: 0 0; – x y; left top; 50px 0; 0 50px;
it’s a bit different for percentages: 50% 50% (centered). percentage for packground position is proportional to the image itself and the container. t places that point in the background image in that position in the container.
Resizing background images: background-size css property. Set in pixel based terms or in proportions/percentages. (not 100% supported, but can be used as progressive enhancement).
Media Queries
Descendant from media type style sheets: scree, print, handheld, projector…
display area and rendering surface
Think of the browser’s viewport as the display area and the display as the rendering surface.
Specify ranges with min- and max- prefixes for browsers above or below a certain threshold or breakpoint.
Long list of media query features: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. These can be combined in statements.
Can combine media types as well.
Also keywords for mixing the statements: only, not, and
Put it into practice:
Looking at the weather module on the boston globe as an example. http://bostonglobe.com/
Don’t suppress things before discussing simplifying it.
How do you choose breakpoints?
(The only way I’ve ever learned anything, is by doing it wrong first)
Initial breakpoints: 320, 480, 768, 1024, 1200px
Set up the queries to support Mobile First
Mobile first workflow overview, start with one layout and additively add more.
Polyfills
css3-mediaqueries-js: slower, first on the scene.
respond.js: very fast, only tests for min-width and max-width, only ~3kb
There’s no real set of IDEAL breakpoints
We’ve been very focused on columns, let’s refocus on content! http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Set major increments and have the smallest breakpoint totally fluid and then find breakpoints dependent on the design (content and typography) rather than devices. Let’s not choose our breakpoints based on devices, but let our designs dictate what looks best. paulrobertlloyd.com
Start with the smallest part
Advanced Layouts
Negative margins to break out of the grid
Box-sizing
CSS3 – the waiting game
Multiple background images
http://contentsmagazine.com/ Setting the top margin and absolute position to 5em/-5em, and the navigation is part of the main content. Smaller sizes the navigation is at the bottom and larger it is set to position absolute and fits inside the margin.
Use IE conditionals to load specific stylesheets for them. And use media=”only all” for the enhanced styles
Minify and combine/concatenate javascript files
Conditionally load assets (progressive enhancement – if a browser can’t be enhanced, let’s not load the files that would enhance it). Test for capabilities of device and not test for the device itself labjs.com yepnopejs.com
Constantly ask yourself: is this element content or an enhancement.
Fonts: sasquatchmusicfestival.com (fonts for web are usually pretty heavy)
Thinking about process and patterns
1. Width
2. Hierarchy
3. Density
4. Interaction
Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is…
a lot like setting something on fire to see exactly how flammable it is
Great analogy, since the only real way to know a bandwidth speed is to download something and time it… so we can’t effectively rely on that for determining which image file to deliver. A proposal for a new html element to handle multiple image source files, much like the new video and audio elements:
Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions.
