Keep up with the latest news and developments around responsive design and the new direcitons that web designa and development are taking.
The performance discussion is becoming more and more common now, hoorah! Now the wonderful team at Vox Media are going back to their beautifully crafted sites and systematically working through and improving on their performance.
A great article that looks at whether being mobile friendly with the design is enough to be considered mobile friendly. A great looking mobile design could have tens of MB’s lurking behind the markup, and surely this should carry the “mobile-friendly” badge on search results.
Google are trying to make the web faster in developing technology countries starting a trial in Indonesia. As part of Google search results users will have an option for a faster experience… something they are sure to choose if on a limited 2G connection. After a quick test I found that they strip external references, […]
The bugs may not make much sense, but the speed issues do. There could be thousands of tiny calculations involved in kerning a long run of text, and that puts a heavy strain on a device’s processor.
Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.
Too many people were relying on the invisible default for images whose display size wasn’t even close to 100vw, resulting in inappropriate srcset selections and wasted bytes. Developers learning the new markup were also getting tripped up on how sizesaffects intrinsic sizing.
What I find interesting is the emphasis on speed. There are a few interesting interactive features, but speed is the selling point here. Facebook is pushing it very, very hard. “Fast” is scattered throughout their information about Instant Articles, and emphasized very heavily in the promotional video.
If your website has a hero image, make sure it loads and renders as early as possible. Many designs that feature a hero image suffer from HID (Hero Image Delay) mostly due to blocking scripts and stylesheets.
There is one caveat for Firefox 38 – responsive images willload using the correct media queries, but presently do not respond to viewport resizing. This bug is being actively worked on and tracked here, and will be fixed in a near-future version of Firefox.
As more people get their news on mobile devices, we want to make the experience faster and richer on Facebook. People share a lot of articles on Facebook, particularly on our mobile app. To date, however, these stories take an average of eight seconds to load, by far the slowest single content type on Facebook. […]
He shoots he scores! ESPN have stepped up to the plate and have finally switched over to a responsive site. It’s great to see that more of the large news/content sites are starting to catch up… (which also means that online advertising is beginning to catch up as well)
A delightful article that takes any current Photoshop and Illustrator users how to start off using Sketch as part of your designing responsive workflow.
Ross Penman says it best in this article “explicitly choosing to disable JavaScript is far from the only reason a user’s browser might not run it.” and goes on to explain that “out of every 500 visitors to GOV.UK, five did not receive JavaScript, but only one had JavaScript explicitly disabled.” Ross goes on to […]
Scott Jehl takes Wired.com and decreases perceived performance by more that 9 seconds. What is brilliant about this is he doesn’t even look at optimising assets on the page. The images are still the same, the JS/CSS is still the same. What he does instead is change the way in which it loads… making it […]
You will be able to declare how something will look depending on the medias ability to update the display. None – printed paper that will never change, slow – e-ink readers that won’t show animations; normal – pretty much the default you would expect everything else to fall under.
How to improve your layouts today by using Flexbox. Chris covers the strategy for flexbox, a card based layout, split layout and covers off some issues you might run into when using flexbox (including browser specific issues).
In the latest part of Jason’s excellent overview or responsive images he touches on the width descriptors and why they matter. This is part 4 in a 9 part series.
Find out all about how the RWD Images plugin for wordpress works with this post from one of the developers behind it all.
A look at whether we can flip the standard approach of design/layout followed by cutting up with HTML and CSS. In this approach you start with real content and write the HTML first. A great idea, but be aware you might have to put a few additional bits in there to make sure you can […]
Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.