A List Apart

Menu

Author

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