A List Apart

Menu

Author

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