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