Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

JH represent at Responsive Day Out 2: The Squishening

We had a great day last Friday in sunny Brighton at the Responsive Day Out 2. Responsive Day out is an annual web conference held to exchange thoughts and ideas about responsive design and to hear from the influential people in the industry. The Corn Exchange is the perfect location for the event, now in it’s second year.

The organiser Jeremy Keith had done a superb job putting together the programme for the event and conducted proceedings with a great mix of insightful thoughts, well considered questions and good humor. The whole event ran very smoothly and the event staff were super friendly and well organised.

The format of three short talks back-to-back with a short discussion afterwards worked really well. Each talk complemented the last making for a well structured days theme.

The talks were an interesting mix of looking back at the lessons learned, what we are creating and learning today, and a look at planning ahead for the future of responsive design.

The natural starting point for any site design is content, mainly typography and colour, so Stephen Hay started the talks with a piece about Sculpting Text. He presented a demo sculpting text directly in the browser following the content, mobile first approach. He took a narrow viewport as he set about styling a screen of html (the Responsive Comf home screen) and demonstrated how useful this approach is and how invaluable browser tools are to responsive design.

Next we turned towards the planning process with Sally Jenkinson’s More than Media Queries presentation, she spoke about being responsible for the choices we make, and the solutions we choose and how these affect the projects outcome. She went on to use a few examples, do we use a third party plugin for the sake of saving build time now? Will this then sacrifice performance and accessibility later? These are the challenges we face. She also showed a demo and warned it’s great to try new tech, but not to get carried away and to maybe consider trying them out on side projects first. I thought this was a very interesting view and a gentle reminder to us all when planning projects and making decisions throughout the entire project.

Ida Aalen had been responsible for the redesign of the Norwegian Cancer Society website. She focused on The Core Model and how she’d used this during the planning process. She first held workshops to determine content and asked how this fitted with customer need against business need. She used worksheets with key groups to achieve this focusing on inward paths, core content and forward paths at all times. She handled the whole project with great care and devised intelligent solutions, even putting donation forms in pages under stories of great work the organisation is doing. This sounds obvious, however keeping the viewer on page was key rather that taking them off to a separate form page. She achieved some incredible results and compared the year before the rebuild and the year after to see an accurate picture of their success. They were surprised how high mobile conversion rate had been when when the viewer had to fill out complicated forms.

The talks then went into a more technically focused theme with Rachel Andrew‘s CSS Grid Layout Module. You use display:grid, and then declare the columns and rows with grid-template-columns and grid-template-rows. As Rachel talked I could instantly see the power of the proposed grid implementation. The way we can name grid cells and move content from one to another without the use of JavaScript is incredibly powerful, I will be keeping an eye on how this feature evolves and what support it it gains from both the development community and browser vendors. The latest CSS Grid Layout working draft is from May 13th 2014, and there is an experimental implementation in Chrome.

Another future facing talk followed Rachel with Dan Donald’s Designing Evolution: Elements This was the third time I’ve seen Dan and he’s always very insightful. He demonstrated element queries with his own implementation and how they could be a very useful tool to work alongside media queries. He talked about what he calls ‘trigger points’ that would fire these element queries complementing ‘breakpoints’. He did stress that this was his interpretation of how this could work, and welcomed other ideas and solutions to this problem.

Looking very much to the present day again with a very interesting case study from
Inayaili de León Persson: Realistic Responsive Design. She shared her experiences and the challenges she faced while her team made the Ubuntu site responsive. The key message Inayaili makes is be smart with your time and some suggested areas to focus on are:

  • Page by page time estimates
  • Create a responsive grid prototype
  • Converting existing grids to percentages
  • Prototype responsive navigation
  • Cleaning up css
  • Update image assets

Joe explained this talk was the follow on from a blog article by Inayaili on the same subject.

Oliver Reichenstein talked about the The Container Model and his recent experience at the Guardian. He covered topics on site structure and content blocks. Oliver was incredibly captivating and looked so relaxed as he walked round the stage. He teased the audience as he talked about the theory of the content first approach saying we all followed this in a very tongue in cheek way. He then spoke about defining site structure and how that sits with his own real world experiences and tackling clients internal politics. He humorously explained that sticking to a clear content block approach wouldn’t mess with the viewers mind and makes most sense when building responsive sites.

The theme of managing clients complimented Kirsty Burgoine‘s A Question of Deliverables presentation, as she gave a very honest account of the mistakes she had made in her early experience of building responsive sites and stressed the importance of managing client expectations. Responsive design is a difficult concept to explain to our clients, however taking the time to explain and educate is an important part of the process. Clients can then better understand why costs and timescales have to increase for responsive projects and why designs might not always look quite the same across all devices.

Time for another technical talked with Stephanie Riege with CSS Media Queries Level 4 –  she discussed media queries and how the W3C spec could be interpreted and used going forward. Overall she discussed that more media queries are a good thing, however she’s not sure the proposed attributes are quite right and warned that they could become very complicated and adopted for the wrong situation.

The days keynote came from Ethan MarcotteLaziness in the Time of Responsive Design. He very eloquently rounded off the day with another inspiring talk. He firstly described himself as a lazy developer, however he went onto explain that laziness can be a good thing. Laziness means keeping things simple; simple, intelligent and elegant solutions are the best. He went on to show some code examples of responsive video containers and demonstrated some nice css techniques using nth-child selectors to create flexible grids.

My overall thoughts of the day were very inspiring and I felt a sense of community. The format worked well and the calibre of speakers were excellent. Brighton is a great setting for the conference with a very creative feel, interesting, unusual shops and restaurants and forward thinking attitudes. I felt the main themes throughout the day were very much where we’ve come from, what we’re doing and what might be next, and not to worry, we’re in it together and we’ll figure it out.

The takeaways for me were.

  • Content first is a great approach
  • Content should have a healthy mix of customer needs and business needs
  • Keep content simple and use content blocks
  • Be responsible and well informed at the planning stage
  • Involved all disciplines early in the project
  • Jump into the browser early and work on a narrow viewport
  • Educate your clients and explain responsive design
  • Embrace new technology although perhaps use them in side projects first
  • Use animation sparingly
  • The invaluable use of browser tools
  • The importance of device labs
  • And always keep your eye on the future and plan for what might be next

Thanks to all the speaker organisers and event staff for putting on a great event.