Last month I attended Mobilism 2013 in Amsterdam – a really awesome conference about mobile web design. My first Mobilism in 2011 was a real starting point for Responsive Web Design (RWD) and Mobile First to me and I was excited which topics will win this year. There is full coverage at mobilsm website, video recordings will follow soon.
The most important topics and starting points for me this year are:
- RWD workflow between design and development
- Performance optimization and checking browser repaints
- Working with and for console browsers
Following talks are summarized:
- The New Photoshop, Part 2: The Revenge of the Web – Stephen Hay
- Rendering without lumpy bits – Jake Archibald
- Responsible Responsive Images – Mat Marquis
- Console Browsers: The Ultimate Torture Test – Anna Debenham
The New Photoshop, Part 2: The Revenge of the Web – Stephen Hay
I had a particular interest in this talk. To get the right workflow in RWD is still in progress, especially for big agencies. In particular there has to be a better one between design and development. Yes – we know that, Photoshop is not the right choice for RWD anymore and so are image-based mockups. But how do we get in a real good workflow with designers and using web-based mockups? This is still a crucial moment and as Stephen Hay shows there is not one tool to fill the gap.
Web-based mockups more effectively represent the end result in the browser because they are already in the browser.
Using all kind of generators makes the gap smaller between design and development – you have to evaluate what fits best:
- for layout and grid we use Susy,
- SASS as preprocessor and
- a static site generator like Jekyll or Hyde.
Susy grid is quite handy and straight forward, I am using it a lot – not only for prototyping and it works with rem units as well. But I think for prototyping flexbox may be more flexible and faster. Without SASS – or just fill in LESS or Stylus – developing gets really very slow nowadays. Far more interesting for me is what the difference between static site generators like Jekyll and such tools as Yeoman or Middleman is.
To present our web-based mockups we can use a live demo of course but we will come into the need for presenting screenshots. I will have to look up CaspersJs for capturing automated screenshots of a website. And we could even generate a style guide out of out web-based mockup.
I think it is still a challenge to get a real good workflow out of such varying tools. But Stephen Hay’s talk helps to get it rolling. Get his slides.
Rendering without lumpy bits – Jake Archibald
Jake Archibald is quite a performer and in a very speedy manner. So I had to recap and test some of his results myself afterwards and as I may say this browser painting tools he presented are fascinating.
Use dev tools to see what’s going on.
Performance is crucial especially for RWD and web apps. He showed browser painting tools and their magic results to get at the bottom of performance issues. I could not get along that far with Firefox and its Toggle Paint Flashing Plugin. For a start with such tools I recommend using Chrome Canary dev tools. Activating the option Enable continuous page repainting shows page painting time on using the page. It’s fascinating to test CSS i.e.
box-shadow and get immediate response on performance issues. I will integrate this in my dev workflow for sure. Get his slides.
Responsible Responsive Images – Mat Marquis
Another crucial issue for RWD is Responsive Images. Everyone likes to shrink browser windows and seems to be satisfied with shrinking images by
max-width. „Best viewed in the First World“, as Mat Marquis pointed out.
72% of responsive websites send roughly the same data to both mobile and desktop users.
This is where Responsive Images comes in – use the
picture element with its media queries as often as possible and its polyfill such as picturefill. You find the living document W3C Picture Elmeent at the W3C and get news at the Responsive Images Community Group and ResponsiveImages.org.
I hope that the picture element solution gets implemented soon and we get rid of such problems like fallback image downloads each time. Get his slides.
Console Browsers: The Ultimate Torture Test – Anna Debenham
I have to admit but I never really developed for console browsers. This is another start for me on Mobilism – getting acquainted to consoles.
13% in the UK 2011 used a console to access the internet.
Console browsers support no flash, only small parts of CSS and some HTML5. Anna Debenham presents the results of her console tests on Game Console Browsers. For instance Nintendo Wii U – released end of 2012 – has only 258/500 HTML5 and 48% CSS3 support.
Important is that consoles have more than touch or keyboard input:
- second screen
Today even cameras and printer have browsers. The learnings are common practice as to add more blank space between elements and provide good visual feedback. But I think you have to do a lot of testing to get used to the issues and to the devices itself. Thanks for your good work, Anna. Get her slides.
Mobilism gets me a good start in topics as console browsers, RWD workflow and performance debugging in the browser. This is why I really like to attend this conference and I hope it will come to stage the next year.
And many thanks for my new testing device I won: Nokia Asha 311. It’s a really small device, more low end, Series 40 OS and has a proxy browser.