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

  • 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

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