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