{"id":21105,"date":"2024-06-12T10:51:54","date_gmt":"2024-06-12T10:51:54","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=21105"},"modified":"2024-06-12T10:55:59","modified_gmt":"2024-06-12T10:55:59","slug":"redeveloping-soljets-outdated-website-wordpress","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/redeveloping-soljets-outdated-website-wordpress.html","title":{"rendered":"Redeveloping SOLJET&#8217;s Outdated Website on WordPress"},"content":{"rendered":"\n<p>We know how crucial time is for digital agencies looking to grow and boost their income. The faster they complete client orders, the more trust they earn and the more requests they receive. That&#8217;s why it&#8217;s vital to choose a dependable web development service provider that can bring your agency&#8217;s creative vision to life seamlessly and quickly.<\/p>\n\n\n\n<p>In this post, we want to share a story about a WordPress development project we did for a British design agency. It showcases our ability to transform ideas into well-performing and visually attractive websites right from the outset, without time-wasting back-and-forth.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Client&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/docsz\/AD_4nXcOlMzOlYB9SVZBAAIbKmwS4NYkAoiVnb2l3sSA5wkA3xthn-iW-U9GJClyixM6RhnRKTIZxmO8QibIu58_6ztyHNI4Wa2dp3T3YnMv1cAQPlMOPnithmhD4HTTPvknynmz71t_iD3ZtrabMJywvCSlwfvf?key=QSkShXLRt9QELAPsLvnJ5g\" alt=\"\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.hiya.co\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Hiya <\/a>is a UK-based design agency specializing in creating visually appealing websites and user-friendly apps. They cater to a diverse range of clients, spanning from small startups to large enterprises, where they excel at translating concepts into elegant and intuitive digital products.\u00a0<\/p>\n\n\n\n<p>The agency&#8217;s approach emphasizes the seamless integration of cutting-edge aesthetics with effortless user experiences, ensuring that functionality never takes a back seat to design trends.<\/p>\n\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Top-Speed WordPressrnDevelopment <\/h2>                <p>Immediate start. ASAP projects. rnBeat any deadline! <\/p>\n                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/wordpress-development-services.html\" target=\"_blank\">GET STARTED<\/a>\r\n                            <\/div>\r\n                            <div class=\"image-holder\">\r\n                <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/21113119\/illustration.png\" alt=\"\" \/>\r\n            <\/div>\r\n            <\/section>    \r\n\r\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>Hiya turned to us for assistance with the redevelopment of <a href=\"https:\/\/soljet.co.uk\/\" target=\"_blank\" rel=\"noopener\" title=\"\">SOLJET Construction\u2019s<\/a> website. It was way behind the modern design trends and needed an urgent facelift.\u00a0<\/p>\n\n\n\n<p>Making the new designs was Hiya\u2019s responsibility, while our task was to convert those designs into HTML, CSS, and JavaScript code and integrate it into WordPress. All in all, we needed to develop seven pages:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home<\/li>\n\n\n\n<li>About&nbsp;<\/li>\n\n\n\n<li>Services<\/li>\n\n\n\n<li>Case Studies&nbsp;<\/li>\n\n\n\n<li>Case Studies Single<\/li>\n\n\n\n<li>Careers&nbsp;<\/li>\n\n\n\n<li>Contact<\/li>\n<\/ul>\n\n\n\n<p>The client also wanted us to add interactive JavaScript effects to some of the pages.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<p>After all the formalities were sorted out, we got down to converting the designs into pixel-perfect, clean, well-validated HTML\/CSS\/JavaScript code that we then integrated into WordPress in exact compliance with SOLJET\u2019s specifications and expectations.&nbsp;<\/p>\n\n\n\n<p>Here are the most notable things we did.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Homepage<\/h3>\n\n\n\n<p>Apart from integrating a background video into the hero section to make the site more engaging, we also created the Services carousel with three cards representing SOLJET\u2019s main offerings. Clicking on each takes you to the respective section on the Services page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12101106\/carousel.gif\" alt=\"\" class=\"wp-image-21109\"\/><figcaption class=\"wp-element-caption\"><em>Services carousel on the Homepage<\/em><\/figcaption><\/figure>\n\n\n\n<p>Notice the sliding up\/down effect when hovering over a card, which we created applying our JavaScript expertise.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Services&nbsp;<\/h3>\n\n\n\n<p>The Services page may seem straightforward at first glance, but it has a special \u201cspace-saving&#8221; feature that we made with JavaScript and CSS. These are three tabs: Design, Construction, and Aftercare.&nbsp;<\/p>\n\n\n\n<p>Clicking on one of these tabs displays information about the corresponding service without having to reload the entire page or open one in a new tab. This feature is an excellent way to improve the user experience, simplifying content presentation, which may encourage visitors to spend more time on the website and potentially bring SOLJET more leads and conversions.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12101242\/tabs.gif\" alt=\"\" class=\"wp-image-21110\"\/><figcaption class=\"wp-element-caption\"><em>&nbsp;Tabs on the Services page<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Case Studies&nbsp;<\/h3>\n\n\n\n<p>The most distinctive functionality we developed for this page using JavaScript is the Filter. It allows visitors to easily navigate to the category they need, such as Commercial or Industrial.<\/p>\n\n\n\n<p>Each category tab in the Filter menu also displays the total number of case studies in that category at the moment.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12101505\/case-study.gif\" alt=\"\" class=\"wp-image-21111\"\/><figcaption class=\"wp-element-caption\"><em>The Filter on the Case Studies page<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Site-Wide Features&nbsp;<\/h3>\n\n\n\n<p>Besides page-specific functionality, we created several features that work across the entire website. Let\u2019s take a look at those.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Burger Menu<\/h4>\n\n\n\n<p>For small-screened devices, such as smartphones or tablets, we added a burger menu to the website\u2019s top right-hand corner. The menu is accessible from each page, enhancing the user experience for SOLJET\u2019s prospects.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"485\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12101618\/burger-menu.gif\" alt=\"\" class=\"wp-image-21113\"\/><figcaption class=\"wp-element-caption\"><em>Burger menu<\/em><\/figcaption><\/figure>\n\n\n\n<p>Also, notice the fade-in\/fade-out effect when you open and close the burger menu.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Running Line&nbsp;<\/h4>\n\n\n\n<p>Another site-wide feature is a running line that we developed with JavaScript. The line showcases the logos of SOLJET\u2019s key clients and partners in a loop. It runs until a user hovers over one of the logos, which stops it. Hovering away from the logo resumes the motion. Each page has this line above the footer.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"484\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12101757\/running-line-1.gif\" alt=\"\" class=\"wp-image-21115\"\/><figcaption class=\"wp-element-caption\"><em>Running line with the logos of SOLJET\u2019s key clients and partners<\/em><\/figcaption><\/figure>\n\n\n\n<p>In addition to converting the designs into WordPress-powered web pages, we made the site Retina-ready, catering to owners of devices with high-resolution screens, and accessible to visitors with various forms of disabilities, implementing the essential WAI (A) standards.\u00a0<\/p>\n\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Expert rnWordPress rnDevelopers<\/h2>                <p>30+ senior-levelrnweb development professionals. <\/p>\n                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/wordpress-development-services.html\" target=\"_blank\">HIRE BEST TALENT<\/a>\r\n                            <\/div>\r\n                            <div class=\"image-holder\">\r\n                <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/21094737\/illustration-2.png\" alt=\"\" \/>\r\n            <\/div>\r\n            <\/section>    \r\n\r\n\n\n\n<h2 class=\"wp-block-heading\">The Outcome<\/h2>\n\n\n\n<p>It took us 20 business days to convert the client\u2019s designs into a modern, visually attractive, easy-to-navigate, and accessible website in strict adherence to SOLJET\u2019s requirements and well within Hiya\u2019s budget. Thanks to the use of the powerful WordPress platform, updating the site\u2019s content is now straightforward and quick.<\/p>\n\n\n\n<p>Hiya didn\u2019t have many comments when we delivered the work. As with the overwhelming majority of our projects, we managed to bring the client\u2019s vision to life right on attempt one. <\/p>\n\n\n\n<p>Here\u2019s what the client said when he saw the new website for the first time:<\/p>\n\n\n\n\n    <blockquote>\n        <p>Just going through it now. Initial thoughts &#8211; amazing!<\/p>\n        <footer class=\"author-block\">\n                            <div class=\"photo-holder\">\n                    <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12102154\/Matt-Baker-150x150.png\" width=\"48\" height=\"48\" alt=\"Matt Baker\"\n                    srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12102154\/Matt-Baker-300x300.png 2x, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12102154\/Matt-Baker.png 3x\" \/>\n                <\/div>\n                        <div class=\"text-holder\">\n                                    <span class=\"h6\">Matt Baker<\/span>\n                                <p>Director at hiya.co <\/p>\n            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<p>Looking for a reliable WordPress development company that delivers value? GetDevDone is here for you. We create visually stunning, fast, and feature-rich WordPress websites to give you a competitive edge. Our services cover a wide range of WordPress development options, including:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom theme development<\/li>\n\n\n\n<li><a href=\"https:\/\/getdevdone.com\/blog\/how-we-customized-artday-wordpress-theme-for-the-qtex-brand.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Theme customization<\/a><\/li>\n\n\n\n<li>Builder-based theme development (Elementor, Divi, WPBakery, etc.)\u00a0<\/li>\n\n\n\n<li><a href=\"https:\/\/getdevdone.com\/blog\/how-we-redeveloped-website-for-agency.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Design to WordPress conversion<\/a><\/li>\n\n\n\n<li>WooCommerce development&nbsp;<\/li>\n\n\n\n<li>Custom plugin development<\/li>\n\n\n\n<li>Speed &amp; performance optimization<\/li>\n\n\n\n<li><a href=\"https:\/\/getdevdone.com\/blog\/guide-to-wordpress-api.html\" target=\"_blank\" rel=\"noopener\" title=\"\">API Implementation<\/a><\/li>\n\n\n\n<li>Assistance with migration to WordPress from another platform such as Webflow, Hubspot, Wix, and others&nbsp;<\/li>\n\n\n\n<li>Maintenance &amp; support<\/li>\n<\/ul>\n\n\n\n<p>Need something else? <a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Reach out<\/a> to discuss your project details. We\u2019ll be delighted to help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how we helped the Hiya agency redevelop SOLJET Construction&#039;s website into a modern, interactive, and accessible platform using seamless HTML, CSS, JavaScript, and WordPress integration.<\/p>\n","protected":false},"author":12,"featured_media":21122,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[743,752],"tags":[836,774,780,825,820,814],"class_list":["post-21105","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-wordpress-development","tag-agencies","tag-cms-development","tag-design-to-code","tag-html-css","tag-javascript","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Yuliya Mikitenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/yuliya-mikitenko"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/case-study\" class=\"advgb-post-tax-term\">Case study<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">WordPress development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Agencies<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Design-to-code<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">HTML &amp; CSS<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">JavaScript<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Agencies<\/span>","<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">Design-to-code<\/span>","<span class=\"advgb-post-tax-term\">HTML &amp; CSS<\/span>","<span class=\"advgb-post-tax-term\">JavaScript<\/span>","<span class=\"advgb-post-tax-term\">WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 2 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on June 12, 2024","modified":"Updated on June 12, 2024"},"absolute_dates_time":{"created":"Posted on June 12, 2024 10:51 am","modified":"Updated on June 12, 2024 10:55 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview-723x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview-800x630.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview-770x510.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/06\/12103213\/Intro-preview.png"},"featured_post_color":"#f3a345","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/7401c84439e6a6c4aa6a8ff19e0d4605c2906fb2d668abb29f831e4a5affc943?s=96&d=mm&r=g","author_position":"Account Manager","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"craft-cms-case-study-hallingcast-website","name":"Leveraging Craft CMS to Create Hallingcast's Corporate Website"},"next_post":{"slug":"elementor-affordable-custom-theme-alternative","name":"Elementor: A Half-Price Alternative to Custom Theme Development Without Sacrificing Quality"},"related_posts":["building-wordpress-website-aus-flying","how-to-build-modular-wordpress-websites-with-acf-blocks-json-registration-guide","the-satice-antique-jewelry"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/21105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=21105"}],"version-history":[{"count":24,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/21105\/revisions"}],"predecessor-version":[{"id":24741,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/21105\/revisions\/24741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/21122"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=21105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=21105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=21105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}