Typically, emails are coded starting with an old school, table based desktop version, with mobile styles applied through a max-width media query to reflow the tables. In email clients that don’t support this, this approach can result in inconsistent rendering and difficult to read emails. We’re going to flip the formula and start with the …
Tag Archives: responsive web design
Mediaqueryless Responsiveness
Slides of the – highly entertaining – talk @Vasilis gave at CSS Day 2016 in which he elaborated on a few techniques he experimented with in order to get responsive-like sites without using any media queries. Some neat tricks include: Calling it “active whitespace” instead of floats getting stacked up 😛 Setting a unit-ed value …
Viewport Unit Based Typography
iOS9 MobileSafari Viewport Problem
The viewport is set incorrectly when the viewport meta tag is specified with initial-scale=1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport’s boundary. In the screenshot above (courtesy @RWD) you can see that the off-screen menu actually appears on-screen in iOS9. Apple changed how iOS9 …
Responsive Principles
Responsive web design has engendered a wider conversation about how we build products that accommodate an increasing breadth of connected devices. This talk will suggest a framework within which we can model this continuing discussion, and outline the principles needed for our work to better respond to a rapidly changing world. A PDF with presenter …
The Web’s Grain
Great piece by Frank Chimero. Starts with that nostalgic nineties feel and finds it way to photography, responsive design, and the fact that some websites try to blow you away with their design/technological advancements. “Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is …
Intro to @viewport & other new Responsive Web Design CSS features
Responsive Images in Practice
<img srcset="quilt_3/large.jpg 1240w, quilt_3/medium.jpg 620w, quilt_3/small.jpg 310w" sizes="(min-width: 41.25em) 38.75em, calc(100vw – 2.5em)" src="quilt_3/medium.jpg" alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." /> Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn: …
9 basic principles of responsive web design
Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts Great and easy to understand gifs explaining a few concepts – I prefer this word over principles – of responsive web design. 9 basic principles of responsive web …
Continue reading “9 basic principles of responsive web design”
Building a Device Lab
Collection of slidedecks to building your own device lab (only the first one in the series embedded, click through below to see all others): We cover how to build a device lab as a product for your coworkers to test their work on a spectrum of operating systems and versions. We also cover how to …