{"id":285600,"date":"2019-04-15T10:03:50","date_gmt":"2019-04-15T17:03:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=285600"},"modified":"2019-04-20T10:41:17","modified_gmt":"2019-04-20T17:41:17","slug":"a-website-is-a-car-and-not-a-book","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-website-is-a-car-and-not-a-book\/","title":{"rendered":"A Website is a Car and Not a Book"},"content":{"rendered":"
\n

I\u2019ve been wondering for a good long while why it feels like web design and development isn\u2019t respected as much as native app development, and why the front-end role in many organizations is seen as a nice-to-have rather than a vital part of the business. Why is it so hard to see that this gig we call “front-end development” is crucial for business and even the day-to-day lives of users?<\/p>\n

<\/p>\n

Is it just me that feels this way?\n<\/p><\/div>\n

\n
\n

We depend on front-end developers to help us file our taxes, buy our food and clothes, pay our bills, and entertain us. We find new music, we read stories and play games, and we fall in love… all on websites made up of nothing more than HTML, CSS, and JavaScript written by front-enders.<\/p>\n

I\u2019m not trying to be a jerk here, but you can see organizations everywhere that de-prioritize front-end development. There are slow websites! Ad-tech junk everywhere! Poor responsive interfaces! Divs used for buttons! Inaccessible forms! The problems on the web today are daunting and overwhelming to those who care about both good front-end development and the health of the web itself.<\/p>\n

What’s the cause? Well, I certainly don\u2019t believe that it\u2019s malice. Nobody wants to make slow websites or broken interfaces and nobody (I think) is intentionally trying to break the web. So, why do we all end up doing things that go against what we know to be best practices? What is it about the complexities of web design that is so hard to grasp? <\/p>\n

Again, I\u2019m not being mean here \u2013 this is an honest question.\n<\/p><\/div>\n<\/div>\n

\n
\n

I got coffee with my pal Lindsay Grizzard<\/a> the other day and we were talking about this stuff, asking each other these and other really tough questions related to our work. We both see problems in this industry and it drives us both a little mad to some extent.<\/p>\n

Anyway, I asked Lindsay that question: what is it about web design that makes it so difficult to understand? She posited that the issue is that most people believe web design is like designing a book. Heck, we still call these things web pages<\/em>. But Lindsay argued that building a modern website is nothing like designing a book; it\u2019s more like designing a car.<\/p>\n

Lindsay and I looked at the cars parked on the street next to us: they have to be mass produced and they have to be tested. Each has to be built up of perfectly identical components that need to fit together in a very specific format. There are technical issues \u2013 limitations of physics, money, and time \u2013 that require confronting on a daily basis. You can\u2019t point at one part of the car and have an opinion about aesthetics because that one component changes the relationships of the others. You have to understand that you\u2019re looking at an immensely complicated system of moving parts.<\/p>\n

I love that comparison though, even if it\u2019s not particularly helpful to give others insight into what we do: a website is a car and not a book.\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

I\u2019ve been wondering for a good long while why it feels like web design and development isn\u2019t respected as much as native app development, and why the front-end role in many organizations is seen as a nice-to-have rather than a vital part of the business. Why is it so hard to see that this gig […]<\/p>\n","protected":false},"author":223806,"featured_media":286351,"comment_status":"open","ping_status":"closed","sticky":false,"template":"art-direction\/fancy-post.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A Website is a Car and Not a Book","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/Car_Bookend-2.png?fit=4000%2C2000&ssl=1","jetpack-related-posts":[{"id":330231,"url":"https:\/\/css-tricks.com\/the-power-of-web-development-outside-tech\/","url_meta":{"origin":285600,"position":0},"title":"The Power of Web Development Outside Tech","date":"December 7, 2020","format":false,"excerpt":"In 2020, I learned about the power of web development for organizations and nonprofits outside of tech. I learned that you can leverage your skills to affect change and build long-lasting partnerships. This year, I joined the Board of Directors of the League of Women Voters San Francisco (LWVSF), which,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-07-at-1.31.58-PM.png?fit=1200%2C545&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359941,"url":"https:\/\/css-tricks.com\/the-web-is-more-gooder-and-other-observations-on-todays-web-tech\/","url_meta":{"origin":285600,"position":1},"title":"The Web is More Gooder, and Other Observations on Today’s Web Tech","date":"December 30, 2021","format":false,"excerpt":"I'm actually working on a talk (whew! been a while! kinda feels good!) about just how good the world of building websites has gotten. I plan to cover a wide swath of web tech, on purpose, because I feel like things have gotten good all around. CSS is doing great,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/code-ok.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300565,"url":"https:\/\/css-tricks.com\/how-many-websites-should-we-build\/","url_meta":{"origin":285600,"position":2},"title":"How Many Websites Should We Build?","date":"December 27, 2019","format":false,"excerpt":"Someone emailed me: What approach to building a site should I take? Build a single responsive website Build a site on a single domain, but detect mobile, and render a separate mobile site Build a separate mobile site on a subdomain It's funny how quickly huge industry-defining conversations fade from\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rectangles-some-filled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302760,"url":"https:\/\/css-tricks.com\/a-headless-cms-for-you-and-your-web-development-agency\/","url_meta":{"origin":285600,"position":3},"title":"A Headless CMS for You and Your Web Development Agency","date":"February 13, 2020","format":false,"excerpt":"Storyblok is a headless but component-based CMS with a built-in live-preview. You can use it for building fast and reliable websites and power native apps with your favorite technology. Let us start with the basics and\u00a0what a headless CMS is: A headless content management system is a back-end only content\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/storyblok-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317663,"url":"https:\/\/css-tricks.com\/wordpress-com-growth-summit\/","url_meta":{"origin":285600,"position":4},"title":"WordPress.com Growth Summit","date":"July 23, 2020","format":false,"excerpt":"I'm speaking at The Official WordPress.com Growth Summit coming up in August. \"Learn how to build and\u00a0grow your site, from\u00a0start\u00a0to\u00a0scale\", as they say. Lovely, thick, diverse set of speakers. It's a little bit outside my normal spheres which makes it extra exciting for me. Selena Jackson: The goal of this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/wpsummit-wide-purple.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":341383,"url":"https:\/\/css-tricks.com\/creating-powerful-websites-with-serverless-driven-cms-development\/","url_meta":{"origin":285600,"position":5},"title":"Creating Powerful Websites with Serverless-Driven CMS Development","date":"May 25, 2021","format":false,"excerpt":"Choosing the right tools to build a website for your organization is essential, but it can be tough to find the right fit. Simple site builders like Wix and Squarespace are easy for marketers to use, but severely limit developers when it comes to customizing site functionality. WordPress is a\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Developer-Header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/Car_Bookend-2.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285600"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=285600"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285600\/revisions"}],"predecessor-version":[{"id":286635,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285600\/revisions\/286635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/286351"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=285600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=285600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=285600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}