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.

Also from this author

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