{"id":21830,"date":"2018-12-19T18:54:44","date_gmt":"2018-12-19T18:54:44","guid":{"rendered":"http:\/\/the_new_cloudinary_website_design"},"modified":"2024-06-06T12:37:23","modified_gmt":"2024-06-06T19:37:23","slug":"the_new_cloudinary_website_design","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design","title":{"rendered":"The New Cloudinary Website Design"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Last month we unveiled a refresh of our <a href=\"https:\/\/cloudinary.com\/\">website<\/a>. As with all redesigns, there were numerous drivers behind the rollout. First and foremost, we\u2019re a company that understands the power of visual storytelling, and the ways in which a website must beautifully and clearly convey a brand\u2019s story and offerings. Our website needed to better reflect our brand and our solutions. This post highlights some of the thinking behind our changes.<\/p>\n<h2>Who Are We?<\/h2>\n<p>At the beginning of 2018, we held a series of conversations to examine and update, if necessary, our core positioning. This structured process helped us identify and confirm a few \u201ctruths\u201d:<\/p>\n<ul>\n<li>We are an ideal platform for companies whose rich media is pivotal to their business success.<\/li>\n<li>Specifically, companies choose Cloudinary because of 1) our ability to support an immensely broad set of customer product and design requirements; and 2) our ability to significantly enhance developer productivity.<\/li>\n<li>We are an API-first, developer-centric platform, with solutions for multiple use-cases, including our recently introduced <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">digital asset management<\/a> product.<\/li>\n<\/ul>\n<div class=\"grid\">\n    <div class=\"slider-box\">\n        <div class=\"slider\" id=\"slider2\">\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/CL_2012.png\" alt=\"2012\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/CL_2013.png\" alt=\"2013\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/CL_2015.png\" alt=\"2015\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/CL_2016.png\" alt=\"2016\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/CL_2018.png\" alt=\"2018\">\n                <h2 class=\"slider__item__title\"><\/h2>\n            <\/div>\n        <\/div>\n<pre><code>    &lt;div class=&quot;slider-nav&quot;&gt;\n        &lt;div class=&quot;slider-nav__prev&quot; id=&quot;prev&quot;&gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;\/i&gt;&lt;\/div&gt;\n        &lt;div class=&quot;slider-nav__next&quot; id=&quot;next&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;\/i&gt;&lt;\/div&gt;\n        &lt;div class=&quot;slider-nav__dots&quot; id=&quot;dots&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n<h2>Designing A Reflection of Our Brand<\/h2>\n<p>Once we moved from positioning to website design, our choices had to reflect the aforementioned principles while ensuring that our users could still easily find information relevant to them. After reviewing multiple options, we chose a \u201cfactory\u201d theme that we believe is an apt analogy for our platform capabilities, while still showcasing the end-to-end sequencing of how images, videos, and other rich media are managed through Cloudinary.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/homepage-image-blog.jpg\" alt=\"image of the full factory\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"653\"\/><\/p>\n<p>Our specific thematic choice reflects the key platform architecture principles of being dynamic, flexible, and efficient. What\u2019s more, the nature of the factory design enables us to showcase specific capabilities within each part of the \u201cfactory floor\u201d. We know that each company has different needs and prioritizes different aspects of Cloudinary\u2019s offerings, so we wanted visitors to be able to drill down into those areas that were most relevant to them.<\/p>\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Candal\">\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.6.3\/css\/font-awesome.min.css\">\n<style>\n@import url(https:\/\/fonts.googleapis.com\/css?family=Candal);\n\n\/*\nA super simple jQuery slider plugin\n\nTable of contents\n\n1.0 - Typography\n2.0 - Elements\n3.0 - Grid\n4.0 - Slider\n\t4.1 - Slider Nav\n*\/\n\n\n\/*\n1.0 - Typography\n*\/\n\nh1,\nh2 {\n    font-family: Candal, sans-serif;\n    line-height: 1.2;\n}\n\n\n\/*\n2.0 - Elements\n*\/\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\n\n\/*\n3.0 - Grid\n*\/\n\n.grid {\n    max-width: 960px;\n    margin: auto;\n}\n\n\n\/*\n4.0 - Slider\n*\/\n\n.slider-box,\n.slider__item {\n    position: relative;\n}\n\n.slider {\n    overflow: hidden;\n}\n\n.slider__canvas {\n    transition: transform 0.5s;\n}\n\n.slider__item {\n    float: left;\n}\n\n.slider__item__title {\n    opacity: 0;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 70%;\n    margin: 0;\n    color: #468;\n    font-size: 2.5rem;\n    line-height: 1;\n    text-align: center;\n    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);\n    transition: opacity 0.3s, transform 0.3s;\n    transform: translate3d(-50%, -60%, 0);\n}\n\n.active .slider__item__title {\n    opacity: 1;\n    transition-delay: 0.5s;\n    transform: translate3d(-50%, -50%, 0);\n}\n\n@media(min-width: 48rem) {\n    .slider__item__title {\n        font-size: 5rem;\n    }\n}\n\n\n\/*\n4.1 - Slider Nav\n*\/\n\n.slider-nav {\n    color: #fff;\n    font-size: 1rem;\n    text-align: center;\n}\n\n.slider-nav__dots {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    right: 20px;\n}\n\n.slider-nav__prev,\n.slider-nav__next,\n.slider__dot {\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 2px;\n    cursor: pointer;\n    backface-visibility: hidden;\n    transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.slider-nav__prev,\n.slider-nav__next {\n    position: absolute;\n    top: 50%;\n    width: 3rem;\n    height: 3rem;\n    margin-top: -1.5rem;\n    line-height: 3rem;\n}\n\n.slider-nav__prev {\n    left: 7%;\n}\n\n.slider-nav__next {\n    right: 7%;\n}\n\n.slider__dot {\n    display: inline-block;\n    width: 1rem;\n    height: 1rem;\n    margin: 0 1rem;\n}\n\n.slider-nav__prev:hover,\n.slider-nav__next:hover,\n.slider__dot.active,\n.slider__dot:hover {\n    transform: scale3d(1.5, 1.5, 1);\n}\n<\/style>\n<div class=\"grid\">\n    <div class=\"slider-box\">\n        <div class=\"slider\" id=\"slider1\">\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/image-management-sm.png\" alt=\"image-management\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/video-management-xs.png\" alt=\"video-management\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/image-manipulation-xs.png\" alt=\"image-manipulation\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/video-manipulation-transcoding-xs.png\" alt=\"video-manipulation-transcoding\">\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/optimization_delivery-xs.png\" alt=\"optimization_delivery\">\n                <h2 class=\"slider__item__title\"><\/h2>\n            <\/div>\n<div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/upload-storage-xs.png\" alt=\"upload-storage\">\n            <\/div>\n<div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/website\/hero\/cloud-asset-management-xs.png\" alt=\"cloud-asset-management\">\n            <\/div>\n        <\/div>\n<pre><code>    &lt;div class=&quot;slider-nav&quot;&gt;\n        &lt;div class=&quot;slider-nav__prev&quot; id=&quot;prev&quot;&gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;\/i&gt;&lt;\/div&gt;\n        &lt;div class=&quot;slider-nav__next&quot; id=&quot;next&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;\/i&gt;&lt;\/div&gt;\n        &lt;div class=&quot;slider-nav__dots&quot; id=&quot;dots&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n<script>\n\nfunction insertScript(src, callback) {\n  var script = document.createElement('script');\n  script.onload = callback;\n  script.type = 'text\/javascript';\n  script.async = true;\n  script.src = src;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(script, s);\n }\n insertScript('\/javascripts\/jquery.min.js', function(){\n\n    'use strict';\n\n    var pluginName = 'slider',\n        defaults = {\n            next: '.slider-nav__next',\n            prev: '.slider-nav__prev',\n            item: '.slider__item',\n            dots: false,\n            dotClass: 'slider__dot',\n            autoplay: false,\n            autoplayTime: 3000,\n        };\n\n    function slider(element, options) {\n        this.$document = $(document);\n        this.$window = $(window);\n        this.$element = $(element);\n        this.options = $.extend({}, defaults, options);\n        this.init();\n    };\n\n    slider.prototype.init = function() {\n        this.setup();\n        this.attachEventHandlers();\n        this.update();\n    };\n\n    slider.prototype.setup = function(argument) {\n        this.$slides = this.$element.find(this.options.item);\n        this.count = this.$slides.length;\n        this.index = 0;\n\n        this.$next = $(this.options.next);\n        this.$prev = $(this.options.prev);\n\n        this.$canvas = $(document.createElement('div'));\n        this.$canvas.addClass('slider__canvas').appendTo(this.$element);\n        this.$slides.appendTo(this.$canvas);\n\n        this.$dots = $(this.options.dots);\n        this.$dots.length && this.createDots();\n    };\n\n    slider.prototype.createDots = function() {\n        var dots = [];\n        for (var i = 0; i < this.count; i += 1) {\n            dots[i] = '<span data-index=\"' + i + '\" class=\"' + this.options.dotClass + '\"><\/span>';\n        }\n        this.$dots.append(dots);\n    }\n\n    slider.prototype.attachEventHandlers = function() {\n        this.$element.on('prev.slider', this.prev.bind(this));\n        this.$document.on('click', this.options.prev, (function(e) {\n            this.$element.trigger('prev.slider');\n        }).bind(this));\n\n        this.$element.on('next.slider', this.next.bind(this));\n        this.$document.on('click', this.options.next, (function(e) {\n            this.$element.trigger('next.slider');\n        }).bind(this));\n\n        this.$element.on('update.slider', this.update.bind(this));\n        this.$window.on('resize load', (function(e) {\n            this.$element.trigger('update.slider');\n        }).bind(this));\n\n        this.$element.on('jump.slider', this.jump.bind(this));\n        this.$document.on('click', ('.' + this.options.dotClass), (function(e) {\n            var index = parseInt($(e.target).attr('data-index'));\n            this.$element.trigger('jump.slider', index);\n        }).bind(this));\n\n        this.$element.on('autoplay.slider', this.autoplay.bind(this));\n        this.$element.on('autoplayOn.slider', this.autoplayOn.bind(this));\n        this.$element.on('autoplayOff.slider', this.autoplayOff.bind(this));\n        this.$element.bind('prev.slider next.slider jump.slider', this.autoplay.bind(this));\n        this.options.autoplay && this.$element.trigger('autoplayOn.slider');\n    };\n\n    slider.prototype.next = function(e) {\n        this.index = (this.index + 1) % this.count;\n        this.slide();\n    };\n\n    slider.prototype.prev = function(e) {\n        this.index = Math.abs(this.index - 1 + this.count) % this.count;\n        this.slide();\n    };\n\n    slider.prototype.jump = function(e, index) {\n        this.index = index % this.count;\n        this.slide();\n    }\n\n    slider.prototype.autoplayOn = function(argument) {\n        this.options.autoplay = true;\n        this.$element.trigger('autoplay.slider');\n    };\n\n    slider.prototype.autoplayOff = function() {\n        this.autoplayClear();\n        this.options.autoplay = false;\n    }\n\n    slider.prototype.autoplay = function(argument) {\n        this.autoplayClear();\n        if (this.options.autoplay) {\n            this.autoplayId = setTimeout((function() {\n                this.$element.trigger('next.slider');\n                this.$element.trigger('autoplay.slider');\n            }).bind(this), this.options.autoplayTime);\n        }\n    };\n\n    slider.prototype.autoplayClear = function() {\n        this.autoplayId && clearTimeout(this.autoplayId);\n    }\n\n    slider.prototype.slide = function(index) {\n        undefined == index && (index = this.index);\n        var position = index * this.width * -1;\n        this.$canvas.css({\n            'transform': 'translate3d(' + position + 'px, 0, 0)',\n        });\n        this.updateCssClass();\n    };\n\n    slider.prototype.update = function() {\n        this.width = this.$element.width();\n        this.$canvas.width(this.width * this.count);\n        this.$slides.width(this.width);\n        this.slide();\n    };\n\n    slider.prototype.updateCssClass = function() {\n        this.$slides\n            .removeClass('active')\n            .eq(this.index)\n            .addClass('active');\n\n        this.$dots\n            .find('.' + this.options.dotClass)\n            .removeClass('active')\n            .eq(this.index)\n            .addClass('active');\n    }\n\n    $.fn[pluginName] = function(options) {\n        return this.each(function() {\n            !$.data(this, pluginName) && $.data(this, pluginName, new slider(this, options));\n        });\n    };\n\n\n$('#slider1').slider({\n    prev: '#prev',\n    next: '#next',\n    dots: '#dots',\n    autoplay: true,\n});\n$('#slider2').slider({\n    prev: '#prev',\n    next: '#next',\n    dots: '#dots',\n    autoplay: true,\n});\n\n});\n<\/script>\n<h2>Where Are We Going?<\/h2>\n<p>Websites aren\u2019t static; the best ones are always changing, always evolving. And the process of updating a site, whether on the design or content side, is never fully complete in the first round. While we made a number of design choices, we chose to defer some decisions around our information architecture and updates to major content buckets. These two items as well as additional design upgrades are part of our next set of updates and we\u2019re excited to share those with you early next year..<\/p>\n<p>Meantime, what do you think? If you have additional thoughts on what you\u2019d like to see from our website, please reach out and <a href=\"mailto:info@cloudinary.com\">drop us a line<\/a>. We look forward to hearing from you.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21831,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The New Cloudinary Flexible and Dynamic Website Design<\/title>\n<meta name=\"description\" content=\"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The New Cloudinary Website Design\" \/>\n<meta property=\"og:description\" content=\"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-19T18:54:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-06T19:37:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"718\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"The New Cloudinary Website Design\",\"datePublished\":\"2018-12-19T18:54:44+00:00\",\"dateModified\":\"2024-06-06T19:37:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA\",\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\",\"url\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\",\"name\":\"The New Cloudinary Flexible and Dynamic Website Design\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA\",\"datePublished\":\"2018-12-19T18:54:44+00:00\",\"dateModified\":\"2024-06-06T19:37:23+00:00\",\"description\":\"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA\",\"width\":1540,\"height\":718},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The New Cloudinary Website Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The New Cloudinary Flexible and Dynamic Website Design","description":"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.","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:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design","og_locale":"en_US","og_type":"article","og_title":"The New Cloudinary Website Design","og_description":"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.","og_url":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design","og_site_name":"Cloudinary Blog","article_published_time":"2018-12-19T18:54:44+00:00","article_modified_time":"2024-06-06T19:37:23+00:00","og_image":[{"width":1540,"height":718,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design"},"author":{"name":"","@id":""},"headline":"The New Cloudinary Website Design","datePublished":"2018-12-19T18:54:44+00:00","dateModified":"2024-06-06T19:37:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA","inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design","url":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design","name":"The New Cloudinary Flexible and Dynamic Website Design","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA","datePublished":"2018-12-19T18:54:44+00:00","dateModified":"2024-06-06T19:37:23+00:00","description":"This post highlights some of the thinking behind the new dynamic and flexible website design and how it reflects the Cloudinary brand and solutions.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA","width":1540,"height":718},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/the_new_cloudinary_website_design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The New Cloudinary Website Design"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721554\/Web_Assets\/blog\/homepage-image-blog\/homepage-image-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21830"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21830\/revisions"}],"predecessor-version":[{"id":34467,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21830\/revisions\/34467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21831"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}