Tags: browsers

Using Photoshop in Responsive Workflows - Web Standards Sherpa

A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.

Daring Fireball: Rethinking What We Mean by ‘Mobile Web’

John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:

We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.

Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus

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.

Platformed. — Unstoppable Robot Ninja

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

Jonathan T. Neal | Thoughts on Media Queries for Elements

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.

Happy 17th Birthday CSS | Web Directions

A lovely history lesson on CSS from John.

300ms tap delay, gone away - HTML5Rocks Updates

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.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Unify – Unicode support on browsers and devices

Some excellent research for web developers: find out which unicode characters have the widest support—release useful for choosing icons.

Grade components, not browsers—Filament Group, Inc., Boston, MA

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.

Laying The Groundwork For Extensibility—Smashing Coding

The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.

There’s a lot to like here, with some practical examples of where we’ve seen a disconnect between JavaScript APIs and declarative HTML (looking at you, Geolocation).

Long Term Web Semantics on Infrequently Noted

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.

isMobileDevice and the death of innocence

A nice bit of sleuthing to trace the provenance of one piece of ill-advised user-agent sniffing JavaScript code.

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.

What is EME?

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:

Neither the browser nor the JavaScript program understand the bytes.

Web App Source Code Protection Community Group

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.

CERN: Line Mode Browser « optional.is/required

Brian writes up his experience working on the line-mode browser hack event at CERN.

Internet and Web Pioneers: Robert Cailliau - YouTube

Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.

LMB hack days: Jeremy Keith

I took a little time out of the hacking here at CERN to answer a few questions about the line-mode browser project.

Dream team of web developers to recreate line-mode browser at CERN

This is what I’m working on today (where by “working on”, I mean “watching other far more talented people work on”).

SVG Fallbacks | CSS-Tricks

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 picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and 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 srcset.

Crippling the web - TimKadlec.com

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.

Responsive design: we are not there yet

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.

Issue 18850005: Disable double tap zoom on mobile sites, to remove 300ms click delay - Code Review

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.

Hot Topics Panel with Jeremy Keith - Mobilism 2013, Day 2, Afternoon, Final session on Vimeo

The closing hot topics panel I moderated at this year’s Mobilism conference in Amsterdam, featuring Remy, Wilto, Jake, and Dan.

Why the Web Doesn’t Need Another CSS Zen Garden - YouTube

A great history lesson from Dave.

Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

The Extensible Web Manifesto

An intriguing initiative to tighten up the loop between standards development and implementation.

Request Quest

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.

Line-mode browser dev days at CERN

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.

Deep dive into the murky waters of script loading

Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.

The irregular musings of Lou Montulli: The reasoning behind Web Cookies

A fascinating look at the history of cookies …from the inventor of cookies.

Is Android good yet?

Joking aside, this is a useful resource for keeping track of the current spread of Android versions.

mezzoblue § 10 Years

Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

I know jQuery. Now what?

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.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Thoughts on Blink

A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.

datalist experiment

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 range and date.

So nifty!

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

A List Apart Issue № 371

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.

For discussion: viewport and font-size data in client hints

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.

Playing with game console browsers

The slides from Anna’s terrific talk at the Responsive Day Out.

gaia/build/ua-override-prefs.js at master · mozilla-b2g/gaia · GitHub

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.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

The impending crisis that is Windows XP and IE 8 by Troy Hunt

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.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Interview with Ian Hickson, HTML editor on HTML5 Doctor

Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.

Deploying New Image Formats on the Web - igvita.com

A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.

Mobile first: the revolution is well under way - Generated Content by David Storey

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.

Going Full Frontal — Acko.net

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.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

IE10 Snap Mode and Responsive Design - TimKadlec.com

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.

Game Console Browsers

This is an excellent resource from Anna. She’s documenting the browser capabilities of games consoles.

WebPlatform.org — Your Web, documented

A one-stop-shop for browser-compatibility information. This is MDN, HTML5 Rocks, and Quirksmode all rolled into one.

CSSquirrel : Game Break | opinions and news on web design by Kyle Weems

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.

A List Apart: Articles: Testing Websites in Game Console Browsers

An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.

LukeW | Data Monday: Mobile Browser Use

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.

» 4 August 2012, baked by Bruce Lawson @ The Pastry Box Project

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.

Things that compile to JavaScript

Stuart on the importance of View Source.

Twitter Blog: Overhauling mobile.twitter.com from the ground up

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.

It’s time to stop blaming Internet Explorer | NCZOnline

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.

Squirrel!

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 Debenham: Using the Nintendo DSi browser

Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.

The Evolution of the Web

A nice timeline visualisation of recent history.

Florian’s Compromise | Responsive Images Community Group

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.

New Internet Explorer 7 Tax :) -

Well, I guess this is one way of encouraging people to upgrade their browser.

Responsive images: what’s the problem, and how do we fix it? - Dev.Opera

A nice round-up of the issues around responsive images and their potential solutions.

Issue #408: Generate a separate css with flattened media queries

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.

» The real conflict behind picture and @srcset (Cloud Four Blog)

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.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

The origin of the blink tag

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 (www-style@w3.org 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.

The state of responsive images | Feature | .net magazine

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.

Modern Web Development Part 1 – The Webkit Inspector

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.

10 questions about web performance – Jeremy Keith at Clearleft

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.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Responsive News - Cutting the mustard

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.

Testing For Dummies | Testing

An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.

BrowserQuest

A fun little multiplayer game, all possible in the browser thanks to web sockets.

Shirky: View Source… Lessons from the Web’s massively parallel development.

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.

Nicholas Zakas: Progressive Enhancement 2.0 - YouTube

A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.

scottjehl/Device-Bugs

Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Video, Mobile, and the Open Web | Brendan Eich

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.

Content Protection, fonts, and trolling « in progress

Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

Browser Support? Forget It! – David Bushell – Web Design

A great post that discusses exactly what we mean when we talk about “supporting” different browsers.

Ringmark

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.

Responsive Summit: The One Tool | Mark Boulton

Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.

The CSS3 Test

A really handy test site from Lea that reports your browser’s recognition of CSS properties.

A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need

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.

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Browser Support

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.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

» 21 January 2012, baked by Ben Ward @ The Pastry Box Project

Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.

On designing content-out (a response to Zeldman and others) | Stephanie Rieger

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.