{"id":368,"date":"2020-01-21T22:32:00","date_gmt":"2020-01-21T22:32:00","guid":{"rendered":"http:\/\/jamesdowen.com\/blog\/?p=368"},"modified":"2020-01-22T13:39:03","modified_gmt":"2020-01-22T13:39:03","slug":"designing-developing-my-new-website-for-2020","status":"publish","type":"post","link":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/","title":{"rendered":"Designing & developing my new website for 2020"},"content":{"rendered":"

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

It’s been at least a year since I even touched the design of my site<\/a>, and with how fast the web moves forward in terms of both design and development – I thought the start of the year would be a good time to address the situation (go check it out at https:\/\/jamesdowen.com\/<\/a>).<\/p>\n

My site currently ranks well for specific keywords, so the main challenge was maintaining those crucial rankings. One of the most important SEO ranking factors today is pagespeed, and with my old site scoring 99\/100, this was pretty hard to match, let alone beat. This alone involved taking great care during the programming stage, and ensuring every asset was appropriately compressed and served, but not to the point where the assets lose too much quality and begin to look blurry.<\/p>\n

The other is content. My site has always being a one page site since its inception, so I’ve kept that same structure and same content throughout (apart from changing a few words). This means the design refresh uses pretty much the exact same content as before.<\/p>\n

\"\"<\/a>

Old version of jamesdowen.com<\/p><\/div>\n

Another key concept was to include animated elements, fitting in with a modern web trend of creating engaging content. On desktop, we feature an animated particle blob effect that the user can control with their mouse. This is a quirky feature to help boost interaction. This isn’t present on tablet or mobile devices though due to performance issues.<\/p>\n

\"\"<\/a>

Animated particle blob<\/p><\/div>\n

As well as that, we have certain user controlled elements that are binded to scrolling events. The example below shows the \/ (forward slash) rotating with the speed that the user scrolls.<\/p>\n

\"\"<\/a>

Rotating element on scroll<\/p><\/div>\n

Further down, we have the services bubble, which essentially lays out my skillset surrounding a picture of desk\/office space. Rather than it be displayed as a static image, I wanted to bring some life to this section. The background features a forever looping bubbling effect, creates with pure CSS, and each skill floating gently with a slight overlay.<\/p>\n

\"\"<\/a>

Services bubble<\/p><\/div>\n

Last, but not least, we have the menu and the start project\/contact section. The particle explosion that takes place when opening and closing the start project area is something cool that I’m happy we adopted and managed to fit in.<\/p>\n

\"\"<\/a>

Menu and contact sections<\/p><\/div>\n

If you’re looking for a new website, then head to my very own new website at jamesdowen.com<\/a> and I’ll be happy to help you. I’m a freelance web designer<\/a> and developer, and I’m available to work on websites, web-apps and online systems.<\/p>\n","protected":false},"excerpt":{"rendered":"

It’s been at least a year since I even touched the design of my site, and with how fast the web moves forward in terms of both design and development – I thought the start of the year would be a good time to address the situation (go check it out at https:\/\/jamesdowen.com\/). My site […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[129,128,9],"yoast_head":"\nDesigning & developing my new website for 2020 | James Dowen<\/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:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing & developing my new website for 2020 | James Dowen\" \/>\n<meta property=\"og:description\" content=\"It’s been at least a year since I even touched the design of my site, and with how fast the web moves forward in terms of both design and development – I thought the start of the year would be a good time to address the situation (go check it out at https:\/\/jamesdowen.com\/). My site […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"James Dowen\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-21T22:32:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-22T13:39:03+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png\" \/>\n<meta name=\"author\" content=\"James\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/\",\"url\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/\",\"name\":\"Designing & developing my new website for 2020 | James Dowen\",\"isPartOf\":{\"@id\":\"https:\/\/jamesdowen.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png\",\"datePublished\":\"2020-01-21T22:32:00+00:00\",\"dateModified\":\"2020-01-22T13:39:03+00:00\",\"author\":{\"@id\":\"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/51179280d7d76166490e1c27be360931\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage\",\"url\":\"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png\",\"contentUrl\":\"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamesdowen.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing & developing my new website for 2020\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/#website\",\"url\":\"https:\/\/jamesdowen.com\/blog\/\",\"name\":\"James Dowen\",\"description\":\"A blog about web development.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamesdowen.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/51179280d7d76166490e1c27be360931\",\"name\":\"James\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e4d7008d9ebb77f8de729f655e30d11f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e4d7008d9ebb77f8de729f655e30d11f?s=96&d=mm&r=g\",\"caption\":\"James\"},\"sameAs\":[\"http:\/\/jamesdowen.com\"],\"url\":\"https:\/\/jamesdowen.com\/blog\/author\/jdowen\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Designing & developing my new website for 2020 | James Dowen","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:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/","og_locale":"en_US","og_type":"article","og_title":"Designing & developing my new website for 2020 | James Dowen","og_description":"It’s been at least a year since I even touched the design of my site, and with how fast the web moves forward in terms of both design and development – I thought the start of the year would be a good time to address the situation (go check it out at https:\/\/jamesdowen.com\/). My site […]","og_url":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/","og_site_name":"James Dowen","article_published_time":"2020-01-21T22:32:00+00:00","article_modified_time":"2020-01-22T13:39:03+00:00","og_image":[{"url":"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png"}],"author":"James","twitter_misc":{"Written by":"James","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/","url":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/","name":"Designing & developing my new website for 2020 | James Dowen","isPartOf":{"@id":"https:\/\/jamesdowen.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage"},"image":{"@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage"},"thumbnailUrl":"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png","datePublished":"2020-01-21T22:32:00+00:00","dateModified":"2020-01-22T13:39:03+00:00","author":{"@id":"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/51179280d7d76166490e1c27be360931"},"breadcrumb":{"@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#primaryimage","url":"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png","contentUrl":"http:\/\/jamesdowen.com\/blog\/wp-content\/uploads\/2020\/01\/currentwebsite2020-1024x733.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jamesdowen.com\/blog\/designing-developing-my-new-website-for-2020\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamesdowen.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designing & developing my new website for 2020"}]},{"@type":"WebSite","@id":"https:\/\/jamesdowen.com\/blog\/#website","url":"https:\/\/jamesdowen.com\/blog\/","name":"James Dowen","description":"A blog about web development.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamesdowen.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/51179280d7d76166490e1c27be360931","name":"James","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesdowen.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e4d7008d9ebb77f8de729f655e30d11f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e4d7008d9ebb77f8de729f655e30d11f?s=96&d=mm&r=g","caption":"James"},"sameAs":["http:\/\/jamesdowen.com"],"url":"https:\/\/jamesdowen.com\/blog\/author\/jdowen\/"}]}},"_links":{"self":[{"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/posts\/368"}],"collection":[{"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":3,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/posts\/368\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/categories?post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesdowen.com\/blog\/wp-json\/wp\/v2\/tags?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}