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