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

Contributions by Mat Marquis

  • JavaScript for Web Designers: DOM Scripting

    JavaScript’s ability to access and modify elements on the page is undeniable, and the Document Object Model is an essential component of that. In this excerpt from Mat Marquis’ new book, JavaScript for Web Designers, Mat shows us how to manhandle the DOM to get better results from our scripts.

  • 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.

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