A List Apart



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 editor at A List Apart and a former member of the jQuery Mobile team.

Contributions by Mat Marquis

  • Container Queries: Once More Unto the Breach

    Issue 423 · 

    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.

  • Designing for Performance: Can We Have it All?

    Everyone wants sites that are responsive, beautiful, and fast. Do we need to make tradeoffs? And whose job is performance, anyway? In this event from February 26, 2015, we asked a panel of designers and developers from both in-house and agency teams to share their stories, strategies, and case studies. Watch the video or read the transcript here.

  • 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

    Issue 388 · 

    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

    Issue 351 · 

    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

    Issue 343 · 

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