- Fairfax have learnt a lot about iterative design since starting the redesign of their site
- Responsive redesign of SMH is a massive project with many contributors: designers, developers, engineers, everyone at fairfax.
- SMH was founded in 1931, committed to honest accountable journalism
- SMH went online in 1995, a trial blazer of getting online in the news world.
- Before getting too excited, it did look a bit shit (my words, not theirs).
- For many people smh.com.au is the SMH, the paper may not be picked up
- The site is made up of partner sites, video, etc
- The site is used on a number of devices, mobiles on public transport, tablets in the evening
- Fairfax wanted to people to be able to reach the content regardless of devices
- They put together a dream team to work on the RWD site.
- For the new site, they needed designers to be able to design an element and put it in the CMS. Not currently possible
- There were five defining mantras they referred back to often, even now.
- Fairfax wanted to move away from multiple dev streams: m-dot, desktop, etc to a single dev stream: rwd.
- SMH went with an adaptive layout
- SMH had fallen behind the a-game. Ganiad already had a RWD site.
- Mobile geddon had arrived. SMH did not have a “tablet” site.
- SMH’s RWD team take performance very seriously, faster, faster, faster.
- They made hard calls about what was in and out. No way to redesign entire site in 18 months, too complex.
- they new they needed to change their process: iterative design over waterfall
- Mandates:
- No wireframes (initially), 60 minute design sessions to get a live prototype
- Quick’n’dirty: quality kept with design principles, style guides.
- Screen agnostics: impacted the design approach by going tablet first after a false start. Tablet is where RWD lives or dies.
- Lean user testing: less users more often.
- Sharing is caring: content (article) is the new home page, people visit news sites via social media
- Decide with data: testing gets feedback, beta site allows further testing.
- They gave the project the code name project lego. Building blocks not pages.
- Using building blocks, they can build and trial a site quickly
- Using A/B testing to discover the difference between what people wanted and what people thought they wanted.
- At Fairfax they are still learning about RWD,
- never test on yourself, test on the user
- don’t hide what you are doing
- rules will change, design for today
- Features will always be improving, this is not a design that will finish.
- Fairfax found they needed freedom to fail
Archives: Notes
-
-
Scroll magazine has been relaunched by @webdirections, features some excellent writers and your’s truely. https://twitter.com/webdirections/status/717879688375324672
-
- We’re no longer building pages, we’re building systems and complex networks.
- RWD is not about individual device classes
- Devices have become more complex, multiple input methods, various screen sizes
- New interactions models are been created all the time
- I’d like to tell you I have perfectly formed solution, I do not.
- Laziness is bad. Well, maybe it’s more complex than that; maybe it’s a virtue.
- We have a lot of tools available to allow us to be lazy.
- eg: nth-child for grids rather than including the grid in the html
- Modern frameworks come with baggage.
- They work of a predefined grid
- Stock breakpoints
- It’s hard to know if they’re useful for the expanding device market.
- Think about content, context rather than devices you can design for products that don’t yet exist.
- Disney made animation beautiful, it made it real and life like.
- Disney defied language to describe their work, allowing to them to keep high standards.
- If we think about the characteristics of design rather than of the page, columns, roles, it allows you to support the design.
- Describe the challenges of a site, this allows the break points to be defined.
- Rather than CSS frameworks, define vocab frameworks to make our sites fit.e
- RWD navigation is not a solved problem, they rely on the content.
- As an industry, we have a problem with the hamburger.
- It’s not working as well as we think it is.
- Time magazine added about a thousand items of help text to their hamburger. This suggests it didn’t test well.
- Disney added a hamburger icon to use the same off-screen navigation pattern
- Behind the hamburger, we put all the shit we couldn’t be bothered to deal with. We avoided the ard discussions.
- Other, arguably better, design patterns exist for navigation
- The BBC shows/hides nav items as they fit on their screen
- The Guaniad scrolls their navigation
- The Filament Group changes their nav on content driven pages to a more subtle version than their home page.
- If we look for opportunities to be lazy with nav, we can focus on other parts of the page, other features. For example animation.
- We can design of the basic elements and enhance with animation
- This does mean we need to build up from the basics, add enhancements. Design two, three or more interfaces. This doesn’t appear lazy.
- The laziness comes from designing defensively for the web. Designs will work for multiple devices.
- The BBC have done this with the cutting the mustard test.
- They track two broad responsive experiences. It’s lazy and Ethan lves it.
- Approach a site with questions, even if you have solved the problems before. Like a beginner.
- Doing a little less will allow us to do a little bit more.
-
Playing seat selection offence has worked again, the neighbouring seat is vacant, again. MEL ✈️ SYD
-
-
Nice to see the council getting in on the @batlabels joke.
-
Americans are talking about basketball, a lot.
It is March.
Survivor is airing.@jeffprobst, I am scared.
-
Happy Birthday @karenmcgrane.
(Everyone, Karen would like water. I reckon we can do this https://my.charitywater.org/karen-mcgrane-1/forty-four-on-4-4-for-water-for-all)
-
“Can you set yourself as the scales’ admin, they keep emailing me to change the batteries?”