A List Apart



Image of Mat Marquis

Mat Marquis

Mat “Wilto” Marquis is an amateur boxer, aspiring chef, halfway decent carpenter, and passable antique British motorcycle mechanic—when not making fast, accessible, responsive websites. He keeps busy.

As chair of the Responsive Issues Community Group, Mat spearheaded the effort to bring native responsive image solutions to the HTML5 specification, later going on to facilitate browser implementations and oversee the addition of native responsive image techniques to major CMSes. He has spoken at An Event Apart, edited for A List Apart, and published JavaScript for Web Designers and Image Performance with A Book Apart. He even had the honor of appearing in the film What Comes Next is the Future, to discuss his role in web standards. He has an IMDB page and everything!

Just—… just ignore the other thing on there.

Long story.

Also from this author

  • Responsive Images

    The `img` element remains one of the biggest challenges for website performance, especially in responsive designs. In this excerpt from Image Performance, Mat Marquis tells us why, but he also shines a light on the solution.

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