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