A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
The importance of long-term thinking in web design. I love this description of the web:
a truly fluid, chaotic design medium serving millions of imperfect clients
Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.
A lovely history lesson on CSS from John.
I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.
John shares his concerns about the increasing complexity involved in developing for the web.
Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.
I really like Scott’s approach to defining what “support” means in terms of browsers—it makes a lot sense to break things down to the component level.
The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.
Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.
Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.
Henri gives an overview of the DRM-style encryption proposed for HTML. It’s a very balanced unbiased description, but if you have the slightest concern about security, sentences like this should give you the heebie-jeebies:
This is the worst idea for a W3C community group ever. Come to think of it, it’s the worst idea for an idea ever.
Brian writes up his experience working on the line-mode browser hack event at CERN.
Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.
I took a little time out of the hacking here at CERN to answer a few questions about the line-mode browser project.
This is what I’m working on today (where by “working on”, I mean “watching other far more talented people work on”).
Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.
Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute
WebKit nightlies now have support for
srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of
I’ve always maintained that the best solution to responsive images will be some combination of
picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by
picture, but the “retina” use case is better handled by
A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:
The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?
Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.
A call for developers to let standards bodies know what we want:
It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.
Well, this is interesting: it looks like Chrome might stop waiting 300ms for potential double-tap-to-zoom events if the site is using a meta viewport declaration that sets the width to device-width.
The closing hot topics panel I moderated at this year’s Mobilism conference in Amsterdam, featuring Remy, Wilto, Jake, and Dan.
A great history lesson from Dave.
Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
An intriguing initiative to tighten up the loop between standards development and implementation.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
Squee! I’m going to CERN on the 19th and 20th of September to take part in this hackday-like project to recreate the first line-browser.
If you want to help out, fill in the application form.
Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.
A fascinating look at the history of cookies …from the inventor of cookies.
Joking aside, this is a useful resource for keeping track of the current spread of Android versions.
Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.
Really good stuff.
Want to style those new HTML5 input types? I hope you like vendor prefixes.
A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
A handy one-stop-shop for tips on improving front-end performance.
This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.
The “client hints” proposal looks really interesting: a way for user-agents to send data to the server without requiring the server to have a library of user-agent strings. But Scott has a few concerns about some of the details.
The slides from Anna’s terrific talk at the Responsive Day Out.
And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.
It’s a Red Queen arms race.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
Everything you ever wanted to know about using SVG today.
A good explanation of the litany of woes that comes from Internet Explorer 8 being the highest that users of Windows XP can upgrade to. It’s a particularly woeful situation if you are a web developer attempting to provide parity. But there is hope on the horizon:
2013 will see the culmination of all these issues; support for IE 8 will drop of rapidly, users of XP will find an increasingly broken web, the cost of building software in XP organisations will increase.
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.
A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.
David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.
It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.
Steven Wittens, who gave a terrific talk all about maths at last week’s Full Frontal conference, describes his experience at that most excellent event.
Andrea looks at support for HTML5 input types in IE10 Mobile.
Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.
This is an excellent resource from Anna. She’s documenting the browser capabilities of games consoles.
A one-stop-shop for browser-compatibility information. This is MDN, HTML5 Rocks, and Quirksmode all rolled into one.
Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.
There’s also a call for more community device labs. I approve.
An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.
Luke collates some useful mobile browsing statistics once again. Most of it is quite US-centric, but this closing point is a whopper:
36 countries more than doubled their Opera Mini user bases in one year.
Bruce writes about a worrying trend in standards work:
Tossing a specification that you’ve written in-house, in secret and already implemented onto a table at W3C, saying “here, standardise this” as you saunter past isn’t a Get Out of Jail Free card for proprietary misdemeanours. And it isn’t standardisation.
Stuart on the importance of View Source.
A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.
But I digress …this is good stuff.
Nicholas is inside my head! Get out of my head, Nicholas!
What makes the web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your web applications, that’s what progressive enhancement is all about.
Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!
Compare the “view source” output with the generated source output to see it’s being interpreted.
Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.
A nice timeline visualisation of recent history.
Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.
Well, I guess this is one way of encouraging people to upgrade their browser.
A nice round-up of the issues around responsive images and their potential solutions.
This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).
If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.
Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.
A well thought-out evaluation on responsive images from Bridget.
Have you thought “There must be a good reason for the blink element.” Well, read on.
Mobile Browser Panel 2012, Mobile Browser Panel at Mobilism 2012 Moderated by Jeremy Keith, this panel features Andrea Trasatti (Nokia), Andreas Bovens (O…
Here’s the video of the mobile browser panel I moderated at Mobilism in Amsterdam. These guys were really good sports to put up with my wisecracking shots for cheap laughs at their expense.
Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 (email@example.com from May 2012)
This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.
We don’t support Internet Explorer, and we’re calling that a feature | Tips for Freelancers on Time Tracking and Invoicing | Paydirt Blog
This is the absolutely worst way to think about browser support: because the design doesn’t render “pixel perfect” (whatever that means) in a browser, that browser is blocked from accessing content. This is completely unnecessary and shows a fundamental lack of understanding of the web’s greatest feature: progressive enhancement.
Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.
This is a very in-depth look at how to become a power user of the Web Inspector in Webkit browsers. I’m sitting down with a nice cup of tea to go through all of this.
I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
This seems like a sensible way of separating capable browsers from legacy browsers: if the browser supports querySelector, localStorage and addEventListener, you’re good to go.
An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.
A fun little multiplayer game, all possible in the browser thanks to web sockets.
An oldie but a goodie: Clay Shirky looks at the design principles underlying HTML in order to figure out what made it so successful. Even though this is fourteen years old, there are plenty of still-relevant insights here.
A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.
Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.
Mozilla will be supporting H.264 …but they’re not happy about it.
I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.
Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
A great post that discusses exactly what we mean when we talk about “supporting” different browsers.
An acid test for mobile browsers. Point your device at rng.io and it will report on how much or little mobile shininess is available.
Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.
A really handy test site from Lea that reports your browser’s recognition of CSS properties.
A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.
Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.
A very useful site for checking browser support for CSS features. The test cases are really handy and the site gets extra bonus points for not calling itself “HTML5” anything.
Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.
Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.
These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.
Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.
This helps to clarify the difference between native semantics and ARIA additions.