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