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