A List Apart



>Image of Mat Marquis

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

    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

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