{"id":3203,"date":"2015-05-04T09:00:05","date_gmt":"2015-05-04T13:00:05","guid":{"rendered":"http:\/\/blog.funio.com\/en\/?p=3203"},"modified":"2015-05-04T09:02:53","modified_gmt":"2015-05-04T13:02:53","slug":"funio-com-gets-a-makeover-and-redefines-its-image","status":"publish","type":"post","link":"http:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/","title":{"rendered":"Funio.com Gets a Makeover and Redefines Its Image"},"content":{"rendered":"<p class=\"p1\">What better way to redefine one&#8217;s image than launching a brand new website. With the <a href=\"http:\/\/blog.funio.com\/en\/2015\/04\/the-funio-vps-is-finally-available\/\" target=\"_blank\">recent launch<\/a> of our new <a href=\"https:\/\/funio.com\/web-hosting\/vps\/\" target=\"_blank\">VPS product<\/a> line, we wanted to look like the serious (yet fun) company that we are. <a href=\"http:\/\/Funio.com\" target=\"_blank\">Funio.com<\/a> is barely recognizable!<\/p>\n<p class=\"p1\">We are gradually standardizing all our interfaces to this new look. Soon, it\u2019ll be the turn of our Customer Hub, our newsletter, our blog and our welcome emails. Our website is now more user-friendly, clearer and quite frankly much nicer to look at.<\/p>\n<p class=\"p1\"><a href=\"https:\/\/funio.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg\" alt=\"Funio Page d'accueil\" width=\"600\" height=\"442\" \/><\/a><\/p>\n<p class=\"p1\">If you want to compare with the old website, <a href=\"https:\/\/web.archive.org\/web\/20150412213840\/http:\/\/www.funio.com\/\" target=\"_blank\">click here<\/a>.<\/p>\n<h2 class=\"p1\">Behind the Design<\/h2>\n<p><!--more--><\/p>\n<p class=\"p1\">We can contemplate the new <a href=\"http:\/\/funio.com\" target=\"_blank\">funio.com<\/a> website all day, appreciate its graphical esthetics and ergonomy, but what lies behind the site is just as important, if not more. When we determined our new website needs, we already knew that an attractive design that corresponded to our identity was important. Then, we identified 3 priorities:<\/p>\n<ol>\n<li class=\"p1\">Loading and navigation speed<\/li>\n<li class=\"p1\">Mobile access<\/li>\n<li class=\"p1\">Cross-platform<\/li>\n<\/ol>\n<h3 class=\"p1\">Making a Fast Website<\/h3>\n<p class=\"p1\">Since we already use high-performance servers, we had to concentrate on website components to optimize loading speeds. The first important decision was made: create a static website. What\u2019s the difference between static and dynamic websites?<\/p>\n<ul>\n<li class=\"p1\"><b>Dynamic<\/b>: Your web browser asks the server for the website; the server interprets the request based on several parameters (for example, if the user is connected), then returns content adapted to these conditions. PHP websites are dynamic.<\/li>\n<li class=\"p1\"><b>Static<\/b>: Your web browser asks the server for the website; the server returns the content immediately, not considering any parameters. Therefore, the server always returns the same content, regardless of the user. Since there is no intermediary, the website content is sent back faster to the user.<\/li>\n<\/ul>\n<p class=\"p1\">After making this wise decision, we needed to find a platform that would allow us to dynamically manage our static content. We opted for <a href=\"https:\/\/middlemanapp.com\/\" target=\"_blank\">Middleman<\/a>, an application that allows you to create a static website, but that also uses all the shortcuts and tools of modern web development.<\/p>\n<p class=\"p1\">When optimizing the website, we decided to use a <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\">font<\/a> to replace the icons located everywhere on the website. This allowed us to reduce the number of elements loaded on the web page. For example, these icons on our VPS page are a font.<\/p>\n<p class=\"p1\"><a href=\"https:\/\/funio.com\/web-hosting\/vps\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/media.funio.com\/images\/kb\/blog\/VPSspecsEN.jpg\" alt=\"Ic\u00f4nes VPS Funio\" width=\"600\" height=\"151\" \/><\/a><\/p>\n<p class=\"p1\">We are planning on making several additional optimizations very soon, including the use of <a href=\"http:\/\/www.w3schools.com\/css\/css_image_sprites.asp\" target=\"_blank\">sprites<\/a> and modifying image sizes based on the browser\u2019s size when loading a web page.<\/p>\n<h3 class=\"p1\">Cross-platform &amp; Mobile<\/h3>\n<p class=\"p1\">Nowadays, it\u2019s primordial to have a website that can be easily viewed on mobile devices. We opted for a responsive design, the most <a href=\"http:\/\/blog.funio.com\/en\/2015\/03\/improved-web-ranking-for-mobile-friendly-websites\/\">recommended method by web professionals<\/a>.<\/p>\n<p class=\"p1\">A responsive website uses a technique that requires only one base code for all platforms (web, mobile, tablet). The content on the page adapts to different screen widths through pre-defined breakpoints. To help us build this type of site, we used powerful libraries that are already optimized for multiple platforms, including <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\"><span class=\"s1\">Bootstrap<\/span><\/a><span class=\"s1\"> and <a href=\"http:\/\/sass-lang.com\/\" target=\"_blank\"><span class=\"s2\">Sass<\/span><\/a> (CSS).<\/span><\/p>\n<p class=\"p1\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/media.funio.com\/images\/kb\/blog\/website-99prctMobile.jpg\" alt=\"99% Mobile\" width=\"600\" height=\"445\" \/><\/a><\/p>\n<p class=\"p4\"><span class=\"s2\">We still have a few optimizations to make before our site is 100% mobile-friendly on all devices. Nonetheless, as I am writing these lines, our website responds very well on all devices.<\/span><\/p>\n<h2 class=\"p4\"><span class=\"s2\">Comments<\/span><\/h2>\n<p class=\"p4\"><span class=\"s2\">Here are several of the comments made by the Funio staff when they saw the final version of the website.<\/span><\/p>\n<ul class=\"ul1\">\n<li class=\"li4\"><span class=\"s2\">Woah! Awesome!<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">Really good work, guys. Really.<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">That\u2019s our website?<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">Are you sure the CTA located there will work well?<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">Wow! I really have the impression that our website truly represents who we are now.<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">We\u2019ve been playing in the major leagues for quite some time now. With a site like that, we are now showing it too.<\/span><\/li>\n<li class=\"li4\"><span class=\"s2\">Fantastic! What\u2019s next?<\/span><\/li>\n<\/ul>\n<p class=\"p4\"><span class=\"s2\">What are your comments? If you feel like sharing, contact us by using the <a href=\"https:\/\/hub.funio.com\/assistance\" target=\"_blank\">assistance<\/a> section of your Customer Hub, or talk to our representatives via LiveChat!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What better way to redefine one&#8217;s image than launching a brand new website. With the recent launch of our new VPS product line, we wanted to look like the serious (yet fun) company that we are. Funio.com is barely recognizable! We are gradually standardizing all our interfaces to this new look. Soon, it\u2019ll be the [&#8230;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,189],"tags":[204,6,205,202,203],"class_list":["post-3203","post","type-post","status-publish","format-standard","hentry","category-funio","category-website","tag-bootstrap","tag-default","tag-httpsmedia-funio-comimageskbblogwebsite2015rnd-png","tag-middleman","tag-sass"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Funio.com Gets a Makeover and Redefines Its Image - Funio Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Funio.com Gets a Makeover and Redefines Its Image - Funio Blog\" \/>\n<meta property=\"og:description\" content=\"What better way to redefine one&#8217;s image than launching a brand new website. With the recent launch of our new VPS product line, we wanted to look like the serious (yet fun) company that we are. Funio.com is barely recognizable! We are gradually standardizing all our interfaces to this new look. Soon, it\u2019ll be the [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Funio Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FunioHosting\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-04T13:00:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-04T13:02:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@funiohosting\" \/>\n<meta name=\"twitter:site\" content=\"@funiohosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Funio.com Gets a Makeover and Redefines Its Image\",\"datePublished\":\"2015-05-04T13:00:05+00:00\",\"dateModified\":\"2015-05-04T13:02:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/\"},\"wordCount\":646,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/media.funio.com\\\/images\\\/kb\\\/blog\\\/homepage2015EN.jpg\",\"keywords\":[\"bootstrap\",\"Default\",\"https:\\\/\\\/media.funio.com\\\/images\\\/kb\\\/blog\\\/website2015rnd.png\",\"middleman\",\"sass\"],\"articleSection\":[\"Funio\",\"website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/\",\"url\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/\",\"name\":\"Funio.com Gets a Makeover and Redefines Its Image - Funio Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/media.funio.com\\\/images\\\/kb\\\/blog\\\/homepage2015EN.jpg\",\"datePublished\":\"2015-05-04T13:00:05+00:00\",\"dateModified\":\"2015-05-04T13:02:53+00:00\",\"author\":{\"@id\":\"\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#primaryimage\",\"url\":\"https:\\\/\\\/media.funio.com\\\/images\\\/kb\\\/blog\\\/homepage2015EN.jpg\",\"contentUrl\":\"https:\\\/\\\/media.funio.com\\\/images\\\/kb\\\/blog\\\/homepage2015EN.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/2015\\\/05\\\/funio-com-gets-a-makeover-and-redefines-its-image\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Funio.com Gets a Makeover and Redefines Its Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/\",\"name\":\"Funio Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.funio.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"http:\\\/\\\/blog.funio.com\\\/en\\\/author\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Funio.com Gets a Makeover and Redefines Its Image - Funio Blog","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:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/","og_locale":"en_US","og_type":"article","og_title":"Funio.com Gets a Makeover and Redefines Its Image - Funio Blog","og_description":"What better way to redefine one&#8217;s image than launching a brand new website. With the recent launch of our new VPS product line, we wanted to look like the serious (yet fun) company that we are. Funio.com is barely recognizable! We are gradually standardizing all our interfaces to this new look. Soon, it\u2019ll be the [...]","og_url":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/","og_site_name":"Funio Blog","article_publisher":"https:\/\/www.facebook.com\/FunioHosting","article_published_time":"2015-05-04T13:00:05+00:00","article_modified_time":"2015-05-04T13:02:53+00:00","og_image":[{"url":"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_creator":"@funiohosting","twitter_site":"@funiohosting","twitter_misc":{"Written by":"","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#article","isPartOf":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/"},"author":{"name":"","@id":""},"headline":"Funio.com Gets a Makeover and Redefines Its Image","datePublished":"2015-05-04T13:00:05+00:00","dateModified":"2015-05-04T13:02:53+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/"},"wordCount":646,"commentCount":0,"image":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#primaryimage"},"thumbnailUrl":"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg","keywords":["bootstrap","Default","https:\/\/media.funio.com\/images\/kb\/blog\/website2015rnd.png","middleman","sass"],"articleSection":["Funio","website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/","url":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/","name":"Funio.com Gets a Makeover and Redefines Its Image - Funio Blog","isPartOf":{"@id":"https:\/\/blog.funio.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#primaryimage"},"image":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#primaryimage"},"thumbnailUrl":"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg","datePublished":"2015-05-04T13:00:05+00:00","dateModified":"2015-05-04T13:02:53+00:00","author":{"@id":""},"breadcrumb":{"@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#primaryimage","url":"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg","contentUrl":"https:\/\/media.funio.com\/images\/kb\/blog\/homepage2015EN.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.funio.com\/en\/2015\/05\/funio-com-gets-a-makeover-and-redefines-its-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.funio.com\/en\/"},{"@type":"ListItem","position":2,"name":"Funio.com Gets a Makeover and Redefines Its Image"}]},{"@type":"WebSite","@id":"https:\/\/blog.funio.com\/en\/#website","url":"https:\/\/blog.funio.com\/en\/","name":"Funio Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.funio.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"http:\/\/blog.funio.com\/en\/author\/"}]}},"_links":{"self":[{"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/posts\/3203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/comments?post=3203"}],"version-history":[{"count":6,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/posts\/3203\/revisions"}],"predecessor-version":[{"id":3220,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/posts\/3203\/revisions\/3220"}],"wp:attachment":[{"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/media?parent=3203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/categories?post=3203"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.funio.com\/en\/wp-json\/wp\/v2\/tags?post=3203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}