{"id":8564,"date":"2014-04-24T15:30:20","date_gmt":"2014-04-24T19:30:20","guid":{"rendered":"http:\/\/exob2b.com\/?post_type=post&#038;p=8564"},"modified":"2022-01-04T14:09:21","modified_gmt":"2022-01-04T19:09:21","slug":"web-designing-directly-in-the-browser","status":"publish","type":"post","link":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/","title":{"rendered":"Web design directly in the browser"},"content":{"rendered":"<p>This is a trend that is definitely gaining traction for smaller and less complicated web assignments that have budget and time constraints to consider. For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.<\/p>\n<p>By using this method, you can leverage several pages coded in HTML by linking them to one CSS file. Therefore, if your client wants to change the size of the &lt;h1&gt; titles, the colour of the &lt;h2&gt; titles, the line spacing in the &lt;p&gt; tags, the padding or margins in your layout\u2026 etc, you simply change a few code lines in the CSS file and, you\u2019re good to go! In Photoshop, this process is possible but more time is needed to scan and adjust a multitude of layers.<\/p>\n<p>Design to browser is not possible if the web designer isn\u2019t able or comfortable coding in HTML and CSS or, inside a code editor versus creating layers in Photoshop. These integration skills are a must in order to use this approach. Knowledge of media query breakpoints are also essential nowadays, given the ubiquitousness of responsive designs.<\/p>\n<p>A third \u201cin browser design\u201d skill, though less important, would be the use of a JavaScript library, such as jQuery, that can add a level of interactivity and animation to your design, such as showing or hiding content with an accordion, page scrolling\u2026 etc. This is a more advanced level of coding and can add a nice touch to an otherwise static web presentation. This however, is something that cannot be done in a Photoshop document.<\/p>\n<p>Don\u2019t get me wrong, Photoshop is my favourite tool, hands down. You simply cannot leave Photoshop closed all together because there will be the need to resize and crop images and logos. Also, more intricate design elements are impossible to produce in CSS alone, so Photoshop will remain a faithful design partner for every project.<\/p>\n<p>The big advantage of designing directly in the browser is the possibility of a quick turnaround in a tight timeframe. Your client will also get a feel of the site\u2019s responsiveness versus the static presentation of a PSD file.<\/p>\n<p>This design approach is not practical for every project. It should be reserved for smaller, less complex web sites or even mass email campaigns, especially for those projects that must be delivered&#8230; \u201cyesterday\u201d !<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a trend that is definitely gaining traction for smaller and less complicated web assignments that have budget and time constraints to consider. For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.<\/p>\n","protected":false},"author":9,"featured_media":8562,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1486,194],"tags":[],"class_list":["post-8564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-developpement-web-en","category-web-design-and-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.7 (Yoast SEO v26.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design a web page or site directly in the browser<\/title>\n<meta name=\"description\" content=\"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design directly in the browser\" \/>\n<meta property=\"og:description\" content=\"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"ExoB2B\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ExoB2B\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-24T19:30:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-04T19:09:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"580\" \/>\n\t<meta property=\"og:image:height\" content=\"376\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jean Gougeon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jean Gougeon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\"},\"author\":{\"name\":\"Jean Gougeon\",\"@id\":\"https:\/\/exob2b.com\/en\/#\/schema\/person\/5ca6150160c2b6c2e86f3d706d12c96e\"},\"headline\":\"Web design directly in the browser\",\"datePublished\":\"2014-04-24T19:30:20+00:00\",\"dateModified\":\"2022-01-04T19:09:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\"},\"wordCount\":410,\"publisher\":{\"@id\":\"https:\/\/exob2b.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png\",\"articleSection\":[\"Design et d\u00e9veloppement Web -\",\"Web Design and Development\"],\"inLanguage\":\"en-CA\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\",\"url\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\",\"name\":\"Design a web page or site directly in the browser\",\"isPartOf\":{\"@id\":\"https:\/\/exob2b.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png\",\"datePublished\":\"2014-04-24T19:30:20+00:00\",\"dateModified\":\"2022-01-04T19:09:21+00:00\",\"description\":\"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.\",\"breadcrumb\":{\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#breadcrumb\"},\"inLanguage\":\"en-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-CA\",\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage\",\"url\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png\",\"contentUrl\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png\",\"width\":580,\"height\":376,\"caption\":\"Le design d\u2019un site web directement dans le navigateur\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/exob2b.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web design directly in the browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/exob2b.com\/en\/#website\",\"url\":\"https:\/\/exob2b.com\/en\/\",\"name\":\"ExoB2B\",\"description\":\"High precision integrated marketing\",\"publisher\":{\"@id\":\"https:\/\/exob2b.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/exob2b.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-CA\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/exob2b.com\/en\/#organization\",\"name\":\"ExoB2B\",\"url\":\"https:\/\/exob2b.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-CA\",\"@id\":\"https:\/\/exob2b.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2025\/11\/exob2b-logo-696x696-1.jpg\",\"contentUrl\":\"https:\/\/exob2b.com\/wp-content\/uploads\/2025\/11\/exob2b-logo-696x696-1.jpg\",\"width\":696,\"height\":696,\"caption\":\"ExoB2B\"},\"image\":{\"@id\":\"https:\/\/exob2b.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/ExoB2B\",\"https:\/\/www.linkedin.com\/company\/1903572\/admin\/dashboard\/\",\"https:\/\/www.youtube.com\/@Exob2b\",\"https:\/\/www.threads.com\/@exob2b\"],\"description\":\"Agence marketing B2B, Montr\u00e9al et Rive-Sud. Au service des grandes entreprises et des PME. ExoB2B est une agence marketing B2B \u00e0 la crois\u00e9e de la strat\u00e9gie, de la cr\u00e9ativit\u00e9 et du num\u00e9rique. Bas\u00e9s sur la Rive-Sud de Montr\u00e9al, nous aidons les entreprises \u00e0 se positionner avec clart\u00e9, b\u00e2tir une marque forte, g\u00e9n\u00e9rer des pistes de vente qualifi\u00e9es et cro\u00eetre durablement sur leurs march\u00e9s. Pionni\u00e8re du marketing B2B, ExoB2B fait \u00e9voluer la fa\u00e7on dont les marques pensent et performent.\",\"email\":\"info@exob2b.com\",\"telephone\":\"514-765-9888\",\"legalName\":\"ExoB2B\",\"foundingDate\":\"2002-01-20\",\"naics\":\"541810\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/exob2b.com\/en\/#\/schema\/person\/5ca6150160c2b6c2e86f3d706d12c96e\",\"name\":\"Jean Gougeon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-CA\",\"@id\":\"https:\/\/exob2b.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61cb13a1252e94ff063bf1e042a677b299f059e60df520d555a92e95620d1124?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61cb13a1252e94ff063bf1e042a677b299f059e60df520d555a92e95620d1124?s=96&d=mm&r=g\",\"caption\":\"Jean Gougeon\"},\"description\":\"Apr\u00e8s plus de 25 ans d\u2019exp\u00e9rience en design graphique imprim\u00e9 et plus de 15 ann\u00e9es en design et d\u00e9veloppement web, Jean a rejoint l\u2019\u00e9quipe d\u2019Exo B2B. C\u2019est son envie de faire les choses autrement, avec cr\u00e9ativit\u00e9, qui font sa force en id\u00e9ation et conception dans des mandats vari\u00e9s. Que ce soit en print ou en web, son but est de cerner les besoins des clients pour livrer un concept \u00e0 la fois cr\u00e9atif et efficace, et de s\u2019assurer de leur satisfaction. Il est aujourd\u2019hui en charge des cr\u00e9ations visuelles et graphiques pour Exo et ses clients.\",\"url\":\"https:\/\/exob2b.com\/en\/author\/exojean\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design a web page or site directly in the browser","description":"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/","og_locale":"en_US","og_type":"article","og_title":"Web design directly in the browser","og_description":"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.","og_url":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/","og_site_name":"ExoB2B","article_publisher":"https:\/\/www.facebook.com\/ExoB2B","article_published_time":"2014-04-24T19:30:20+00:00","article_modified_time":"2022-01-04T19:09:21+00:00","og_image":[{"width":580,"height":376,"url":"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png","type":"image\/png"}],"author":"Jean Gougeon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jean Gougeon","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#article","isPartOf":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/"},"author":{"name":"Jean Gougeon","@id":"https:\/\/exob2b.com\/en\/#\/schema\/person\/5ca6150160c2b6c2e86f3d706d12c96e"},"headline":"Web design directly in the browser","datePublished":"2014-04-24T19:30:20+00:00","dateModified":"2022-01-04T19:09:21+00:00","mainEntityOfPage":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/"},"wordCount":410,"publisher":{"@id":"https:\/\/exob2b.com\/en\/#organization"},"image":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png","articleSection":["Design et d\u00e9veloppement Web -","Web Design and Development"],"inLanguage":"en-CA"},{"@type":"WebPage","@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/","url":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/","name":"Design a web page or site directly in the browser","isPartOf":{"@id":"https:\/\/exob2b.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage"},"image":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png","datePublished":"2014-04-24T19:30:20+00:00","dateModified":"2022-01-04T19:09:21+00:00","description":"For specific projects, it is faster to design your web layout directly in the browser, bypassing the Photoshop layer steps all together.","breadcrumb":{"@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#breadcrumb"},"inLanguage":"en-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-CA","@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#primaryimage","url":"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png","contentUrl":"https:\/\/exob2b.com\/wp-content\/uploads\/2014\/04\/integration-html-css.png","width":580,"height":376,"caption":"Le design d\u2019un site web directement dans le navigateur"},{"@type":"BreadcrumbList","@id":"https:\/\/exob2b.com\/en\/web-designing-directly-in-the-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/exob2b.com\/en\/"},{"@type":"ListItem","position":2,"name":"Web design directly in the browser"}]},{"@type":"WebSite","@id":"https:\/\/exob2b.com\/en\/#website","url":"https:\/\/exob2b.com\/en\/","name":"ExoB2B","description":"High precision integrated marketing","publisher":{"@id":"https:\/\/exob2b.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/exob2b.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-CA"},{"@type":"Organization","@id":"https:\/\/exob2b.com\/en\/#organization","name":"ExoB2B","url":"https:\/\/exob2b.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-CA","@id":"https:\/\/exob2b.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/exob2b.com\/wp-content\/uploads\/2025\/11\/exob2b-logo-696x696-1.jpg","contentUrl":"https:\/\/exob2b.com\/wp-content\/uploads\/2025\/11\/exob2b-logo-696x696-1.jpg","width":696,"height":696,"caption":"ExoB2B"},"image":{"@id":"https:\/\/exob2b.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ExoB2B","https:\/\/www.linkedin.com\/company\/1903572\/admin\/dashboard\/","https:\/\/www.youtube.com\/@Exob2b","https:\/\/www.threads.com\/@exob2b"],"description":"Agence marketing B2B, Montr\u00e9al et Rive-Sud. Au service des grandes entreprises et des PME. ExoB2B est une agence marketing B2B \u00e0 la crois\u00e9e de la strat\u00e9gie, de la cr\u00e9ativit\u00e9 et du num\u00e9rique. Bas\u00e9s sur la Rive-Sud de Montr\u00e9al, nous aidons les entreprises \u00e0 se positionner avec clart\u00e9, b\u00e2tir une marque forte, g\u00e9n\u00e9rer des pistes de vente qualifi\u00e9es et cro\u00eetre durablement sur leurs march\u00e9s. Pionni\u00e8re du marketing B2B, ExoB2B fait \u00e9voluer la fa\u00e7on dont les marques pensent et performent.","email":"info@exob2b.com","telephone":"514-765-9888","legalName":"ExoB2B","foundingDate":"2002-01-20","naics":"541810","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"}},{"@type":"Person","@id":"https:\/\/exob2b.com\/en\/#\/schema\/person\/5ca6150160c2b6c2e86f3d706d12c96e","name":"Jean Gougeon","image":{"@type":"ImageObject","inLanguage":"en-CA","@id":"https:\/\/exob2b.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61cb13a1252e94ff063bf1e042a677b299f059e60df520d555a92e95620d1124?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61cb13a1252e94ff063bf1e042a677b299f059e60df520d555a92e95620d1124?s=96&d=mm&r=g","caption":"Jean Gougeon"},"description":"Apr\u00e8s plus de 25 ans d\u2019exp\u00e9rience en design graphique imprim\u00e9 et plus de 15 ann\u00e9es en design et d\u00e9veloppement web, Jean a rejoint l\u2019\u00e9quipe d\u2019Exo B2B. C\u2019est son envie de faire les choses autrement, avec cr\u00e9ativit\u00e9, qui font sa force en id\u00e9ation et conception dans des mandats vari\u00e9s. Que ce soit en print ou en web, son but est de cerner les besoins des clients pour livrer un concept \u00e0 la fois cr\u00e9atif et efficace, et de s\u2019assurer de leur satisfaction. Il est aujourd\u2019hui en charge des cr\u00e9ations visuelles et graphiques pour Exo et ses clients.","url":"https:\/\/exob2b.com\/en\/author\/exojean\/"}]}},"_links":{"self":[{"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/posts\/8564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/comments?post=8564"}],"version-history":[{"count":1,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/posts\/8564\/revisions"}],"predecessor-version":[{"id":31111,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/posts\/8564\/revisions\/31111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/media\/8562"}],"wp:attachment":[{"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/media?parent=8564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/categories?post=8564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exob2b.com\/en\/wp-json\/wp\/v2\/tags?post=8564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}