Keep up with the latest news and developments around responsive design and the new direcitons that web designa and development are taking.
We began compiling a round up of the responsive images situation in November. Back then it was the <picture> element that was being noted and removed while the new src-n solution proposed by Tab Atkins was the flavour of the month. Now only a few weeks later and we’ve done a 180, with <picture> now […]
Brad takes a stab at breaking down his ideas around the concept of atomic design
A look at how the calc() feature can help with padding in responsive sites while still falling back gracefully for older browsers.
Preprocessing is such an important part of improving your responsive workflow, yet for many people it’s something they shy away from because it’s not vanilla CSS. Most of the time that translates to “I’m really good at vanilla CSS and I’m scared to try something I might not initially be as good at”. I don’t […]
Not the comments I was hoping for on this one. I thought this was going to be an approach to responsive comments found at the end of an article or under a product or youtube video. Instead this is about <!– HTML Comments –> I might be missing the point, but isn’t thins almost the […]
This doesn’t really surprise me, but the unfortunate thing is there is still an upwards trend. More than half the page size is due to images, so while you’re trying to keep page size down why don’t you forget about trimming another few characters from your CSS and just use one less JPG.
This one is about capturing the width of the viewport through Google Analytics. Basically GA will only track the device width. This is fine for tablet and phone because it’s rare (or is it even possible at all) to change the width of the browser other than full screen. With laptops and monitors though you […]
Mark Boulton talked about responsive design specifically, but not so much the technical approach and instead the responsive design process. I love Marks’ speaking style and this was no exception. He talked about the Eiger mountain north face and how many years ago a climber traversed an incredibly treacherous path of the mountain, leaving behind […]
Another really amazing post from the team at Codrops. In this article Sara looks into more than just the size of text in responsive design, she looks at legibility, contrast, heading size, font selection, line-lengths and more.
This is an example of having to test your websites or responsive apps across many many devices. It’s interesting to see the detail at which the BBC has gone to achieve this in just one (albeit a very popular) section of their site.
Two years after Bruce first suggested the <picture> element as a solution to responsive images we’re still arguing over the best approach. This is not necessarily a bad thing. Sure, we want a solution immediately but it is better to think this particular decision through, in a lot of detail. In this post Bruce looks […]
Lukes post last week generated Ethans post above, but has come back to clarify his thoughts on the subject as a result. I love a good conversation across a series of blog posts.
Ethan Marcotte chimes in with his own post after Lukes post last week warning us that we shouldn’t rely on the viewport for our designs. Ethan argues that although we shouldn’t depend on that solely, it’s the best foundation from which to start.
Tab Atkins explains the third value of the src-n solution and explains why it’s a better fit than the srcset approach.
Jordan takes a look at the luminosity proposal for the next Media Query spec. This would provide you with the ability to “brighten” your design for a given screen state in the same way that you can change things like Instapaper from night to day for easier reading.
This is something that goes along with LukeW’s post last week looking at viewport and screen sizes. Identify the perceived size of a device easily by adjusting the size and distance from your subject.
Regions is something new for the CSS specification. Not all browsers have jumped on board just yet but this article provides us with some practical approaches as to how it might benefit a responsive layout in the future.
Luke takes a look at screen sizes from a different point of view, pointing out that relying on this alone doesn’t give us the enough information to provide the perfect interface.
One of the issues with preprocessing with media queries is the repeating of media queries throughout the final CSS file. While this isn’t really a problem because GZIP eats up all that extra kb, the guys from Building Blocks have created a Grunt task to collate all the queries together.
BA Magazine have released their new responsive design site. We’ll be taking a closer look at this shortly, but at the moment it looks pretty nice (although I’m pretty sure it’s going to be super heavy)
Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.