{"id":257,"date":"2019-02-25T13:42:54","date_gmt":"2019-02-25T12:42:54","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/"},"modified":"2020-07-22T10:33:15","modified_gmt":"2020-07-22T08:33:15","slug":"editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/","title":{"rendered":"Editorial web layouts: how Gutenberg would have used CSS (perhaps)"},"content":{"rendered":"

F<\/span>rom the beginning of the World Wide Web<\/span>, we have witnessed an increasing number of solutions for presenting websites to end users<\/span>. Conversely, nowadays web designers<\/span> tend to adopt practically the same layout<\/span> template<\/span> for most of the modern websites. As said by Jen Simmons, Designer Advocate at Mozilla, \u201cwe are not designing layouts<\/span>; we are downloading them\u201d.<\/p>\n

During Codemotion Milan 2018, Giulia Talamonti<\/a>, front-end<\/span> developer<\/span> at Credimi, discussed the evolution of modern web layouts<\/span> and tried to step into Gutenberg<\/span>\u2019s shoes<\/strong>: how would Gutenberg<\/span> have designed web templates<\/span>? In particular, since his interests were in editorial printing, which choices would have him taken in order to develop an editorial web layout<\/span><\/strong>?<\/p>\n

In this post, we will summarize Giulia\u2019s ideas and discuss which solutions may allow to develop a modern editorial web layout<\/span>.<\/p>\n

The evolution of web layouts<\/h2>\n

Looking back to the past, the first websites had no layouts<\/span> at all, and were only aimed at showing plain or poorly enriched text. Therefore, in the 90s web developers<\/span> and designers<\/span> started using tables<\/strong>, and the first \u201cstandard\u201d web layouts<\/span> began to emerge.\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

More recently, web designers<\/span> started using better and CSS<\/span>-only solutions. Grid<\/span> layouts<\/span><\/strong> have significantly changed the way designers<\/span> build layouts<\/span>, offering a more flexible way to arrange elements inside a web page.\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

Today, we entered in the mobile era<\/strong>, and new needs emerged for modern websites. Screens form factors are no more uniform, landscape and portrait modes should be interchangeably usable and websites must provide an equally excellent user<\/span> experience in desktop computers, laptops and mobile devices<\/span>. These emerging needs drove new trends towards responsive<\/span> web design<\/strong>.\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

Today we are still in the mobile era, but what web designers<\/span> are usually doing is to adopt a sort of layout<\/span> template<\/span> which is very similar for most websites. According to Giulia Talamonti, we have a sort of \u201clayout<\/span> of the present\u201d, which is depicted in the following images:\u00a0<\/p>\n

\"editorial<\/a>\u00a0<\/p>\n

Using any CMS<\/span> like WordPress<\/span>, Drupal<\/span> or Joomla<\/span>, you can quickly figure out that all the available templates<\/span> are based on this sort of \u201cstandard\u201d layout<\/span>.
However, there are situations where such a layout<\/span> might be replaced by something different. Several newspaper websites are using something that is completely different from the printed version<\/span>. Arranging content similarly in both the printed and the digital version<\/span> of a newspaper may help the end users in finding more easily the location of an article or an image when using both the formats.
According to Giulia Talamonti, Gutenberg would probably have opted for such an idea. So, how can we use the CSS<\/span> grid<\/span> in order to develop an editorial web layout<\/span>?<\/p>\n

Designing editorial web layouts<\/h2>\n

A modern editorial web layout<\/span> can have a structure similar to the following one:\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

In order to implement this, Giulia Talamonti identified some key features and issues that should be considered in the development of such a layout<\/span>.<\/p>\n

Modular grids<\/strong>. Arranging elements with the above layout<\/span> can be easily done by using the CSS<\/span> grid<\/span>, and in particular using modular grids. This approach has many advantages: it helps to align elements, makes navigation easier, and allows us to create an adaptive website (thus supporting the responsive requirement)
Adaptive contents<\/strong>. Many CSS<\/span> tricks can be used in order to automatically adapt the content (i.e. the texts) to the container elements. However, they are often replaced with JavaScript<\/span> because of their rare application<\/span> in actual designs. It is the case of minmax()<\/code>, fit-content()<\/code> and max-content\/min-content<\/code>, which allows us to create adaptive solutions:\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

Grid<\/span> and float<\/strong>. Float<\/span> elements may be painful to incorporate inside a grid<\/span> layout<\/span>. This is the case, for instance, when we want a floating element (e.g. an image) with text on both sides of it. The CSS<\/span> exclusion module<\/strong> can help in this direction, allowing the use of wrap-flow: both<\/code>. However, it is currently supported by Internet Explorer<\/span> 10+ only, and usually this is solved with additional JavaScript<\/span>\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

Printing stylesheets<\/strong>. If we want to design an editorial layout<\/span>, properly printing a page based on such a layout<\/span> is a crucial feature. This needs to be addressed by means of the @page<\/code> media rule. Indeed, it allows to specify the page format<\/span> (e.g. A4 or A5, but this is only supported by Chrome<\/span> and Opera<\/span>), as well as page margins<\/span> or page numbering.\u00a0<\/p>\n

\"\"<\/a>\u00a0<\/p>\n

Note also that browsers<\/span> like Chrome<\/span> incorporate testing features in their debuggers, which allow rendering the output of a printed page (without actually printing anything).<\/p>\n

As a final note, consider that eBooks<\/span> are nothing but webpages. The ideas described above about designing an editorial layout<\/span> may thus find interesting application<\/span> in the context of eBooks<\/span> design.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

From the beginning of the World Wide Web, we have witnessed an increasing number of solutions for presenting websites to end users. Conversely, nowadays web designers tend to adopt practically the same layout template for most of the modern websites. As said by Jen Simmons, Designer Advocate at Mozilla, \u201cwe are not designing layouts; we… Read more<\/a><\/p>\n","protected":false},"author":3,"featured_media":258,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":3,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[22,66],"collections":[],"class_list":{"0":"post-257","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-codemotion-milan","9":"tag-css","10":"entry"},"yoast_head":"\nEditorial web layouts: how Gutenberg would have used CSS (perhaps) - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Editorial web layouts: how Gutenberg would have used CSS (perhaps)\" \/>\n<meta property=\"og:description\" content=\"During Codemotion Milan 2018, Giulia Talamonti, front-end developer at Credimi, discussed the evolution of modern web layouts and tried to step into Gutenberg\u2019s shoes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-25T12:42:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-22T08:33:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1194\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vito Gentile\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Editorial web layouts: how Gutenberg would have used CSS (perhaps)\" \/>\n<meta name=\"twitter:creator\" content=\"@ViGentile\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vito Gentile\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\"},\"author\":{\"name\":\"Vito Gentile\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\"},\"headline\":\"Editorial web layouts: how Gutenberg would have used CSS (perhaps)\",\"datePublished\":\"2019-02-25T12:42:54+00:00\",\"dateModified\":\"2020-07-22T08:33:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\"},\"wordCount\":778,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png\",\"keywords\":[\"Codemotion Milan\",\"CSS\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\",\"name\":\"Editorial web layouts: how Gutenberg would have used CSS (perhaps) - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png\",\"datePublished\":\"2019-02-25T12:42:54+00:00\",\"dateModified\":\"2020-07-22T08:33:15+00:00\",\"description\":\"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png\",\"width\":1194,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Editorial web layouts: how Gutenberg would have used CSS (perhaps)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\",\"name\":\"Vito Gentile\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"caption\":\"Vito Gentile\"},\"description\":\"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!\",\"sameAs\":[\"https:\/\/vitogentile.it\",\"https:\/\/www.linkedin.com\/in\/vitogentile\/en\",\"https:\/\/x.com\/ViGentile\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Editorial web layouts: how Gutenberg would have used CSS (perhaps) - Codemotion Magazine","description":"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.","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:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/","og_locale":"en_US","og_type":"article","og_title":"Editorial web layouts: how Gutenberg would have used CSS (perhaps)","og_description":"During Codemotion Milan 2018, Giulia Talamonti, front-end developer at Credimi, discussed the evolution of modern web layouts and tried to step into Gutenberg\u2019s shoes","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2019-02-25T12:42:54+00:00","article_modified_time":"2020-07-22T08:33:15+00:00","og_image":[{"width":1194,"height":675,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png","type":"image\/png"}],"author":"Vito Gentile","twitter_card":"summary_large_image","twitter_title":"Editorial web layouts: how Gutenberg would have used CSS (perhaps)","twitter_creator":"@ViGentile","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Vito Gentile","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/"},"author":{"name":"Vito Gentile","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313"},"headline":"Editorial web layouts: how Gutenberg would have used CSS (perhaps)","datePublished":"2019-02-25T12:42:54+00:00","dateModified":"2020-07-22T08:33:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/"},"wordCount":778,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png","keywords":["Codemotion Milan","CSS"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/","name":"Editorial web layouts: how Gutenberg would have used CSS (perhaps) - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png","datePublished":"2019-02-25T12:42:54+00:00","dateModified":"2020-07-22T08:33:15+00:00","description":"Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png","width":1194,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/editorial-web-layouts-how-gutenberg-would-have-used-css-perhaps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Editorial web layouts: how Gutenberg would have used CSS (perhaps)"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313","name":"Vito Gentile","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","caption":"Vito Gentile"},"description":"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!","sameAs":["https:\/\/vitogentile.it","https:\/\/www.linkedin.com\/in\/vitogentile\/en","https:\/\/x.com\/ViGentile"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-600x600.png","author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png",1194,675,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-300x170.png",300,170,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-768x434.png",768,434,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-1024x579.png",1024,579,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png",1194,675,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png",1194,675,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present.png",100,57,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/02\/layout-present-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_comment_info":0,"uagb_excerpt":"From the beginning of the World Wide Web, we have witnessed an increasing number of solutions for presenting websites to end users. Conversely, nowadays web designers tend to adopt practically the same layout template for most of the modern websites. As said by Jen Simmons, Designer Advocate at Mozilla, \u201cwe are not designing layouts; we……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":4,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/257\/revisions"}],"predecessor-version":[{"id":6681,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/257\/revisions\/6681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=257"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}