Keep up with the latest news and developments around responsive design and the new direcitons that web designa and development are taking.
Loz Gray spent 18 months working on the Guardian responsive redesign. It was Loz’s second responsive project, she tackled Art Fund beforehand. Over the 18 months Loz learned that performance is key, wireframe in HTML and using the mobile site as the foundation for the larger responsive project.
The past few weeks I’ve been banging on about flexbox a bit so I’m glad to be able to point out that it’s not the be-all end-all solution. Flexbox ties directly to the content on the page so it will change as the page loads if you use it for the layout.
This week saw the very first Respond Conference in Sydney Australia and was hosted by the talented John and Maxine from Web Directions. With speakers the likes of Brad Frost, Jason Grigsby, John Allsopp, Ethan Marcotte and more it was the epicentre for RWD. Thankfully Jake from Web Design Weekly covered off the day for […]
If you’re not ready to poly fill your responsive solution then you can borrow one that Gavyn McKenzie came up with at Etch. This solution requires a bit of PHP, some javascript and simple html markup
A great way to explain the difference between Adaptive, Responsive, Fixed and Fluid designs. I’m a little bit stuck with the Adaptive design though. For a long time I’ve been explaining that this approach (snapping with media queries rather then stretching and changing) but after reading more of Aaron Gustafson‘s book Adaptive Web Design I’ve started […]
You should be looking at number 2 and rejoicing. It won’t shave weight off your pages (that’s your responsibility) but it does look like http requests won’t be such the huge performance issue they are today. Also mobile get a win from header compression (although I’m not sure how much smaller you can make headers).
While dreamweaver has gone by the wayside there has been a resurgence of web design tools that provide you with a design platform backed by actual HTML and CSS. These tools include Webflow, Froont, Macaw (which we have some exciting news about next month) and are gaining some traction in the web world. This article […]
I’m surprised this hasn’t been featured before. A site that shows which media queries are fired when you visit the home page, plus an overview of media queries and a real time testing page. They also provide a series of target devices, snippets and instructions on Responsive Adsense.
It will always be a this or that debate for web vs apps. At the end of the day you should be doing whatever your customers want and what you can afford within your budget. If you can, do both!
A focus on 6 content strategy suggestions for responsive design. Erik Boman shares a couple image tips and a few content specific guides.
While the original meaning of responsive images, img{max-width: 100%;}, was a simple theory to grasp we are now aligning the definition with dynamically serving the most appropriate image based on the viewport. Mat from Filament Group explains the work they’ve already done for PictureFill and the pitfalls you need to watch out for if you’re […]
Do you know the difference between device-width and initial-scale? Do you know what happens when you use one or the other, or if you use both? Quirksmode set out to check the intended behaviour of each 3 combinations against a range of current browsers and the results were somewhat inconsistent.
This tutorial demonstrates how to create responsive images on your site using the newly drafted <picture> element proposal. It covers the needs, the idea behind this approach, details of the approach and the browser support (spoiler, it’s not supported anywhere). Fortunately there is PictureFill, a pollyfill for it.
Dave Rupert ponders what it might mean if 4K monitors become mainstream. Does supporting displays that are 3840×2160 resolutions gives us Even Mo’ Pixels, Even Mo’ Problems?
Icons can be a great way to convey meaning across smaller viewports. If your using icon fonts for social icons, three lines for menus, magnifying glass for search etc then you should understand the possible issues and solutions that come along with their use.
An in-depth look at improving your site performance. There’s a few screen shots of SpeedCurve which gives some insights into how your site is performing against your competition (more about that soon).
Zurb are calling for 2014 to be the year for smarter responsive design. Now that we’ve had a few years implementing the technique it’s time to step it up.
The team at the BBC uncover why sometimes it’s alright to use iFrames, even when you really really don’t want to.
First, I apologise for the popup on this site asking for a subscription, but the questions are worth hitting the x in the top right corner to close it. This is an example of the questions you should be asking to see if a responsive site really is the answer
An update from BBC’s roll out of their responsive news site. Interestingly they’re beginning to see some down sides to their quick releases from a mobile first and agile approach with difference sites and page configuration in subsequent releases. They’re refactoring the code now but with more communication they could have avoided these issues. The […]
Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.