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