<?xml version="1.0" encoding="UTF-8" ?><!-- generator=Zoho Sites --><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><atom:link href="https://www.digital-scientists.co.uk/blogs/author/dominic/feed" rel="self" type="application/rss+xml"/><title>Digital Scientists - Blog by Dominic</title><description>Digital Scientists - Blog by Dominic</description><link>https://www.digital-scientists.co.uk/blogs/author/dominic</link><lastBuildDate>Mon, 18 May 2026 22:41:16 +0200</lastBuildDate><generator>http://zoho.com/sites/</generator><item><title><![CDATA[Elements Of Website Design: Iconography]]></title><link>https://www.digital-scientists.co.uk/blogs/post/elements-of-website-design-iconography</link><description><![CDATA[<img align="left" hspace="5" src="https://www.digital-scientists.co.uk/images/Blog Posts/iconography-socials.png"/>How can custom iconography help your business succeed online? In this case study, our Developer, Dom, examines the benefits of stylish iconography.]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_9qBV854cRsmbsHQ8OzvccQ" data-element-type="section" class="zpsection "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_gdqkdCXhSRCeCInsyubwGA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content- " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_FyHaFzFpT7aI-YUcxv6PqA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- "><style type="text/css"></style><div data-element-id="elm_9jJQmA52X-Jcra6V-G_QUQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;font-size:16px;">Today in the life of a Digital Scientist, our Developer, Dom, explains website iconography: What it is, and the benefits of having icons to both your site and business. With extensive experience in website development and graphic design, our team has mastered the art of crafting icons that improve user experience, simplify navigation, and strengthen brand identity.</span></p></div>
</div><div data-element-id="elm_A1LuewHkTcl_oW6GUgaDag" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_A1LuewHkTcl_oW6GUgaDag"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_A1LuewHkTcl_oW6GUgaDag"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_1DpT9k5xuIV_xLgv49Dqrw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_sK-aQFvdrrZd_Uod2eshoA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_KDPCQDCyDYGlUZArXSmTVA" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">What Is Iconography?</span></h2></div>
<div data-element-id="elm_83hv8CTZiKnhFJxjwdYWZg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_83hv8CTZiKnhFJxjwdYWZg"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">Iconography is the use of visual elements such as icons and symbols to represent services, features, or actions in a clear, concise, and recognisable way. Well-designed iconography enhances user experience by making information easy to interpret at a glance. When implemented correctly, icons provide a visual language that helps users quickly understand a website’s content and functionality. Additionally, they reinforce brand identity, support messaging, and contribute to making a site more memorable and unique.&nbsp;</span></p></div></div>
</div></div><div data-element-id="elm_6rZ66anSSTKytgNyMmcToQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_DWKpHfyVZu-1B54DR7O6hg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_DWKpHfyVZu-1B54DR7O6hg"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/question-icon-what-is-iconography.png" size="custom" alt="A gold gradient flashing question mark."/></picture></span></figure></div>
</div><div data-element-id="elm_qjuX52TjqTyhdjrqDAZPFA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;font-size:14px;">This glowing question mark icon represents inquiry and curiosity, showcasing how iconography uses simple, recognisable symbols to convey meaning. Iconography is the art of designing visual elements that communicate ideas quickly and effectively, strengthening brand identity and enhancing user experience.</span></p></div>
</div></div></div><div data-element-id="elm_aukjjPeDAeRhdliQRhCcbw" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">The Benefits Of Icons on a Website</span></h2></div>
<div data-element-id="elm_7qPbTKIj5bXk_VFNtjZM-A" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_7qPbTKIj5bXk_VFNtjZM-A"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><a href="https://www.digital-scientists.co.uk/pixel-perfect/design-elements/iconography" title="Website design icons" rel="">Website design icons</a> offer numerous advantages for websites, improving both usability and engagement.</p></div></div>
</div><div data-element-id="elm_YsJ0R6BhV2nMcBjWWxJe7A" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_NaCA5cm3hkKYS1M75bkG3Q" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_29WgcL8F0ZRyssjLbNfUtg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_29WgcL8F0ZRyssjLbNfUtg"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_29WgcL8F0ZRyssjLbNfUtg"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_29WgcL8F0ZRyssjLbNfUtg"] .zpheading:after,[data-element-id="elm_29WgcL8F0ZRyssjLbNfUtg"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Strengthening Brand Identity</span></h3></div>
<div data-element-id="elm_z7UQ5NJ1Oh_EW3-dCRkFBg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_z7UQ5NJ1Oh_EW3-dCRkFBg"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;font-size:16px;">Custom icons reinforce your business’ personality by keeping the visual style consistent. This ensures that the website maintains a cohesive and recognisable identity, making the brand more memorable. Icons help to visually communicate the brand’s essence, creating a distinct and professional look that could resonate with users. With custom icons, you can stand out in a competitive digital landscape, ensuring users associate specific visuals with your brand instantly.</span></p></div>
</div></div><div data-element-id="elm_XvApGKvsmx7UKdbkQ1NflA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_D0yXHIFRS4CjZPi3OK63uA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_D0yXHIFRS4CjZPi3OK63uA"] .zpimage-container figure img { width: 100px !important ; height: 100px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/GWF-Icon-Used-To-Show-Off-Brand-Identity.png" size="custom" alt="An artist's paint pallet and brush icon in a grey and red gradient circle."/></picture></span></figure></div>
</div><div data-element-id="elm_Zm_nptragH-cYWGBtYASKw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_Zm_nptragH-cYWGBtYASKw"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;font-size:14px;">This artist’s palette and brush icon represents creativity and design expertise, strengthening brand identity through visual consistency. The red, grey, and silver colour scheme, along with the circular wave effect, is seamlessly incorporated into the customer’s logo and website, ensuring a cohesive and recognisable brand presence.</span></p></div>
</div></div></div><div data-element-id="elm_t3UHnGv-UlSL0KZK-rgXCg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_Dw8S6MefX6WAK_gPnIbmdg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_qRo8jDd_L76yJk9ygQNhIg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_qRo8jDd_L76yJk9ygQNhIg"] .zpimage-container figure img { width: 494px !important ; height: 140px !important ; } } [data-element-id="elm_qRo8jDd_L76yJk9ygQNhIg"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-original zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/sbp-product-order-image.png" size="original" alt="An icon of a truck with text that reads: 'Product available to order. You can buy this product - we'll ship as soon as we have stock.&quot;. The price above details £61.77 excluding VAT."/></picture></span><figcaption class="zpimage-caption zpimage-caption-align-center"><span class="zpimage-caption-content">An icon from a customer's ecommerce website to highlight a product is on backorder</span></figcaption></figure></div>
</div></div><div data-element-id="elm_5VjEchu11cw-eRNcWaEiBg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_SiNUvc8bh5whdZnXfp1VoQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_SiNUvc8bh5whdZnXfp1VoQ"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_SiNUvc8bh5whdZnXfp1VoQ"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_SiNUvc8bh5whdZnXfp1VoQ"] .zpheading:after,[data-element-id="elm_SiNUvc8bh5whdZnXfp1VoQ"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Improving User Experience and Navigation</span></h3></div>
<div data-element-id="elm_CHkXRx6RXtPGJIgKSXh7AQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_CHkXRx6RXtPGJIgKSXh7AQ"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">Icons reduce page clutter by eliminating the need for long text descriptions. This results in a cleaner and more efficient design layout, particularly for mobile devices where space is limited. Navigation icons serve as signposts, allowing users to find what they need faster and more efficiently. For example, a shopping cart icon immediately signals a checkout function, while a magnifying glass icon prompts a search feature. Well-placed icons contribute to a smoother browsing experience, leading to higher user satisfaction and lower bounce rates.</span></p></div></div>
</div></div></div><div data-element-id="elm_8p65FH_qy65SEcRUKaEf_A" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_EXjuvpLjWXKoqQsl8zcIdw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_obXjsY5Pfforh7zYr8Qu5w" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_obXjsY5Pfforh7zYr8Qu5w"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_obXjsY5Pfforh7zYr8Qu5w"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_obXjsY5Pfforh7zYr8Qu5w"] .zpheading:after,[data-element-id="elm_obXjsY5Pfforh7zYr8Qu5w"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Enhancing Engagement</span></h3></div>
<div data-element-id="elm_KndQ5rE36AlvOGUR6g_uaw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_KndQ5rE36AlvOGUR6g_uaw"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">Humans naturally process images faster than text, making icons an excellent tool for grabbing user attention. Well-designed icons act as visual cues, directing users to important sections of your website, such as call-to-action (CTA) buttons. This can significantly increase click-through rates and conversions. Furthermore, icons create a more dynamic and engaging website experience. Whether through subtle animations or interactive elements, icons can make user interactions more enjoyable, keeping visitors engaged for longer. For example, the icon next to this is used in an automotive website for one of our clients. This icon is normally animated, set to a spinning animation to fit the automotive theme.</span></p></div></div>
</div></div><div data-element-id="elm_DT8A7xblyFtv7BbIlfJrUQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_ypuHONdwpRrAXm8Yuh5nJg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_ypuHONdwpRrAXm8Yuh5nJg"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/website-designs-ideas/custom-anim-wheel-1.png" size="custom"/></picture></span></figure></div>
</div><div data-element-id="elm_5UhPw90uwRnzyqdadjbR-Q" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;font-size:14px;">A wheel icon for an automotive client that is normally animated and spins in place or moves across the page</span></p></div>
</div></div></div><div data-element-id="elm_svvJ8PrzMTLsxeRAAuDVzg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_WDEhX76I_lH08EYrICqfiQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_7_IXTL6gtV6UDOlSDIkIIw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_7_IXTL6gtV6UDOlSDIkIIw"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/image.png" size="custom"/></picture></span></figure></div>
</div><div data-element-id="elm_9CXTCgJJyMjDnMpiJa3i-g" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;font-size:14px;">Magnifying glass icons are a universal icon for searching</span></p></div>
</div></div><div data-element-id="elm_32WfXd6_v2lVgxQPyM3U5A" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_6IH3CE3evRux9TV1o-k0lQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_6IH3CE3evRux9TV1o-k0lQ"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_6IH3CE3evRux9TV1o-k0lQ"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_6IH3CE3evRux9TV1o-k0lQ"] .zpheading:after,[data-element-id="elm_6IH3CE3evRux9TV1o-k0lQ"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="color:inherit;font-size:18px;">Boosting Accessibility</span></h3></div>
<div data-element-id="elm_PIh_d0S2C7z7uEq1Jx3P6g" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_PIh_d0S2C7z7uEq1Jx3P6g"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Icons make websites more inclusive by assisting users with different reading levels, cognitive abilities, or language barriers. Universally recognised symbols ensure that all users, regardless of background, can navigate the site with ease. A well-thought-out iconography system enables users to engage with content without relying solely on text, making information more digestible and accessible. Additionally, icons paired with tooltips or labels provide extra clarity, ensuring that every user understands their function.</span></p></div></div></div></div></div>
</div></div></div><div data-element-id="elm_q2B1iUH3do-IuKxIBkneNg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_K0o3kvfq6oTnW43kTkazQA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_oEMiqLqtOHGMJMr45tKgqw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_oEMiqLqtOHGMJMr45tKgqw"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_oEMiqLqtOHGMJMr45tKgqw"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_oEMiqLqtOHGMJMr45tKgqw"] .zpheading:after,[data-element-id="elm_oEMiqLqtOHGMJMr45tKgqw"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="color:inherit;font-size:18px;">Emphasising Unique Selling Points (USPs)</span></h3></div>
<div data-element-id="elm_rwhAo2iHvu1md3Bns_qd5A" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_rwhAo2iHvu1md3Bns_qd5A"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Icons can effectively communicate a business’s key offerings in a visually appealing manner. They help highlight essential product features, service benefits, and competitive advantages, making it easier for users to understand what sets your company apart. Icons also enhance comparison sections by breaking down features in a structured and visually engaging way, for example the design beside this outlines the standards of service that can be expected supporting users with making informed decisions for an airport transfer business.</span></p></div></div></div></div>
</div></div><div data-element-id="elm_bwwFHk4jhhk6n3OF_owIAw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_jEOcrBliO1DkC4C23dDhqw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_jEOcrBliO1DkC4C23dDhqw"] .zpimage-container figure img { width: 540px !important ; height: 170px !important ; } } [data-element-id="elm_jEOcrBliO1DkC4C23dDhqw"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/all-transfers-usps-image.png" size="custom" alt="Gold gradient icons for an airport taxi service website that displays the business' USP's."/></picture></span><figcaption class="zpimage-caption zpimage-caption-align-center"><span class="zpimage-caption-content">A display of icons used to showcase and reinforce service standards</span></figcaption></figure></div>
</div></div></div><div data-element-id="elm_GM0o4A-33kUtjwXV7H-KAQ" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_1AccbR_rvg5nZOE6WHu-PA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_AEJtJQn0Q_BGtFaFe_5QvQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_AEJtJQn0Q_BGtFaFe_5QvQ"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/safe-contractor-icon-for-accredibility.png" size="custom" alt="Safe Contractor Approved accreditation icon."/></picture></span></figure></div>
</div><div data-element-id="elm_ouOCXAjumtOTRmGzRYfo-A" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-center " data-editor="true"><p><span style="font-size:14px;">A safe contractor accreditation has elements of iconography</span></p></div>
</div></div><div data-element-id="elm_wb35CLDOo2muvjA5mVcvwQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_X_zaS1zNQzJZWmWRs_Ut3g" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_X_zaS1zNQzJZWmWRs_Ut3g"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_X_zaS1zNQzJZWmWRs_Ut3g"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_X_zaS1zNQzJZWmWRs_Ut3g"] .zpheading:after,[data-element-id="elm_X_zaS1zNQzJZWmWRs_Ut3g"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Increasing Conversions and Driving Business Growth</span></h3></div>
<div data-element-id="elm_pwO0vwZyFkqzX9ejG5VTlQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_pwO0vwZyFkqzX9ejG5VTlQ"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Strategically placed icons can guide users toward desired actions, such as making a purchase, signing up for a newsletter, or booking a consultation. Call-to-action buttons that incorporate well-designed icons stand out more and encourage clicks. By simplifying the decision-making process and reducing friction, icons contribute to higher conversion rates. Additionally, when icons are used in trust-building elements - such as security badges, customer testimonials, and guarantees - they reinforce credibility, increasing user confidence and likelihood of completing a transaction. Such as this icon for a facility management client that we have. This icon is for approved safe contractors, meaning that the client are trustworthy and apply their trade in the safest ways possible.</span></p></div></div></div>
</div></div></div><div data-element-id="elm_hHyEHnXOEDG_r8AQHokR5A" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Best Practices for Using Icons on a Website</span></h2></div>
<div data-element-id="elm_ZnZNHmdoGLAGrhs79YDotg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_ZnZNHmdoGLAGrhs79YDotg"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><p>To maximise the benefits of iconography, you should follow these key dos and don'ts:</p></div>
</div><div data-element-id="elm_IoEEF1pxSMs8FBEhIjtD9g" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_IoEEF1pxSMs8FBEhIjtD9g"].zpelem-text { color:#FFFFFF ; } [data-element-id="elm_IoEEF1pxSMs8FBEhIjtD9g"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#FFFFFF ; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="font-size:18px;font-weight:400;color:rgb(255, 255, 255);">Dos</span></p><div><ul><li><span style="color:rgb(98, 104, 120);">Keep <a href="https://www.digital-scientists.co.uk/pixel-perfect/design-elements/iconography" title="website icon design" rel="">website icon design</a> simple and recognisable: Ensure that they are easy to understand at a glance.</span></li><li><span style="color:rgb(98, 104, 120);">Maintain consistency: Use a uniform style across all icons to create a cohesive design for your site.</span></li><li><span style="color:rgb(98, 104, 120);">Use universal symbols: Stick to well-known icons, such as a magnifying glass for search or an envelope for email.</span></li><li><span style="color:rgb(98, 104, 120);">Optimise for different screen sizes: Ensure icons are clear and legible across devices.</span></li><li><span style="color:rgb(98, 104, 120);">Enhance navigation: Strategically place icons to guide users through the website.</span></li><li><span style="color:rgb(98, 104, 120);">Stay on brand: Custom icons should align with your business’s colour scheme and design aesthetic.</span></li></ul></div></div>
</div><div data-element-id="elm_S_Ffw-Q9f8zXVnemOxn0Lw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_S_Ffw-Q9f8zXVnemOxn0Lw"].zpelem-text { color:#FFFFFF ; } [data-element-id="elm_S_Ffw-Q9f8zXVnemOxn0Lw"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#FFFFFF ; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="font-size:18px;font-weight:400;color:rgb(255, 255, 255);">Don'ts</span></p><div><div><ul><li><span style="color:rgb(98, 104, 120);">Avoid overly complex designs: Icons should be simple enough for users to understand instantly.</span></li><li><span style="color:rgb(98, 104, 120);">Don’t mix too many styles: Inconsistent icon styles can make the website look unprofessional.</span></li><li><span style="color:rgb(98, 104, 120);">Avoid obscure symbols: Use common symbols that users will recognise immediately.</span></li><li><span style="color:rgb(98, 104, 120);">Don’t make icons too small: Ensure they are large enough to be visible and clickable.</span></li><li><span style="color:rgb(98, 104, 120);">Avoid overuse: Too many icons can clutter the page and overwhelm users.</span></li><li><span style="color:rgb(98, 104, 120);">Don’t assume users will understand icons without testing: Always validate icon usability through user testing or as part of conversion rate optimisation efforts.</span></li></ul></div></div></div>
</div><div data-element-id="elm_FTHCbetp8LPy9Rq9uGUASQ" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">The Business Benefits of Iconography</span></h2></div>
<div data-element-id="elm_NineRap_gS2kxSV2tRMXEw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_NineRap_gS2kxSV2tRMXEw"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">Icons go beyond just making a website visually appealing; they provide a wealth of advantages that directly impact business success. Here’s a deeper look into how iconography can ultimately benefit businesses:</span></p></div></div>
</div></div></div><div data-element-id="elm_qwl9ngQpu_QLeJnE1mQzfg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_kPEp-tMHazKoGgyyNl3pew" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_gukN8jwkHEE4SzyJm_jr2w" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_gukN8jwkHEE4SzyJm_jr2w"].zpelem-heading { margin-block-start:0px; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Enhancing Customer Trust and Perception</span></h3></div>
<div data-element-id="elm_EfcmXU5ZwIaxh1zfzGevKQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_EfcmXU5ZwIaxh1zfzGevKQ"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">High-quality and professional icons create an immediate sense of credibility and reliability on your website. With well-placed clear icons, your site appears more polished and user-friendly, encouraging visitors to trust your business and your offerings.</span></p></div></div>
</div></div><div data-element-id="elm_tOZP-0EzAWQZ_BNkyk1WlA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_JW2Ef5tkW4_0C5_DduiuKQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_JW2Ef5tkW4_0C5_DduiuKQ"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/websites-for-security/lock-icon-2.png" size="custom" alt="A blue gradient shield with lock icon."/></picture></span></figure></div>
</div><div data-element-id="elm_QfdlwZKmcymEHo-L83DjbQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_QfdlwZKmcymEHo-L83DjbQ"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-center " data-editor="true"><p><span style="font-size:14px;">A shield with a lock to represent SSL security, ensuring that a site is fully secure and safe</span></p></div>
</div><div data-element-id="elm_Wu0o-PoxMnQ5Ns_WVWEz_g" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_Wu0o-PoxMnQ5Ns_WVWEz_g"] .zpimage-container figure img { width: 540px !important ; height: 114px !important ; } } [data-element-id="elm_Wu0o-PoxMnQ5Ns_WVWEz_g"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/Blue-Tick-Verification-Example.png" size="custom" alt="'digital scientists uk' with a blue verification tick."/></picture></span><figcaption class="zpimage-caption zpimage-caption-align-center"><span class="zpimage-caption-content">Blue ticks are also used for verification, ensuring users know real accounts</span></figcaption></figure></div>
</div></div></div><div data-element-id="elm_F6jN9CGovmQTBC91HMHPqA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_6a4VNPsHb6Pl0GFx1eZ63w" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_RvKh_R-obweabJG9LEW19A" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_RvKh_R-obweabJG9LEW19A"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_RvKh_R-obweabJG9LEW19A"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div></div></div><div data-element-id="elm_6vn6kbKo82APK6kskto-ng" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_eDin2j3kR5cWX-MSVW6NbQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_JCPp6QC7irjsmkUg4GDr6w" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_JCPp6QC7irjsmkUg4GDr6w"] .zpimage-container figure img { width: 540px !important ; height: 353px !important ; } } [data-element-id="elm_JCPp6QC7irjsmkUg4GDr6w"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/all-transfers-business-card-image-1.png" size="custom" alt="The All Transfers business card with on-brand iconography."/></picture></span><figcaption class="zpimage-caption zpimage-caption-align-center"><span class="zpimage-caption-content">An example of a professionally made business card using icons to show off our client's services</span></figcaption></figure></div>
</div></div><div data-element-id="elm_WtRjtbpx-NA2HL_bak6jUw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_pDK05cyglZ4NdCw1_q8xog" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_pDK05cyglZ4NdCw1_q8xog"] h3.zpheading{ color:#FFFFFF ; } [data-element-id="elm_pDK05cyglZ4NdCw1_q8xog"].zpelem-heading { margin-block-start:0px; } [data-element-id="elm_pDK05cyglZ4NdCw1_q8xog"] .zpheading:after,[data-element-id="elm_pDK05cyglZ4NdCw1_q8xog"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><div style="color:inherit;"><h3><span style="font-size:18px;">Supporting Digital and Print Marketing Efforts</span></h3></div></h3></div>
<div data-element-id="elm_SkXJ0k6hxAar6V38AiB1ig" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_SkXJ0k6hxAar6V38AiB1ig"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><p><span style="color:inherit;">Icons are versatile assets that can be used not only on websites, but also in email campaigns, digital advertisements, social media posts and printed materials such as business cards or leaflets. This helps maintaining a unified and recognisable brand identity across both online and offline marketing channels.</span></p></div></div></div></div></div>
</div></div></div><div data-element-id="elm_zgiw1ypKluUTGOOzTkHK5w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_1d1LE6Ztx4YZzoxPvmcyNw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_51GE0ul9bPPqnEBkuikaWw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_51GE0ul9bPPqnEBkuikaWw"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_51GE0ul9bPPqnEBkuikaWw"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div></div></div><div data-element-id="elm_hs4ayGXSbRM86d-NynjvvA" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_nL-fI48POXIN6DbHJFxosQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_6WGnjb12XXttF_wqybmwVQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_6WGnjb12XXttF_wqybmwVQ"].zpelem-heading { margin-block-start:0px; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><div style="color:inherit;"><h3><span style="font-size:18px;">Reducing Customer Support Queries</span></h3></div></h3></div>
<div data-element-id="elm_ihf273ns9W_P3NKdF2Pj-A" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="color:inherit;">Clear, self-explanatory icons help to improve the user’s comprehension, decreasing the number of customer inquiries about navigation, product features, or service details. This allows your business to allocate fewer resources to customer support and focus on scaling operations.</span></p></div></div>
</div></div><div data-element-id="elm_oRjTN76XbyhRYiYufqD-bw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_nXmTVzbu4eMca1E5Rwrjgw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_nXmTVzbu4eMca1E5Rwrjgw"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/websites-for-landscapers/hedge-icon-2.png" size="custom" alt="Green gradient icon for hedge cutting."/></picture></span></figure></div>
</div><div data-element-id="elm_-2ChiBtcEsMafs15EOOAOA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_-2ChiBtcEsMafs15EOOAOA"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;"><span style="font-size:14.6667px;">An example of a service icon to highlight hedge cutting to compliment their service breakout elements</span></span></p></div>
</div></div></div><div data-element-id="elm_UDEimPfgVSuSlKxJls3mvw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_6U2tsRQpFBrq-TdmR0S9Ww" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_mut3lDEcU-wyv9BOFypeiQ" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_mut3lDEcU-wyv9BOFypeiQ"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_mut3lDEcU-wyv9BOFypeiQ"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div></div></div><div data-element-id="elm_eUD3XQ2Gsm6E6kux7UsKxA" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_a4z0ZbZz3p7NThUjYynrcg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_p6_CnkxZMM_HIJxo6-1bDA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_p6_CnkxZMM_HIJxo6-1bDA"] .zpimage-container figure img { width: 100px !important ; height: 100px !important ; } } [data-element-id="elm_p6_CnkxZMM_HIJxo6-1bDA"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/websites-for-construction/home-icon-2.png" size="custom"/></picture></span></figure></div>
</div><div data-element-id="elm_FFKRsyfbErU7BQdoByTguQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_FFKRsyfbErU7BQdoByTguQ"].zpelem-text { font-size:14px; } [data-element-id="elm_FFKRsyfbErU7BQdoByTguQ"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-size:14px; } </style><div class="zptext zptext-align-center " data-editor="true"><p><span style="color:inherit;"><span style="font-size:11pt;">This icon was utilised to accompany a page link to the service covering domestic construction services increasing page engagement which is a positive user signal to a search engine</span></span></p></div>
</div></div><div data-element-id="elm_N0ZLpmuGeY78cWXjCHmFqg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_JOmIkDyNxzpV9NuqfBOI2A" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_JOmIkDyNxzpV9NuqfBOI2A"].zpelem-heading { margin-block-start:0px; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Boosting Website Performance in Search Engines</span></h3></div>
<div data-element-id="elm_qyg_IGDTZzJcTb3JuBH5mA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_qyg_IGDTZzJcTb3JuBH5mA"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">By enhancing navigation and usability, icons contribute to lower bounce rates, increased time spent on site, and higher conversion rates. These improvements positively impact search engine rankings and overall digital performance.</span></p></div></div>
</div></div></div><div data-element-id="elm_2HrbMxJz_mc7TCDRuBBABA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_PE8UeVm-o4aXgTHEbBblDA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_MUHCkyYhIZ21AIaVKtGvDw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_MUHCkyYhIZ21AIaVKtGvDw"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_MUHCkyYhIZ21AIaVKtGvDw"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_lQAmn7GWpbFdDm3IudD7oA" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_rMlZC2F4ub9xJ6E3d-Fiig" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_AI_UznFQRlACvge4TQUtVA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_AI_UznFQRlACvge4TQUtVA"].zpelem-heading { margin-block-start:0px; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><div style="color:inherit;"><h3><div style="color:inherit;"></div></h3><h3><span style="font-size:18px;">Encouraging User Engagement and Interactivity</span></h3></div></h3></div>
<div data-element-id="elm_DdcqV7dpSMJGJpK5XaLwJA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="color:inherit;">Interactive icons, such as hover effects or clickable elements, encourage users to engage more with the website, leading to a more immersive browsing experience. This can significantly boost the likelihood of a visitor taking meaningful actions.</span></p></div></div>
</div></div><div data-element-id="elm_F6H2DwZFTQG1deDoyCom0g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_glSjs0NiVmIs0-R4qWpB0A" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_glSjs0NiVmIs0-R4qWpB0A"] .zpimage-container figure img { width: 200px ; height: 233.13px ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-small zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/user-engagement-icon-group.png" size="small" alt="A drain icon with the location arrow over it. This is to represent a drain mapping service."/></picture></span></figure></div>
</div><div data-element-id="elm_SkcvDfcX6ckaaOvA4bFCMA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_SkcvDfcX6ckaaOvA4bFCMA"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-center " data-editor="true"><p><span style="font-size:14px;">An icon section on a client's site used to represent a service and encourage the user to click further into the site</span></p></div>
</div></div></div><div data-element-id="elm_WxPcqjM6-r9DL26rg2SkMA" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_WxPcqjM6-r9DL26rg2SkMA"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_WxPcqjM6-r9DL26rg2SkMA"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_eMt5lndhn-hOQhAs61q1Fg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_aq9Uu4Zc9Nl9GsrI-uNHXQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_0UQCvwc8bwuDLvy7jUO5Kg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_0UQCvwc8bwuDLvy7jUO5Kg"] .zpimage-container figure img { width: 150px !important ; height: 150px !important ; } } [data-element-id="elm_0UQCvwc8bwuDLvy7jUO5Kg"] .zpimage-container figure figcaption .zpimage-caption-content { font-size:14px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/websites-for-accountants/piggy-bank-icon-2.png" size="custom" alt="A gold gradient piggy bank design icon."/></picture></span></figure></div>
</div><div data-element-id="elm_wgeprhDIMJvrDIlsCWkz_A" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_wgeprhDIMJvrDIlsCWkz_A"].zpelem-text { font-size:14px; } [data-element-id="elm_wgeprhDIMJvrDIlsCWkz_A"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-size:14px; } </style><div class="zptext zptext-align-center " data-editor="true"><p>An icon to show that a customer is saving money, these are more likely to make customers rationalise their purchases as customers prefer to save money</p></div>
</div></div><div data-element-id="elm_m7TE0a6nuz7vz4-mUQcWtw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_eJDTGNNSgifeBHZQoYdjeA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_eJDTGNNSgifeBHZQoYdjeA"].zpelem-heading { margin-block-start:0px; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><div style="color:inherit;"><h3><span style="font-size:18px;">Driving Sales and Business Growth</span></h3></div></h3></div>
<div data-element-id="elm_cRTW0Lop4ddTeRaIQXipRg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_cRTW0Lop4ddTeRaIQXipRg"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="color:inherit;">Icons act as visual cues that guide users toward completing transactions. Whether highlighting product benefits, showcasing payment security, or drawing attention to promotional offers, well-placed icons play a direct role in increasing sales and revenue.</span></p><p><span style="color:inherit;"><br/></span></p><p><span style="color:inherit;">We often make purchases emotionally and rationalise those purchases logically. On that basis, well designed iconography aids in the creation of positive feelings, inspiring the user to take action, subsequently leading to greater leads or sales.</span></p></div></div>
</div></div></div><div data-element-id="elm_5JzxvNBJLVd6bQTLW0txFw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_5JzxvNBJLVd6bQTLW0txFw"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_5JzxvNBJLVd6bQTLW0txFw"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_4Ky5wsvyuwo7TplSyxPCHw" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_ZlGdJD-mmmZx21M5AiAx8Q" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_sybmXKlZ0cG8HsOX0T0q1w" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">How Pixel Perfect Help</span></h2></div>
<div data-element-id="elm_5bt9j0YtaWlgufK6PTpZ1Q" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">Creating effective iconography requires expertise in both design principles and user psychology. Our <a href="https://www.digital-scientists.co.uk/pixel-perfect" title="Pixel Perfect websites" rel="">Pixel Perfect websites</a> are built with skills honed over the years, mastering industry-leading design tools such as Adobe Creative Suite. Our team specialises in crafting bespoke icons that not only look great but also drive engagement and conversions. Whether you need icons for your website, or marketing materials, we ensure they align seamlessly with your brand identity and business goals.</span></p><p><span style="color:inherit;"><br/></span></p><p><span style="color:inherit;">Let us help you enhance your website with expertly crafted icons, ensuring clarity, engagement, and a professional touch.</span><span style="color:inherit;"></span></p></div>
</div></div><div data-element-id="elm_m-cwuGRMSwSeETIbL_6UtA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_BbGVmEncrfgfja9bEyRhPA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_BbGVmEncrfgfja9bEyRhPA"] .zpimage-container figure img { width: 100px !important ; height: 100px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-original zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/pixel-perfect-social-share.png" size="original"/></picture></span></figure></div>
</div><div data-element-id="elm_VwNKMlTwVjPKQxQXxRGVzA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_VwNKMlTwVjPKQxQXxRGVzA"] .zpimage-container figure img { width: 498px !important ; height: 105px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-original zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/pixel-perfect/PIXEL-PERFECT%20-1-.png" size="original"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_BCQHsUvHpcnzV6aKdLftkQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_e0PAka3DKpjfySn9ODpH1Q" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_OHRclUm7ZNGvuulVO5VgJQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="color:inherit;">#DIGITALSCIENTISTS #PIXELPERFECT&nbsp;</span><span style="font-size:16px;">#WebsiteIconography #WebsiteIconDesign #WebsiteSEO #WebDesign #BusinessGrowth #UXDesign</span></p></div></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 27 Feb 2025 11:02:59 +0000</pubDate></item><item><title><![CDATA[Why Page Metadata Is Important For Your Business]]></title><link>https://www.digital-scientists.co.uk/blogs/post/why-page-metadata-is-important-for-your-business</link><description><![CDATA[<img align="left" hspace="5" src="https://www.digital-scientists.co.uk/images/Blog Posts/yoast-wordpress-seo-insta.png"/>Today in the life of a Digital Scientist, our Developer, Dom, explains page metadata: what it is, why it is important, and how it can help your website thrive on search engines.]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_y5cyk1SaTgqU8KowaHASOQ" data-element-type="section" class="zpsection "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_SimZZNN1Te2VRRroHlVpBQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content- " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm__Qd7bPXJS-eds2ssOkA4SQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- "><style type="text/css"></style><div data-element-id="elm_tsHrBYeWQMO6_R7fyPaELg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_tsHrBYeWQMO6_R7fyPaELg"].zpelem-text { color:#FFFFFF ; } [data-element-id="elm_tsHrBYeWQMO6_R7fyPaELg"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#FFFFFF ; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:rgb(98, 104, 120);">Today in the life of a Digital Scientist, our Developer, Dom, explains page metadata: What it is, why it is important, and how it can help your website thrive on search engines. With extensive experience in building websites and applying search engine optimisation (SEO) techniques, we have mastered the handling of page metadata to ensure that our clients receive the opportunities they need to grow their businesses.</span></p></div>
</div><div data-element-id="elm_2VJ2aBxwg_4LGtnoosCMJA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_2VJ2aBxwg_4LGtnoosCMJA"] h2.zpheading{ color:#FFFFFF ; font-family:'Poppins',serif; font-size:24px; font-weight:400; } [data-element-id="elm_2VJ2aBxwg_4LGtnoosCMJA"] .zpheading:after,[data-element-id="elm_2VJ2aBxwg_4LGtnoosCMJA"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">What Is Page Metadata?</span></h2></div>
<div data-element-id="elm_1eHuerEk_TvZObRJlW2OBA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_1eHuerEk_TvZObRJlW2OBA"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">Page metadata is the information that a search engine or browser uses to understand the content of a webpage. Setting contextually correct and strategically researched metadata allows search engines to better comprehend how your page should be indexed and for what terms. This can significantly impact its ranking depending on the quality and relevance of the metadata applied.</span></p></div>
</div><div data-element-id="elm_nmzydAs3rk0DiS9V9VnX0w" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_nmzydAs3rk0DiS9V9VnX0w"] h2.zpheading{ color:#FFFFFF ; font-family:'Poppins',serif; font-size:24px; font-weight:400; } [data-element-id="elm_nmzydAs3rk0DiS9V9VnX0w"] .zpheading:after,[data-element-id="elm_nmzydAs3rk0DiS9V9VnX0w"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Why Is Page Metadata Important To Search Engines?</span></h2></div>
<div data-element-id="elm_hCL5eZkJcNgnZvBX41_5_g" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_hCL5eZkJcNgnZvBX41_5_g"].zpelem-text { font-size:16px; margin:0px; } [data-element-id="elm_hCL5eZkJcNgnZvBX41_5_g"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-size:16px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Search engines rely on metadata to effectively index webpages. Without it, your pages could be indexed for irrelevant phrases and queries, leading to missed opportunities for targeted traffic.</span></p><p><span style="font-size:16px;">Technically, a webpage can be indexed without metadata, relying solely on on-page content, site structure, and internal linking. However, without metadata, search engines must infer the page’s context, which can lead to misclassification. A structured approach would involve:</span></p><p><span style="color:inherit;"><br/></span></p><ul><li><span style="color:inherit;">Allowing search engines to index the page naturally based on content and structure.&nbsp; Allowing search engines to index the page naturally based on content and structure.</span></li><li><span style="color:inherit;">Analysing real-world user queries and search data.&nbsp; Analysing real-world user queries and search data.</span></li><li><span style="color:inherit;">Refining metadata based on actual search behaviours to provide the most relevant indexing signals.&nbsp; Refining metadata based on actual search behaviours to provide the most relevant indexing signals.</span></li></ul><p><span style="color:inherit;"><br/></span></p><p><span style="font-size:16px;">A common issue we encounter is incorrect metadata leading to poor indexing. For instance, a cleaning service page may inadvertently rank for cleaning products instead of cleaning services due to improper metadata signals. Conducting thorough SEO research prior to designing and developing a page ensures alignment with user intent and business objectives.</span></p><p><span style="font-size:16px;"><br/></span></p><p><span style="font-size:16px;">Metadata, when implemented incorrectly, can harm a page’s rankings and damage its click-through rate (CTR), especially for already established and well-performing pages. Since metadata is now considered a signal rather than a directive, Google may override titles and descriptions with on-page content if it deems them more relevant to user queries. The goal should be to guide search engines rather than dictate, allowing for iterative refinements over time to enhance rankings and conversions.</span></p></div></div></div>
</div><div data-element-id="elm__s3xmDqb3PK9wh5VIGKA1g" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_P3fchM7jEcTetupsO_G_iw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_5Lu4eJWEowfKjdCdnTlMzA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_5Lu4eJWEowfKjdCdnTlMzA"] h2.zpheading{ color:#FFFFFF ; font-family:'Poppins',serif; font-size:24px; font-weight:400; line-height:35px; } [data-element-id="elm_5Lu4eJWEowfKjdCdnTlMzA"] .zpheading:after,[data-element-id="elm_5Lu4eJWEowfKjdCdnTlMzA"] .zpheading:before{ background-color:#FFFFFF !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Where Is Page Metadata Accessed Or Stored?</span></h2></div>
<div data-element-id="elm_zxtspJeVjDEV2wkIvbotSw" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div><div><p style="color:inherit;"><span style="font-size:16px;">When building a website, metadata is typically stored within &lt;head&gt; HTML tags, which provide information about the page rather than visible content. Common forms of metadata include:</span></p><span style="font-size:16px;color:inherit;"></span><ul><span style="font-size:16px;color:inherit;"></span><li><span>Title Tag</span><span><span>: </span><span style="color:inherit;">Specifies the page title, which appears on search engine results pages (SERPs) and browser tabs.</span></span></li><span style="font-size:16px;color:inherit;"></span><li style="color:inherit;"><b><span style="font-weight:400;">Meta Description</span></b><span><span style="font-weight:400;">:</span> A summary of the page content that appears beneath the title in search results.</span></li><span style="font-size:16px;color:inherit;"></span><li style="color:inherit;"><b><span style="font-weight:400;">Meta Keywords</span></b><span> (allegedly deprecated by Google but we're still seeing positive influences on indexation): Historically used to impact rankings but now holds little to no SEO value aside from reinforcing topical indexing.</span></li><span style="font-size:16px;color:inherit;"></span></ul><span style="font-size:16px;color:inherit;"></span><p style="color:inherit;"><span style="font-size:16px;">Most content management systems (CMS) allow for easy modification of metadata at the page level, including the homepage. Understanding where and how to adjust metadata ensures effective control over how search engines interpret and display your pages.</span></p></div></div></div>
</div></div><div data-element-id="elm_d7yQJd_riZWrvzFQ-ipRAQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_raa-c5LrtTuaIvSBxK4sLw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_raa-c5LrtTuaIvSBxK4sLw"] .zpimage-container figure img { width: 450px !important ; height: 590px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/rankmath-wordpress-seo-section.png" size="custom"/></picture></span></figure></div>
</div><div data-element-id="elm_ARG4dO9FihYahFNY4a1AkQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_ARG4dO9FihYahFNY4a1AkQ"] .zpimage-container figure img { width: 540px ; height: 307.67px ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/yoast-wordpress-seo-section.png" size="fit"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_11aDPbEOqjaC9_ceJ4XTjg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_hASeg6k5uH6GNBueM272CQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_-9QdleBNXxgd-Kb1pMAlPg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_-9QdleBNXxgd-Kb1pMAlPg"] h2.zpheading{ font-size:24px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">How Different Elements Of Metadata Influence Indexing, Ranking and Conversions</span></h2></div>
<div data-element-id="elm_ELrBkCwck9wsS0X7fFl7EA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_ELrBkCwck9wsS0X7fFl7EA"] h2.zpheading{ line-height:35px; } [data-element-id="elm_ELrBkCwck9wsS0X7fFl7EA"].zpelem-heading { margin:0px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Metadata Titles and Their Impact</span></h2></div>
<div data-element-id="elm_zxjz2RVsrg3pGLmur8W1pQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_zxjz2RVsrg3pGLmur8W1pQ"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Metadata titles provide search engines and users with a concise understanding of a page’s content. They are primary indicators for indexation, specifying the phrases a page should be associated with. Titles work in conjunction with meta descriptions to influence click-through rates (CTR).</span></p><p><span style="font-size:16px;"><br/></span></p><span style="font-size:16px;"></span><p><span>If a page ranks in position #2 on a SERP but has a more compelling title and description than the #1 result, it can receive a higher CTR. Over time, improved engagement can elevate the page to the top position. This highlights the importance of <b><a href="https://www.digital-scientists.co.uk/quickfireseo/seo-research"><span style="font-weight:400;">SEO research</span></a></b> to understand user search behaviour and tailor metadata accordingly to the users you wish to target.</span></p><p><span style="font-size:16px;"><br/></span></p><span style="font-size:16px;"></span><p><span style="font-size:16px;">A strong CTR signals to search engines that a page is more relevant, leading to better rankings. Additionally, reducing bounce rates (when users leave quickly after landing on a page) reinforces the page’s value.</span></p></div></div></div>
</div><div data-element-id="elm_da4pqcfahbEo-WNj2XUmtA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_da4pqcfahbEo-WNj2XUmtA"] h2.zpheading{ font-family:'Poppins',serif; font-weight:400; line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Meta Descriptions and Their Role</span></h2></div>
<div data-element-id="elm_ob2AQWdToNyDJNqO21K6HQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_ob2AQWdToNyDJNqO21K6HQ"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Meta descriptions primarily impact CTR rather than indexing or rankings. While they do not directly influence rankings, they provide essential context that entices users to click. The key to writing effective descriptions includes:</span></p><span style="font-size:16px;"></span><ul><span style="font-size:16px;"></span><li><span>Keeping them between <b><span style="font-weight:400;">150-160 characters</span></b> to avoid truncation.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">Using natural language that aligns with user queries.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">Highlighting key benefits and relevance to the search intent.</span></li></ul><div><br/></div><ul><span style="font-size:16px;"></span></ul><span style="font-size:16px;"> Done right, a great meta description will indirectly impact rankings as you will be acquiring more traffic that subsequently engage with your site and dwell for longer periods, thus providing a large positive signal to search engines that your page answers their queries well, thus impacting rankings. If you bring the wrong type of user in and they bounce, well, that won't happen for long.</span></div></div></div>
</div><div data-element-id="elm_f2JDV74NXLf-TAWG28DMJw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_f2JDV74NXLf-TAWG28DMJw"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Meta Keywords and Their Function</span></h2></div>
<div data-element-id="elm_xWoXB2EdpuA0aE17YUOnTQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_xWoXB2EdpuA0aE17YUOnTQ"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div>While meta keywords are considered obsolete, on testing they do appear to continue impacting the pages indexation. If you have 10 pages that are closely related services, you can use the meta keywords to correctly differentiate them and signal to Google how they are different to support the content, as an added tip, you can also use a REL canonical instruction to signal to Google the page is unique and has a right to be indexed and isn't a duplicate.&nbsp;</div><br/><div>Using keywords more in general, such as within titles and descriptions helps differentiate similar pages on a website, preventing internal competition as well. Without proper differentiation, multiple pages may inadvertently compete for the same search terms, diluting overall ranking potential. Google likes to show unique results, only on queries that your site performs extremely well, where the competition is perhaps weak, or their sites are very poor, or you're operating in a niche, will you see multiple pages appearing on page one for the same query; as we've said, this is not what Google wants to see ideally.</div></div></div>
</div><div data-element-id="elm_PmRs3Kd9XwyNNLK8AIHD5Q" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_PmRs3Kd9XwyNNLK8AIHD5Q"] h2.zpheading{ font-size:18px; line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Other Forms of Metadata</span></h2></div>
<div data-element-id="elm_3OdvXwSuXVb7OCKNS9zU4Q" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_3OdvXwSuXVb7OCKNS9zU4Q"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><ul><li><b><span style="font-weight:400;">Open Graph Tags</span></b><span>: Define how content appears when shared on social media platforms like Facebook and LinkedIn, including custom titles, descriptions, and images.</span></li><span style="font-size:16px;"></span><li><b><span style="font-weight:400;">Rich Snippets</span></b><span>: Provide additional search result enhancements such as review ratings, images, and product details, improving engagement and visibility.</span></li></ul></div></div>
</div></div></div><div data-element-id="elm_x0ec8lc0JmnWVCm3TKkFhw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_kQS2xjzj1Ge8I8z3CvZKuA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_kXOqaIGo3mkehbOVNkIauQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_kXOqaIGo3mkehbOVNkIauQ"] h2.zpheading{ font-size:24px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Why Page Metadata Matters for Businesses</span></h2></div>
<div data-element-id="elm_8mL4wb68AAFmf0NWp3tyQw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_8mL4wb68AAFmf0NWp3tyQw"].zpelem-text { margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">Effective metadata enhances website visibility, making it easier for search engines to index and rank pages for relevant queries. This leads to increased traffic and business growth opportunities. Well-optimised metadata ensures:</span></p><span style="font-size:16px;"></span><ul><span style="font-size:16px;"></span><li><span style="font-size:16px;">Higher visibility for targeted keywords.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">Better representation in search results.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">Increased CTR and improved rankings.</span></li><span style="font-size:16px;"></span></ul><span style="font-size:16px;"></span><p><span style="font-size:16px;">Titles and descriptions should be crafted based on extensive research, ensuring alignment with business objectives and user intent.</span></p></div></div></div>
</div></div></div><div data-element-id="elm_ZdMWb6EKSGaf1DVPXlU4dw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_tY6LH9KgBU9UJJ8-P4FkHw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_mDcCWgFaN-43YqsumYNn2Q" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Metadata Guidelines For Best Practices</span></h2></div>
<div data-element-id="elm_2k4cCRE4Jldj3IvnDMtCZg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_2k4cCRE4Jldj3IvnDMtCZg"] h2.zpheading{ line-height:35px; } [data-element-id="elm_2k4cCRE4Jldj3IvnDMtCZg"].zpelem-heading { margin:0px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Title Guidelines</span></h2></div>
<div data-element-id="elm_D0_EvfShnUB-ZdvJmwvg_Q" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_D0_EvfShnUB-ZdvJmwvg_Q"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><ul><li><b><span style="font-size:16px;font-weight:400;">Keep between 50-60 characters</span></b><span style="font-size:16px;font-weight:400;"> to prevent truncation.</span></li><span style="font-size:16px;"><span></span><li><b><span style="font-weight:400;">Place primary keywords at the beginning</span></b><span> for better visibility.</span></li><span></span><li><b><span style="font-weight:400;">Avoid keyword stuffing</span></b><span>, as Google may ignore over-optimised titles.</span></li><span></span><li><b><span style="font-weight:400;">Make titles compelling</span></b><span> to encourage clicks.</span></li></span></ul></div></div>
</div><div data-element-id="elm_lrXM-8QwXzZvgArEoDTNzg" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">On testing, larger titles continue to perform but try to write them as a phrase, such as some form of <a href="https://www.digital-scientists.co.uk/quickfireseo/local-seo">Local SEO</a>, if doing this as if they are truncated or selected based on user query they can still work well contextually to aid CTR i.e. QuickFireSEO Agency In Portsmouth | SEO Agencies Near Me | SEO agencies in Hampshire&nbsp; - would result in potential variations being shown subject to user queries so don't restrict yourself but do continue to test as always the most effective SEO is performed by those continually testing the algorithm updates!</span></p></div></div>
</div><div data-element-id="elm_TOnNfcwrmBvspcgjh5DYFg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_TOnNfcwrmBvspcgjh5DYFg"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Description Guidelines</span></h2></div>
<div data-element-id="elm_zTsYsycLf8UhOZ69eC0U1w" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_zTsYsycLf8UhOZ69eC0U1w"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><ul><li><b><span style="font-weight:400;">Keep between 150-160 characters</span></b><span style="font-weight:400;">.</span></li><span style="font-weight:400;"><span></span><li><b><span style="font-weight:400;">Include relevant keywords naturally</span></b><span style="font-weight:400;">.</span></li><span></span><li><b><span style="font-weight:400;">Summarise the page’s content clearly and concisely</span></b><span style="font-weight:400;">.</span></li><span></span><li><b><span style="font-weight:400;">Avoid generic phrases</span></b><span style="font-weight:400;"> that do not provide value to users.</span></li></span></ul></div></div>
</div><div data-element-id="elm_akAPYeX7gw9LBW-ZojkepQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">We wouldn't go above the description count and risk truncated descriptions, so keep this compelling and on point.</span></p></div></div>
</div><div data-element-id="elm_C03ctIkH81q6r_QxgZHniA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_C03ctIkH81q6r_QxgZHniA"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Keyword Guidelines</span></h2></div>
<div data-element-id="elm_tn6PV46BiPIEfRZbVw9AYQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_tn6PV46BiPIEfRZbVw9AYQ"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><ul><li><span>Focus on <b><span style="font-weight:400;">10-15 targeted phrases</span></b><span style="font-weight:400;">.</span></span></li><span style="font-size:16px;"></span><li><span>Ensure keywords are <b><span style="font-weight:400;">directly related to the content</span></b><span style="font-weight:400;">.</span></span></li><span style="font-size:16px;"></span><li><span>Avoid&nbsp;<span style="font-weight:400;"></span><b><span style="font-weight:400;">over-stuffing</span></b> to prevent indexing for irrelevant queries.</span></li></ul></div></div>
</div><div data-element-id="elm_kCRyWjR31a4BVdFos5DFCQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span style="font-size:16px;">Keep them relevant put contextually broad, use synonyms, phrase variations and so on to aid indexation from the meta keywords and support rankings for their use elsewhere in meta, or on page content or linking, again inline with actual user data typically with the right intent subject to the page goal.</span></p></div></div>
</div><div data-element-id="elm_vzZjFSV6lhDWsNDjPj31MQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_uhcX8z7dyZAyV7HvGYBZqA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_nn1QLx35kmhe51N5uW96Yw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_nn1QLx35kmhe51N5uW96Yw"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Robot Directives and Their Impact</span></h2></div>
<div data-element-id="elm_p-y3FKtpq1NNEDRtpHjiBA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><span style="font-size:16px;">If a website has multiple pages with similar content, it can harm SEO rankings due to duplicate indexing. The meta robots tag allows directives to control:</span></p><span style="font-size:16px;"></span><ul><span style="font-size:16px;"></span><li><span style="font-size:16px;">Whether a page is indexed.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">How search engines crawl and follow links.</span></li><span style="font-size:16px;"></span><li><span style="font-size:16px;">Whether specific URL parameters should be excluded.</span></li><span style="font-size:16px;"></span></ul><span style="font-size:16px;"></span><p><span style="font-size:16px;">Applying no-index to non-essential pages (e.g. login pages, internal search results) helps conserve crawl budget, ensuring search engines focus on important content.</span></p></div></div></div>
</div><div data-element-id="elm_JzY8wUIgzs_mlQhBA0D0Eg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_JzY8wUIgzs_mlQhBA0D0Eg"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:18px;">Best Practices</span></h2></div>
<div data-element-id="elm_qN6bJGtyKupjngfQoq7HCA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_qN6bJGtyKupjngfQoq7HCA"].zpelem-text { margin:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><ul><li>Avoid blocking important pages.</li><li>Ensure directives align with the website’s sitemap.</li><li>Regularly audit directives to maintain consistency.</li></ul><ul><p><span style="font-size:16px;">No indexing is a hugely effective tool - but stay away if you're not performing significant research and educating yourself first. Noindexing the wrong URL parameters for example can prevent particular Google bots relating to ads being able to access images and other information important for feeds that a responsible for product listings, advertisements and so on.</span></p></ul></div></div>
</div></div></div><div data-element-id="elm_4tg6rtCr2YYz1129xEQTYw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_CSWS97LbCXbfDxZYJ_eB9g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_q5oeK1ZDiXoryLhFZGZQHw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_q5oeK1ZDiXoryLhFZGZQHw"] h2.zpheading{ line-height:35px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">The Digital Scientist Approach to Metadata</span></h2></div>
<div data-element-id="elm_uK8a_Y-CS8XXqL0CI0ZKVg" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><span>Metadata optimisation is complex, requiring extensive research, technical expertise, and strategic refinement. At <b><a href="https://www.digital-scientists.co.uk/pixel-perfect/"><span style="font-weight:400;">Pixel Perfect</span></a></b> and <b><a href="https://www.digital-scientists.co.uk/quickfireseo/"><span style="font-weight:400;">QuickFireSEO</span></a></b>, we have honed our expertise over years of real-world testing and experience, using the best industry practices (where proven) as one small area in our arsenal to help accelerate our customers growth online.</span></p></div></div>
</div></div></div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 13 Feb 2025 07:29:00 +0000</pubDate></item><item><title><![CDATA[Image Optimisation: Why It Matters for Your Business]]></title><link>https://www.digital-scientists.co.uk/blogs/post/why-image-optimisation-matters-for-businesses</link><description><![CDATA[<img align="left" hspace="5" src="https://www.digital-scientists.co.uk/case-study-images/dom-case-study/This-Is-An-Image-Of-Adobe-Illustrators-Image-Exporter-Tool-That-Can-Be-Used-To-Resize-Images.png"/>Today in the life of a Digital Scientist, our Developer, Dom takes a deep dive into image optimisation: What it is, why it’s essential, and how it can help your business thrive.]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_3E_dKWm2SbKQn_f5iEECrQ" data-element-type="section" class="zpsection "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_uErS8_pnR4W3g0oMJnNRAw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content- " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_SDzdqG-JQxKnlQaySt-hRA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- "><style type="text/css"></style><div data-element-id="elm_rQWLrZ2OSWScHFtwtqJBGQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_rQWLrZ2OSWScHFtwtqJBGQ"].zpelem-text { font-size:16px; } [data-element-id="elm_rQWLrZ2OSWScHFtwtqJBGQ"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-size:16px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>Today in the life of a Digital Scientist, our Developer, Dom takes a deep dive into image optimisation: What it is, why it’s essential, and how it can help your business thrive. With experience in building websites, we've mastered the art of handling hundreds of thousands of images and numerous file types to ensure optimal website performance.</p></div></div>
</div><div data-element-id="elm_dphxezoitfzkkceCyBUkDA" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">What is Image Optimisation?</span></h2></div>
<div data-element-id="elm_px2Pm1s_RAWaw08PGITnyg" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>Image optimisation refers to adjusting images so that they fit seamlessly on your website without compromising load times or quality. This could involve resizing the image, altering its quality, or even renaming the file. High-quality images are essential, but they don’t need to be ultra-high resolution (like 4K). For instance, when using a lightbox feature, which allows users to click and zoom in on images, it's important to ensure that your image maintains sharpness when enlarged. If you don’t have a need for the image to be enlarged, the height and width of the image can be greatly reduced just to suit the element it sits within.</p></div></div>
</div><div data-element-id="elm_tZmEFs6QBssV8TxczrDB-Q" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">The Impact of Image Optimisation</span></h2></div>
<div data-element-id="elm_42dAv76Yz2xRD9E4olgr2g" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>When it comes to website performance, images play a pivotal role. While they visually showcase your services, managing their size and quality is often a challenge. Many businesses overlook the importance of image optimisation, assuming it’s not a significant factor. However, when we take on a project that has image issues, it is usually an issue with image optimisation which can severely affect your website.</p><p><br/></p><p>The goal is to make your website load within the 2.5-3 second window recommended by search optimisation guidelines. Imagine this: A single large image can negatively impact your site speed, especially if users have a slow Wi-Fi connection or are on mobile data. Now, multiply that by 5 or 50 images (plus icons and other graphics) - this can cause a significant slowing in load times, which will increase the bounce rate on your site (or, the capacity of people who click a link to your site and immediately click off) and reflect poorly in a search engine’s decisions to rank your site in results pages.</p><p><br/></p><p>With an average internet speed of 69.4 Mbps, an optimised webpage typically ranges between 1-3MB in size. An unoptimised site can balloon up to 50MB and take up to 20 seconds to load. Since users generally spend around 10 seconds deciding if a site is worth their time, your site could lose valuable visitors simply because it takes too long to load.</p></div></div>
</div><div data-element-id="elm_YoDWdlIK-vlRNIKq1-Gg8w" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Are You Wasting Paid Traffic?</span></h2></div>
<div data-element-id="elm_ECHwYFtpwv7zWmJ_xLK5MA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p>If you’ve paid for your website traffic, poor optimisation wastes your investment. Add to that the opportunity cost of lost sales and business growth. It doesn’t stop there: Search engines penalise sites with slow load times. If your competitors have optimised websites, they’ll outperform you in search results.</p><p><br/></p><span style="font-size:16px;">Additionally, optimising images for desktop views ensures they scale well for mobile devices too, while not negatively impacting the desktop experience. You should be mindful of the devices people use to access your site, as this will vary by your type of business or industry, among other factors. For example: A local beautician’s customers would typically access their site by mobile device, whereas a commercial cleaning company would have prospective office managers sat at their desk accessing via desktop.</span></div></div></div>
</div><div data-element-id="elm_4o9Qw_FiXxEtuQafj5n9Fg" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Site Accessibility and SEO Benefits</span></h2></div>
<div data-element-id="elm_OJZq7ZIFvlkFNt3XP-31YQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div><p style="color:inherit;"><span style="color:inherit;">For best results, follow these alt text guidelines:</span></p><ul><li>Be descriptive and specific</li><li>Use natural keywords without overstuffing</li><li>Keep it under 125 characters for readability</li><li>Avoid vague descriptions like &quot;house image&quot;</li><li>Ensure it’s relevant to the page content</li></ul><p style="color:inherit;"><br/></p><p style="color:inherit;">Below is what your alt text should look like:</p></div></div>
</div><div data-element-id="elm_iEGHtQnADWPYbOVhFP7vRQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_iEGHtQnADWPYbOVhFP7vRQ"] .zpimage-container figure img { width: 602px !important ; height: 20px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/alt-text-example.png" size="custom" alt="Alt text example that reads: &quot;image of a locksmith being trustworthy and credible&quot;."/></picture></span></figure></div>
</div><div data-element-id="elm_uW1sqjkdmZWpzSZt1raihw" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Image File Names Matter!</span></h2></div>
<div data-element-id="elm_yKT2N6Dhdu0oxCjhnJA8pA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div><p style="color:inherit;">Search engines can’t see images, but they can read file names. When naming images, ensure the file names are descriptive and keyword-rich. This helps search engines understand the image’s context and improve your page’s ranking. Follow these naming conventions:</p><ul><li>Use descriptive, meaningful names</li><li>Use hyphens to separate words (Google treats hyphens as separators, unlike underscores)</li><li>Avoid generic names like &quot;image1.jpg&quot;</li><li>Avoid capitalisation: “optimised-image” &gt; “Optimised-Image”</li><li>Match the theme of the page</li><li>Include targeted keywords, especially for local SEO</li></ul><p style="color:inherit;"><br/></p><p style="color:inherit;">Optimising image names not only helps search engines better index your content but also improves your rankings by aligning the image with the page’s topic.</p></div></div>
</div><div data-element-id="elm_6uAvWQdOaBldDnxFORyhrg" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Compressing and Resizing Images for Better Performance</span></h2></div>
<div data-element-id="elm_OdedJ8TOQ9ZB4VeGCqthmA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>Large image files slow down your site, which affects SEO and user experience. Google prioritises fast-loading websites, and slow sites with large images can drop in rankings. Responsive design is also affected: Users on mobile or tablet devices may experience distorted layouts, which harms the overall user experience.</p><p>&nbsp;</p><p>To solve this, compress images to reduce their size without sacrificing quality. Use file formats like WebP or JPEG 2000, which are designed for smaller file sizes and faster load times. WebP is especially beneficial, as it’s Google’s preferred format for web images. This directly impacts your SEO, as Google rewards websites that follow its guidelines.</p><p>&nbsp;</p><p>Of course, using any old image converter online can have negative results. We use tools like Adobe Photoshop and Illustrator to export images in the optimal formats. The export menu allows us to evaluate the image, remove unnecessary white space, and adjust the dimensions to fit perfectly on the page, whether it’s a desktop or mobile view.</p></div></div>
</div><div data-element-id="elm_iTmzHMRh92NHK-vFy6ud9g" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_iTmzHMRh92NHK-vFy6ud9g"] .zpimage-container figure img { width: 602px !important ; height: 320px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/adobe-illustrator-image-exporter.png" size="custom" alt="Exporting an image in Adobe Illustrator for site optimisation."/></picture></span></figure></div>
</div><div data-element-id="elm_LXStVYttuRmUWnH3eCrjhQ" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">How a Digital Scientist Can Help</span></h2></div>
<div data-element-id="elm_eL94RcE7tbt3377ZiamBzQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>The use of keyword integration and image enhancement does take time and skills that our <a href="https://www.digital-scientists.co.uk/pixel-perfect" title="Pixel Perfect" rel="">Pixel Perfect</a> and <a href="https://www.digital-scientists.co.uk/quickfireseo" title="QuickFireSEO" rel="">QuickFireSEO</a> teams have spent years learning. Although it’s all well and good to say that you should include things like keywords in your image optimisation, without developing a functional keyword strategy (much less knowing <i>how</i> to go about doing this in the first place), you’re not likely to get too far, and especially not without having access to and understanding the tools and programs required to do this. Most do not have this expertise, nor the time to dedicate to learn it on top of managing their own businesses in the first place. This is where Digital Scientists comes in: With our support and adherence to image optimisation best practices, your website will load faster, rank better on search engines, and ultimately lead to more traffic and enquiries. A sure-fire way to grow your business.</p></div></div>
</div><div data-element-id="elm_pG4Hk789mSO1OyJUPCUW2g" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_pG4Hk789mSO1OyJUPCUW2g"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_pG4Hk789mSO1OyJUPCUW2g"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_nlvYgBzaP9YEo-nwx_b6zw" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p><i>TLDR</i></p><p>In short, image optimisation is a critical element of a successful SEO strategy. It improves page performance, supports better data acquisition, and contributes to long-term business growth. With fewer visitors bouncing off your site and more staying engaged, your website becomes a powerful asset for driving enquiries and fostering growth.</p></div></div>
</div></div></div></div></div></div> ]]></content:encoded><pubDate>Mon, 03 Feb 2025 07:29:00 +0000</pubDate></item><item><title><![CDATA[The Do's and Don'ts of Inline Stylings]]></title><link>https://www.digital-scientists.co.uk/blogs/post/dos-and-donts-of-inline-stylings</link><description><![CDATA[<img align="left" hspace="5" src="https://www.digital-scientists.co.uk/images/Blog Posts/image-showing-inline-stylings-on-the-website-builder-put-after-paragraph-2.PNG"/>Our Developer, Dom outlines the do's and do not's of using inline stylings in your HTML.]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_L8PTK2uVTn-PAwNbMLDhFQ" data-element-type="section" class="zpsection "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm__RAqbdzQRkqQKwReDUVyAw" data-element-type="row" class="zprow zprow-container zpalign-items- zpjustify-content- " data-equal-column=""><style type="text/css"></style><div data-element-id="elm_u03w766tQp66niAQKo3hKQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- "><style type="text/css"></style><div data-element-id="elm_GyNmHUJR9qjuNG0LOi1jnA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p style="font-size:14px;"><span style="font-size:16px;">Today in the life of a Digital Scientist, our Developer, Dom outlines the do's and do not's of using inline stylings in your HTML.</span></p><p style="font-size:14px;"><span style="font-size:16px;"><br/></span></p><p style="font-size:14px;"><span style="font-size:16px;">Having worked in this field for a few years now, I can say that we have experience in all sorts of builders and code. So, when an issue arises, we know how to troubleshoot and take care of it. Take one of our clients as an example: They wanted their website optimised for mobile devices and also wanted their website to have a more distinctive style. So, as usual, I booted up the builder and identified the problems that needed to be fixed to optimise the website and readied some CSS for their custom styling. However, when I added the custom classes to the elements, they didn’t react to my code.</span></p><div style="font-size:14px;"><div><p><span style="font-size:16px;"><br/></span></p><p><span style="color:inherit;font-size:16px;">The website builder our client was using has a feature where a pop-up menu lets you change things like fonts or text colours (or, 'styles'). However, when<span style="font-size:16px;"> you make these changes, they are applied directly to the element as 'inline styles'. This means the style is locked onto that specific element, like a text box or button. Because of this, if you try to apply a general style using a CSS class (for example, to change the text colour) it won’t work, as the inline style takes priority in the CSS hierarchy.</span></span></p><p><span style="color:inherit;font-size:16px;"><br/></span></p><p><span style="color:inherit;font-size:16px;">If you're struggling then to understand why your styling is not applying, it could be due to inline styles overriding CSS class selectors, either globally or on individual elements.</span></p></div></div></div></div>
</div><div data-element-id="elm_fKnCf-IFpHBnQlO0p6cHMw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_fKnCf-IFpHBnQlO0p6cHMw"] .zpimage-container figure img { width: 561px !important ; height: 178px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/case-study-images/dom-case-study/image-showing-inline-stylings-on-the-website-builder-put-after-paragraph-2.PNG" size="custom"/></picture></span></figure></div>
</div><div data-element-id="elm_tUQxg75FQBBdSmih2yjfNQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">Shown in the image above, the text element has multiple inline styles that dictate its alignment, font size and even colour. Adding any stylings using CSS classes, such as the example-class that has been added, won’t cause any changes on the builder as any custom classes are declared further up the chain and are overwritten.</span></p></div>
</div><div data-element-id="elm_dx25hSe7VOCUeHbWSjl6hg" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Why Do Inline Stylings Matter?</span></h2></div>
<div data-element-id="elm_7BoMm6DhFqPofJ015LJ6DA" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">Developers, like ours, do not use inline stylings as they are considered bad practice. This is due to a number of reasons, such as keeping HTML and CSS separate. HTML is already long-winded with a number of dividers, elements and classes that already need to be included. Adding CSS for inline styles to this mix makes the code more complicated than it should be. </span><span style="color:inherit;">This is why CSS should be kept to their stylesheets and only referenced in the header of the HTML code. Another reason they are bad practice is because of the editability of this type of style. As these only affect the element that they have been assigned to, if you were to create a global class (a class that is intended for use across the entire project) to affect every element that has the class, it wouldn’t have any effect on the elements with inline styles, due to them operating higher up in the hierarchy. This then means that you’d have to go back individually and change the style of every inline element, wasting time that could be spent on other tasks.</span></p></div>
</div><div data-element-id="elm_xjJLzl7pRWvchjHMGkiVjw" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">Could Inline Styling Impact My Site's Performance? Is It Bad for SEO?</span></h2></div>
<div data-element-id="elm_CdrCX7qLg6R5hfcTSNF9gg" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p>Inline styling can significantly impact your site's load speed, depending on the size of your site and the extent to which inline styles are used. Instead of efficiently applying CSS classes across multiple elements, inline styling is often applied on an individual basis. This leads to unnecessary code bloat, as each element carries both its inline styles and any associated CSS classes. As a result, browsers need to process additional style rules, which can slow down page loading times.</p><p><br/></p><p>From an SEO perspective, site performance is a critical ranking factor. When competing with businesses that have strong foundations in areas such as high-quality content, keyword relevance, technical SEO, backlink profiles, mobile usability, and user experience (UX), technical optimisations like performance improvements could be the tipping point that sets you apart. Search engines favour fast, well-structured websites that provide seamless experiences across all devices, making performance a crucial element in achieving top rankings.</p><p><br/></p><p>When our QuickFire&nbsp;team work on a client's <a href="https://www.digital-scientists.co.uk/quickfireseo/seo-research" title="SEO market research" rel="">SEO market research</a>, we focus on major opportunities such as content strategy, technical health, and link-building efforts. However, in highly competitive industries, we take a deeper dive into performance-related micro-optimisations -small but meaningful improvements that collectively enhance your site's ranking potential. These refinements can be the key to outperforming competitors, resulting in higher traffic, increased enquiries, and greater business growth.</p></div></div>
</div><div data-element-id="elm_W7TrLR2u7RkPFe-3O-twrg" data-element-type="heading" class="zpelement zpelem-heading "><style></style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="font-size:24px;">When Should I Use Inline Stylings?</span></h3></div>
<div data-element-id="elm__Kx1TGfFt38ERPGj4WZB0w" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p style="font-size:14px;"><span style="font-size:16px;">Inline stylings may be bad practice, but they can also be used in useful ways. One instance is in emails: When building an email, some <span style="font-size:16px;">users may add HTML for advertisements or just to make the email look fancier. However, emails cannot use style tags to contain CSS as many email providers do not support it. To combat this, inline styles can be used to add custom features to the elements you need them on.</span></span></p><p style="font-size:14px;"><span style="font-size:16px;color:inherit;"><br/></span></p><p style="font-size:14px;"><span style="font-size:16px;color:inherit;">Inline styles are also commonly used on websites that rely on JavaScript. When JavaScript is used to make changes to a website, such as hiding an element when a button is clicked, it applies inline styles to achieve this. For instance, it might add the &quot;</span><code style="font-size:16px;color:inherit;">display: none&quot;</code><span style="font-size:16px;color:inherit;"> style directly to the element to make it disappear from view.</span></p><p style="font-size:14px;"><span style="font-size:16px;color:inherit;"><br/></span></p><p style="font-size:14px;"><br/></p><p style="font-size:14px;"><span style="color:inherit;font-size:16px;">At Digital Scientists, we know when and where to use inline stylings, so when we do use them, it is for an appropriate reason. Using our services, you can be safe in the knowledge knowing that we know the best practices for website development, and we deploy our knowledge accurately and efficiently on any website that we build with <a href="https://www.digital-scientists.co.uk/pixel-perfect/" title="Pixel Perfect website designs" rel="">Pixel Perfect website designs</a>.</span><span style="font-size:16px;color:inherit;"></span></p></div></div></div>
</div></div></div></div></div></div> ]]></content:encoded><pubDate>Fri, 24 Jan 2025 16:03:31 +0000</pubDate></item><item><title><![CDATA[Creating Unique Designs with Custom Fonts]]></title><link>https://www.digital-scientists.co.uk/blogs/post/unique-designs-with-custom-fonts</link><description><![CDATA[<img align="left" hspace="5" src="https://www.digital-scientists.co.uk/images/Blog Posts/logo-fonts.png"/>Dominic outlines a quick fix to broken font code, and how he dealt with the situation.]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_fKbkyb5NQBmIPUOarDdWBw" data-element-type="section" class="zpsection "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_6SoAk5QLSSqFiahKCfjPDg" data-element-type="row" class="zprow zprow-container zpalign-items-center zpjustify-content-center " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_jSJtR4ZcSSardAlmVqfz9A" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- "><style type="text/css"></style><div data-element-id="elm_DIXR_6oKS5mYtRUzxswJ-w" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_DIXR_6oKS5mYtRUzxswJ-w"].zpelem-text { color:#FFFFFF ; font-size:16px; } [data-element-id="elm_DIXR_6oKS5mYtRUzxswJ-w"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#FFFFFF ; font-size:16px; } </style><div class="zptext zptext-align-left " data-editor="true"><div><div><p><span style="font-size:16px;color:rgb(98, 104, 120);">Today, in the life of Digital Scientists, our Developer, Dominic outlines a quick fix to the implementation of custom fonts to a website.</span></p><p><span style="font-size:16px;color:rgb(98, 104, 120);"><br/></span></p><p><span style="color:rgb(98, 104, 120);">Typography is a key element of web design. Incorporating custom fonts is an effective way to align a website with a company’s brand guidelines and create a visually striking, unique user experience. Whether through sourcing fonts from Adobe Fonts, Google Fonts, or designing bespoke typefaces in Adobe Illustrator, custom fonts can truly set a website apart.</span><span style="font-size:16px;color:rgb(98, 104, 120);"></span></p></div>
</div></div></div><div data-element-id="elm_j4U7P025swt3fG5mBjHYSw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_EHN3kXzZ072fz9f0nw_ayQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_EdRUn6J9QcutEfZgwWlcsA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_EdRUn6J9QcutEfZgwWlcsA"] .zpimage-container figure img { width: 350px !important ; height: 270px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/logo-fonts.png" size="custom"/></picture></span></figure></div>
</div></div><div data-element-id="elm_GUITnMuN0vZJlPvHs9NWgQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_LyMUY-eFRIc6de-O7F3xeQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_LyMUY-eFRIc6de-O7F3xeQ"] .zpimage-container figure img { width: 350px !important ; height: 270px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/logo-font.png" size="custom"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_OTnBzToP3odLC10fc4WiMQ" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><p><a href="https://www.digital-scientists.co.uk/pixel-perfect/design-elements/fonts" title="Custom fonts" rel="">Custom fonts</a> help reinforce brand identity and elevate a website’s aesthetics, making the design feel polished and cohesive. By selecting fonts that match a company’s branding, we ensure that every aspect of the website reflects their unique identity.</p><p><br/></p><p>Here’s how we approach the integration of custom fonts, which can be applied across CMS platforms like WordPress, Zoho Commerce, Zoho Sites, or any builder that provides custom stylesheet access:</p><p>Selecting the right fonts:</p><ul><li>Browse through thousands of fonts available in Google Fonts or Adobe Fonts to find options that best fit the brand’s style and messaging.</li><li>Alternatively, create a bespoke font in Adobe Illustrator. This process involves sketching and vectorising the font, ensuring each character is designed with precision.</li></ul><p><br/></p><p>Here are some tips for designing your own font in Illustrator:</p><ul><li>Start by sketching characters on paper or digitally.</li><li>Use Illustrator to trace the sketches into vectors.</li><li>Ensure consistent line weights and spacing for readability.</li><li>Export the design as a TrueType (.ttf) or OpenType (.otf) file.</li></ul><p><br/></p><p>Uploading the font in the style sheet:</p><p>Using the @font-face rule in CSS, we link the font files to the website. Here’s an example:</p><p>@font-face {</p><p>font-family: 'CustomFont';</p><p>src: url('path-to-font/CustomFont.ttf') format('truetype');</p><p>font-weight: normal;</p><p>font-style: normal;</p><p>}</p><p>.custom-font-class {</p><p>font-family: 'CustomFont', sans-serif;</p><p>}</p><p><br/></p><p>Applying the font to website elements:</p><p>By assigning custom classes to the relevant elements, we ensure the fonts are applied consistently throughout the website. This creates a tailored experience while maintaining flexibility for future updates.</p></div></div></div>
</div><div data-element-id="elm_J08AP91Lu_CtMm0yjLswUQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column="false"><style type="text/css"></style><div data-element-id="elm_JaK6-Efq_qRmB3xAWx0eHg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_jpIP8B2sWOiWSWOQq0s2sQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_jpIP8B2sWOiWSWOQq0s2sQ"] .zpimage-container figure img { width: 350px !important ; height: 270px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-custom zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/custom-class.png" size="custom"/></picture></span></figure></div>
</div></div><div data-element-id="elm_vICHTZo97eIZNVBt0-vDtw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div data-element-id="elm_ahc3nsuVYyjLMjdTUPYccw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_ahc3nsuVYyjLMjdTUPYccw"] .zpimage-container figure img { width: 350px !important ; height: 270px !important ; } } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-tablet-align-center zpimage-mobile-align-center zpimage-size-original zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/images/Blog%20Posts/fontface.png" size="original"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_2iBHNb9Wu5kQHEeYfK8W-Q" data-element-type="text" class="zpelement zpelem-text "><style></style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">Ready to elevate your website’s design with custom fonts? Get in touch with us today through our <a href="https://www.digital-scientists.co.uk/pixel-perfect/" title="Pixel Perfect web development" rel="">Pixel Perfect web development</a> service.</span></p></div>
</div></div></div></div></div></div> ]]></content:encoded><pubDate>Wed, 15 Jan 2025 15:49:04 +0000</pubDate></item></channel></rss>