A List Apart



Image of Mat Marquis

Mat Marquis

Mat Marquis tweets prolifically, makes websites for a living at Bocoup, and chairs the Responsive Issues Community Group. He’s also a technical advisor at A List Apart and a former member of the jQuery Mobile team.

Also from this author

  • JavaScript for Web Designers: DOM Scripting

    JavaScript’s ability to access and modify elements on the page is undeniable, and the Document Object Model is an essential component of that. In this excerpt from Mat Marquis’ new book, JavaScript for Web Designers, Mat shows us how to manhandle the DOM to get better results from our scripts.

  • It’s Time We #FEDtalk

    One person focuses on HTML, CSS, and JavaScript. Another writes JavaScript tests all day. And they both have the same job title: front-end developer. Mat Marquis talks about why that’s okay, and introduces our latest event, “The State of Front-End Dev”.

  • Container Queries: Once More Unto the Breach

    Media queries have been the go-to tool in building responsive sites, allowing us to resize and recombine modules to suit multiple contexts, layouts, and viewports. But relying on fixed viewport sizes can quickly twist stylesheets into Gordian knots. We still need a future-friendly way to manage responsive CSS. Mat Marquis explores the problem and the progress toward the solution—and issues a rallying call.

  • 10 Years Ago in ALA: Attribute Anarchy

    A decade ago here in A List Apart, we published a radical article by Peter-Paul Koch arguing for custom attributes in markup. Today, Mat Marquis takes a look back at how times have changed, and shows how PPK’s idea has worked its way into the web.

  • A List Apart: On Air

    Ready for something new? We’re excited to announce ALA: On Air, community-focused events where our readers can get to know our authors, staff, and others who are shaking up our industry. Mat Marquis shares all the details, and has specifics on our first event, Designing for Performance, coming up on February 26.

  • Why Responsive Images Matter

    Building enormous websites means us shifting the burden of our mistakes onto every single user that visits our site. It’s us saying that we’re willing to build something that isn’t for some users, because that’s most comfortable for us—no different from “best viewed in Internet Explorer 5.5” or “best viewed at 600x800,” but much more costly.

  • Testing Responsive Images

    At long last, the native picture element isn’t just coming: it’s here. The picture element has landed in Canary—Google’s “beta” channel for upcoming Chrome releases—and we can try it out for ourselves right now. Now, we need to test it out, look for bugs, and file issues.

  • Bringing Responsive Images to Browsers

    After almost three years in pursuit of a standardized solution to the problem of responsive images, the Responsive Images Community Group is excited to announce that the picture element is officially coming to a browser near you. Once it lands, we’ll see the trend toward massive, bandwidth-heavy responsive websites begin to slow—and hopefully, reverse—over time.

  • A Q&A on the Picture Element

    The revival of the picture element—the responsive images proposal that has seen the most support from the developer community—is exciting news, but there are still some outstanding questions about how the element will really work. Marcos Caceres and Yoav Weiss have put countless hours into the Responsive Images Community Group’s efforts, and are now working toward picture implementations in Firefox and Chrome, respectively. Mat Marquis asked them some questions.

  • Pattern Library Security Vulnerability

    If you’re running a version of the ALA pattern library that’s more than a few weeks old on a public server, please update it right away.

  • A List Together

    A List Apart gets back to its roots: building community, giving a platform to new voices, and getting people excited about the web. We’re making changes to the way we work—starting with our decision to open-source the code that powers alistapart.com itself—and we want you to participate. Our Mat Marquis invites you to contribute code and concepts via GitHub, get to know our acquisition scouts, and use ALA and its editors to share your ideas and insights with the whole web design and development community.

  • Paul Irish on Chrome Moving to Blink

    The dust has begun to settle after Google’s announcement that Chrome would soon be using their own divergent fork of WebKit as a rendering engine. Now that things have calmed down a bit, I’ve asked Paul Irish to share some of the Chrome team’s plans for the near future.

  • Embeddable Comments? Yes, Please.

    Just like tweets, you can now embed ALA comments anywhere you like. This is one of those features that we’ve been wanting for our own purposes, and then we figured: as long as we’re building it, let’s give everyone the ability to embed comments.

  • Bruce Lawson on Opera’s Move to WebKit

    This morning’s announcement that Opera intends to abandon its Presto rendering engine has left designers and developers with a number of questions. I sent a few over to Opera’s Bruce Lawson to shed a little light on the situation.

  • Responsive Images and Web Standards at the Turning Point

    Responsible responsive design demands responsive images, images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed, and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them” crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

  • Responsive Images: How they Almost Worked and What We Need

    With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an “image prefetching” feature that allows images to be fetched before parsing the document’s body, some of the web’s brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable—just as browser detection did back in the bad old days before web standards. What’s really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work.

Browse Authors

  1. Ida Aalen
  2. Senongo Akpem
  3. Amin Al Hazwani
  4. Lea Alcantara
  5. Dean Allen
  6. John Allsopp
  7. Pär Almqvist
  8. Joe Alterio
  9. Brian Alvey
  10. Stephen Anderson
  11. Rachel Andrew
  12. Jake Archibald
  13. Chris Armstrong
  14. Lance Arthur
  15. Faruk Ateş
  16. Peter Balogh
  17. Artas Bartas
  18. Jennifer Bassett
  19. Johanna Bates
  20. Stefan Baumgartner
  21. Tim Baxter
  22. Dan Benjamin
  23. Scott Berkun
  24. David Berlow
  25. Tobias Bernard
  26. Mark Bernstein
  27. Carrie Bickner
  28. Kate Bingaman-Burt
  29. Mark Birbeck
  30. Alex Bischoff
  31. Niklas Bivald
  32. Roger Black
  33. Margot Bloomstein
  34. Jason Blumer
  35. Nate Bolt
  36. Jina Bolton
  37. Scott Boms
  38. Bert Bos
  39. Maurizio Boscarol
  40. Mark Boulton
  41. Clarice Bouwer
  42. Cennydd Bowles
  43. Douglas Bowman
  44. Wayne Bremser
  45. Valeria Brigatti
  46. Harry Brignull
  47. Ryan Brill
  48. Mike Brittain
  49. Mandy Brown
  50. Tim Brown
  51. Sunni Brown
  52. Tiffany B. Brown
  53. Dan Brown
  54. Marlene Bruce
  55. Laura Brunow Miner
  56. Carlos Bueno
  57. Jory Burson
  58. Paul Burton
  59. Jim Byrne
  60. Tony Byrne
  61. Marcos Caceres
  62. Jeffery Callender
  63. Lachlan Cannon
  64. Michael Cardenas
  65. Norm Carr
  66. Ryan Carson
  67. Lawrence Carvalho
  68. Meghan Casey
  69. Elizabeth Castro
  70. Dan Cederholm
  71. Tantek Celik
  72. Steve Champeon
  73. Caio Chassot
  74. Hui Jing Chen
  75. Jack Cheng
  76. Kevin Cheng
  77. Dana Chisnell
  78. James Christie
  79. Patrick Clancey
  80. Joe Clark
  81. Chris Clark
  82. Josh Clark
  83. Andrew Clarke
  84. Josh Cleland
  85. Curt Cloninger
  86. Geri Coady
  87. Scott Jason Cohen
  88. Michael Cohen
  89. Georgy Cohen
  90. Anthony Colangelo
  91. Brad Colbow
  92. Simon Collison
  93. Angela Colter
  94. Marie Connelly
  95. Craig Cook
  96. Patrick Cooney
  97. Joscelin Cooper
  98. Stacey Cordoni
  99. Kevin Cornell
  100. Amanda Costello
  101. Jim Coudal
  102. Abby Covert
  103. Nick Cox
  104. Chris Coyier
  105. Brian Crescimanno
  106. Jeff Croft
  107. Shaun Crowley
  108. Chip Cullen
  109. Nathan Curtis
  110. Liz Danzico
  111. Anil Dash
  112. Justin Dauer
  113. Glenn Davis
  114. Anna Debenham
  115. David Demaree
  116. Meg Dickey-Kurdziolek
  117. Shane Diffily
  118. Geoff DiMasi
  119. Nick Disabato
  120. Hannah Donovan
  121. Nandini Doreswamy
  122. Rory Douglas
  123. Dmitry Dragilev
  124. Jarrod Drysdale
  125. Seth Duffey
  126. Colin Eagan
  127. Jeff Eaton
  128. James Edwards
  129. J. David Eisenberg
  130. James Ellis
  131. Jessica Enders
  132. Bjørn Enki
  133. Amos Esty
  134. Elika Etemad
  135. Felicity Evans
  136. Garin Evans
  137. Meryl K. Evans
  138. Christopher Fahey
  139. Todd Fahrner
  140. Dug Falby
  141. Derek Featherstone
  142. Scott Fennell
  143. Andrew Fernandez
  144. John Ferrara
  145. Daniel Ferro
  146. Alex Feyerke
  147. Nick Finck
  148. Richard Fink
  149. Detlev Fischer
  150. Dave Fleming
  151. Jonathan Follett
  152. Shoshannah L. Forbes
  153. Nathan Ford
  154. Clinton Forry
  155. Jack Franklin
  156. Dean Frickey
  157. Daniel M. Frommelt
  158. Brad Frost
  159. Dezzie Garcia
  160. Lyza Gardner
  161. Steven Garrity
  162. Peter Gasston
  163. Janice Gervais
  164. Anne Gibson
  165. Jarrod Gingras
  166. John Gladding
  167. Chelsey Glasson
  168. Porter Glendinning
  169. Kevin Goldman
  170. Brian Goldman
  171. Devan Goldstein
  172. Aimee Gonzalez-Cameron
  173. Jeff Gothelf
  174. R. Stephen Gracey
  175. Ste Grainer
  176. Dave Gray
  177. Adam Greenfield
  178. Brandon Gregory
  179. Matt Griffin
  180. Patrick Griffiths
  181. Jason Grigsby
  182. Andrew Grimes
  183. John M. Grohol
  184. Tobias Günther
  185. Aaron Gustafson
  186. Andy Hagans
  187. Young Hahn
  188. Erika Hall
  189. Jessica Hall
  190. Kristina Halvorson
  191. Naz Hamid
  192. Jessica Harllee
  193. Brett Harned
  194. Cyd Harrell
  195. Matthew Haughey
  196. Stephen Hay
  197. Steph Hay
  198. Julia Hayden
  199. Dominique Hazaël-Massieux
  200. Val Head
  201. Christian Heilmann
  202. Hal Helms
  203. Rebecca Hemstad
  204. Ben Henick
  205. Claudia Hernández
  206. Alan Herrell
  207. Graham Herrli
  208. Lisa Herrod
  209. Whitney Hess
  210. Perry Hewitt
  211. Jenny Lam / Hillel Cooperman
  212. David Hillis
  213. Andrew Hinton
  214. Tingan Ho
  215. Craig Hockenberry
  216. Robert Hoekman Jr.
  217. Andrew Hoffman
  218. Kevin M. Hoffman
  219. Lara Hogan
  220. Emma Jane Hogbin Westby
  221. Anthony Holdener
  222. Ryan Holsten
  223. Molly E. Holzschlag
  224. Sara Horton
  225. Byron Houwens
  226. Ross Howard
  227. Greg Hoy
  228. Belinda Hulin
  229. Bill Humphries
  230. Lachlan Hunt
  231. Mark Huot
  232. Bruce Hyslop
  233. Phillip Ikuvbogie
  234. Ryan Irelan
  235. Makiko Itoh
  236. Ida Jackson
  237. Charlotte Jackson
  238. Denise Jacobs
  239. Bob Jacobson
  240. Troy Janisch
  241. Scott Jehl
  242. Neil Jenkins
  243. Leslie Jensen-Inman
  244. L. Michelle Johnson
  245. Andrew Johnson
  246. Bronwyn Jones
  247. Glenn Jones
  248. Colleen Jones
  249. Natalie Jost
  250. Jonathan Kahn
  251. Laura Kalbag
  252. Chris Kaminski
  253. Harvey Kane
  254. Avinash Kaushik
  255. Jeremy Keith
  256. Scott Kellum
  257. Sally Kerrigan
  258. Alla Kholmatova
  259. Kate Kiefer Lee
  260. Crawford Kilian
  261. Andrew Kirkpatrick
  262. Greg Kise
  263. Erin Kissane
  264. Martin Kliehm
  265. Breandán Knowlton
  266. Thierry Koblentz
  267. Peter-Paul Koch
  268. Cameron Koczon
  269. Michelle Kondou
  270. Mattias Konradsson
  271. Jordan Koschei
  272. Nishant Kothary
  273. Jason Kottke
  274. Katie Kovalcin
  275. Scott Kramer
  276. Una Kravets
  277. Michael Krisher
  278. Eric Krock
  279. Andrew Kuhar
  280. Olivier Lacan
  281. Keith LaFerriere
  282. Diana Lakatos
  283. wk lang
  284. Wren Lanier
  285. Simon St. Laurent
  286. Art Lawry
  287. Kristofer Layon
  288. Cory Lebson
  289. Tina Lee
  290. Sharon Lee
  291. Antoine Lefeuvre
  292. Jeff Lembeck
  293. Inayaili León, de
  294. Debra Levin Gelman
  295. Matthew Levine
  296. Donna Lichaw
  297. Håkon Wium Lie
  298. Colin Lieberman
  299. Zell Liew
  300. Dave Linabury
  301. Margit Link-Rodrigue
  302. Caren Litherland
  303. Mark Llobrera
  304. Ian Lloyd
  305. Paul Lloyd
  306. Sue Lockwood
  307. Michael Lopp
  308. Rachel Lovinger
  309. Michael Lovitt
  310. Daniel Ludwin
  311. Jenn Lukas
  312. Erin Lynch
  313. Patrick Lynch
  314. Kelsey Lynn Lundberg
  315. Chris MacGregor
  316. Jeffrey MacIntyre
  317. Dougal MacPherson
  318. Søren Madsen
  319. Dennis A. Mahoney
  320. Dan Mall
  321. Rosie Manning
  322. Ethan Marcotte
  323. Matty Mariansky
  324. Mat Marquis
  325. Samuel Marshall
  326. Lisa Maria Martin
  327. John Martz
  328. Mehdi Maujood
  329. Cassie McDaniel
  330. Justin McDowell
  331. Gerry McGovern
  332. Karen McGrane
  333. Randall Snare and Elizabeth McGuane
  334. Nellie McKesson
  335. Drew McLellan
  336. Mica McPheeters
  337. Pete McVicar
  338. Timothy Meaney
  339. Garann Means
  340. Shawn Medero
  341. Tim Meehan
  342. Jens Oliver Meiert
  343. Aaron Mentele
  344. Erika Meyer
  345. Eric Meyer
  346. Justin Mezzell
  347. Bojan Mihelac
  348. Robert Miller
  349. Robin (roblimo) Miller
  350. David F. Miller
  351. Chris Mills
  352. Wilson Miner
  353. Craig Mod
  354. Cameron Moll
  355. Mike Monteiro
  356. Sam Moore
  357. Peter Morville
  358. Trenton Moss
  359. Alice Mottola
  360. Lee Moyer
  361. Lyle Mullican
  362. Rebecca Murphey
  363. Brendan Murray
  364. Timothy Murtaugh
  365. Rachel Nabors
  366. Sarah B. Nelson
  367. Mark Newhouse
  368. Jorunn D. Newth
  369. Chris Noessel
  370. Paul Novitski
  371. Matthew O'Neill
  372. George Oates
  373. Brandon Oelling
  374. Brandon Olejniczak
  375. George Olsen
  376. Ross Olson
  377. Mark Otto
  378. Nick Padmore
  379. Sarah Parmenter
  380. Rick Pastoor
  381. Jack Pate
  382. Dana Pavlichko
  383. Alan Pearce
  384. Jason Pearce
  385. Shane Pearlman
  386. Ross Penman
  387. Nathan Peretic
  388. Yesenia Perez-Cruz
  389. Dorian Peters
  390. Jon Peterson
  391. Dave Peth
  392. Veronica Picciafuoco
  393. Mike Pick
  394. Jack Pickard
  395. Heydon Pickering
  396. Andy Polaine
  397. Christophe Porteneuve
  398. Joshua Porter
  399. Eric Portis
  400. Kevin Potts
  401. Derek Powazek
  402. Shelley Powers
  403. Till Quack
  404. Whitney Quesenbery
  405. Peter Quinsey
  406. Jim Ramsey
  407. Aza Raskin
  408. Eleanor Ratliff
  409. Jim Ray
  410. Our Gentle Readers
  411. Aaron Rester
  412. Sam Richard
  413. Stephanie Rieger
  414. Nick Rigby
  415. Matt Riggott
  416. Daniel Ritzenthaler
  417. Christopher Robbins
  418. Caroline Roberts
  419. Stuart Robertson
  420. Susan Robertson
  421. Rich Robinson
  422. D. Keith Robinson
  423. Jason Rodriguez
  424. Marco Rogers
  425. Mike Rohde
  426. Pepi Ronalds
  427. Adrian Roselli
  428. Stewart Rosenberger
  429. Lou Rosenfeld
  430. Chris Ross-Gill
  431. Dave Rupert
  432. Andy Rutledge
  433. Richard Rutter
  434. Joseph Ryan
  435. Gian Sampson-Wild
  436. Jason Santa Maria
  437. Jeff Sauro
  438. Cédric Savarese
  439. Sbritt
  440. Suzanne Scacca
  441. Hana Schank
  442. Alex Schmidt
  443. Christopher Schmitt
  444. Adam Schumacher
  445. Erin Scime
  446. Paul Sciortino
  447. Thomas Scott
  448. Ryan Seddon
  449. Jana Sedivy
  450. Tomer Sharon
  451. Remy Sharp
  452. Al Shaw
  453. Dave Shea
  454. Peter K Sheerin
  455. Robbie Shepherd
  456. Eric Shepherd
  457. Sophie Shepherd
  458. Nick Sherman
  459. David Sherwin
  460. Jeremiah Shoaf
  461. Daniel Short
  462. Orr Shtuhl
  463. Kim Siever
  464. Adam Silver
  465. Amber Simmons
  466. Jen Simmons
  467. Neha Singh
  468. Kendra Skeene
  469. Michael Slater
  470. David Sleight
  471. Kristin Smaby
  472. Jonathan Smiley
  473. Paul Smith
  474. Tim Smith
  475. Jonathan Snook
  476. Eric Sol
  477. Sara Soueidan
  478. Paul Sowden
  479. ALA Staff
  480. Ruth Stalker-Firth
  481. Russ Starke
  482. Alan Stearns
  483. Hallvord R.M. Steen
  484. Joe Di Stefano
  485. Bob Stein
  486. Bram Stein
  487. Krista Stevens
  488. Walter Stevenson
  489. Noah Stokes
  490. Elliot Stokes
  491. Greg Storey
  492. Brian Suda
  493. Rob Swan
  494. Allen Tan
  495. Tyler Tate
  496. Olivier Thereaux
  497. Drew Thomas
  498. Yael Tolub
  499. Nick Tucker
  500. Nick Tucker
  501. Emmanuel King Turner
  502. Dan Turner
  503. Russ Unger
  504. Nick Usborne
  505. Santiago Valdarrama
  506. Marc van den Dobbelsteen
  507. Rian van der Merwe
  508. Bobby van der Sluis
  509. Roel Van Gils
  510. Jeffrey Veen
  511. David Verba
  512. Lea Verou
  513. Corey Vilhauer
  514. Sergio Villarreal
  515. Casper Voogt
  516. Sophia Voychehovski Prater
  517. The W3C
  518. The W3C QA Group
  519. Sara Wachter-Boettcher
  520.   waferbaby
  521. Jeremy Wagner
  522. Aarron Walter
  523. Denice Warren
  524. Samantha Warren
  525. Daniel Warren
  526. Dan Webb
  527. Eileen Webb
  528. Rose Weisburd
  529. Yoav Weiss
  530. Lisa Welchman
  531. Mike West
  532. Brian Williams
  533. Christina Wodtke
  534. Carolyn Wood
  535. Jeremy Wright
  536. Tim Wright
  537. Lisa Wright
  538. Luke Wroblewski
  539. Mark Wyner
  540. Victor Yocco
  541. Indi Young
  542. Nicholas Zakas
  543. Jack Zeal
  544. Jeffrey Zeldman
  545. Samantha Zhang
  546. Ping Zhu