<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
But as the page loads, you're on a desktop browser where the screen is 1753px wide. The browser should just skip loading that stylesheet entirely, right? It doesn't. Thomas Steiner explains:
it turns out that the CSS spec writers and browser implementors are actually pretty darn smart about this:
The thing is, the user could always decide to resize their window (impacting width, height,
After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content.
He writes:
If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your Watch, this minified version of WebKit wouldn’t act like a full browser. Instead of rendering all your scripts, styles, and
We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzović. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design.
Dave and I started the latest ShopTalk Show with an audio clip from Tim Brown responding to some of our previous chatter regarding vertical rhythm (and such). Transcription here. It sparked another interesting conversation about these things.
A small part of that was about Tim's coined phrase "molten leading", which is essentially line-height that depends on line length. … Read article
Say you've designed an HTML email with 3 columns. Because of limited and weird CSS support in email clients, email design is done with tables. That 3 column design looks great on large-ish screens, but it squishes awkwardly on small screens. Theoretically a media query would save us here, but as we can't even count on floats we sure can't count on those. There is still a way though.… Read article
Meaning like <!-- these kind of comments -->. You put a media query in a data-* attribute of a parent element and it will determine if that block of commented HTML should be un-commented or not. A form of conditional loading. If the HTML bloat bothers you, I suspect it could be easily adapted to load the comment from a URL at another data-* attribute instead.… Read article
Perhaps you've been keeping up on the responsive images #hotdrama? If you have no idea what "responsive images" means, it means serving different images under different circumstances. How to do that and what those circumstances are vary widely.… Read article
Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.
You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.… Read article
Some design patterns have been explored fairly thoroughly as we've moved into an era of responsive design. Others not so much. There are plenty of complex patterns that are still worth exploring, like this one.
In which Dirk Lüth shows an experimental RWD technique where layouts (and just about everything) is controlled with rem units and the base font size is adjusted based on screen width available.
Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.
Should we allow users to opt out of our responsive designs? Isn't that admitting failure? Or are there reasonable circumstances when it's a good thing? How would we do it?
There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.
The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions.… Read article
