Let's get started!

preferred reply

Logo Footer

Office: 205 Durham Street (top floor)
Christchurch CBD 8011
PO Box 3871, Christchurch, NZ

Enquiries: 0800 30 8996
(03) 964 5305 - Reception
info@activatedesign.co.nz

Web Support:
(03) 964 1106 - Support
support@activehost.co.nz

Socials

Facebook X Instagram Vimeo
Activate Design Limited

Embracing Dark Mode: A Design Trend That's Here to Stay in 2024

In the ever-evolving landscape of web design, certain trends emerge that not only capture our attention but also become enduring elements shaping the digital experience. One such trend that has transitioned from being a novelty to a design staple is Dark Mode. As we step into 2024, the continued prominence of dark mode in web design stands as a testament to its appeal and functionality. In this blog, we'll delve into the reasons behind its enduring popularity, its impact on user experience and accessibility, and showcase websites that have adeptly embraced this sleek and modern aesthetic.

The Dark Mode Resurgence

Dark mode has come a long way from being a niche feature to becoming a mainstream design choice. Its resurgence can be attributed to its aesthetic appeal, which goes beyond being merely trendy. Dark mode offers users a visually immersive and comfortable experience, particularly in low-light conditions. As we investigate its continued prominence, we find that dark mode has become a design language that transcends individual preferences, impacting user engagement and satisfaction across various digital platforms.

Aesthetic Sophistication:

Dark mode isn't just a design preference; it's a statement of aesthetic sophistication. The muted colour palette creates a sense of elegance and modernity, providing a canvas that allows other elements to shine. Websites and applications adopting dark mode often exude a sleek and refined aesthetic that resonates with users seeking a contemporary and visually pleasing experience.

Alignment with Contemporary Design Sensibilities:

The visual appeal of dark mode aligns seamlessly with contemporary design sensibilities. As the digital landscape evolves, users gravitate towards interfaces that not only look good but also offer a harmonious visual experience. Dark mode's inherent allure caters to this preference, making it a design choice that resonates with modern audiences.

Impact on User Experience

1. Visual Comfort and Immersion

Dark mode's primary advantage lies in its ability to reduce eye strain and fatigue, especially during extended periods of screen time. The subdued contrast between text and background in dark mode minimises glare, providing a comfortable reading experience. Users find themselves immersed in content without the harshness associated with traditional light interfaces.

2. Enhancing Focus and Attention

Dark mode has proven effective in drawing attention to specific elements on a webpage. By reducing the prominence of background elements, dark mode directs focus towards the content, making it stand out more prominently. This enhances readability and ensures that users can effortlessly navigate through the interface.

3. Night-time Browsing Delight:

As users increasingly embrace night-time browsing habits, dark mode becomes a key facilitator of a delightful digital experience. The gentle glow of dark backgrounds reduces the overall brightness of screens, making it conducive to relaxed and comfortable browsing, especially in low-light environments.

Impact on Accessibility

1. Inclusivity in Design

The continued integration of dark mode across web platforms is contributing to a more inclusive design ethos. Users with visual impairments, light sensitivity, or certain visual disorders find dark mode to be a friendlier option. It ensures that digital experiences are accessible to a broader audience, fostering a sense of inclusivity in the online space.

2. Customisation for User Preferences

Dark mode isn't just about aesthetics; it's about empowering users with choice. Websites that offer a dark mode option allow users to tailor their experience based on personal preferences and visual comfort. This flexibility enhances accessibility, providing a more personalised interaction with digital content.

Impact on Energy Efficiency

Beyond its impact on the user experience, dark mode has also garnered attention for its potential in contributing to energy efficiency. On devices with OLED or AMOLED screens, dark mode reduces the energy consumption of individual pixels, leading to potential battery savings, which aligns with the growing emphasis on sustainable design practices.

Sustainability in Design:

The environmentally conscious shift towards sustainable design practices is influencing every aspect of the digital realm. Dark mode's potential to reduce energy consumption on devices with specific screen technologies aligns seamlessly with this sustainability drive. As users become more environmentally aware, the adoption of dark mode contributes to a collective effort towards a greener digital footprint.

Showcasing Dark Mode Done Right

1. YouTube: Cinematic Elegance

YouTube's implementation of dark mode adds a touch of cinematic elegance to the platform. The contrast between the dark background and vibrant video thumbnails enhances the overall viewing experience. This design choice not only aligns with user preferences but also contributes to prolonged engagement on the platform.

2. Slack: Seamless Collaboration

Slack's dark mode seamlessly integrates into the platform's collaborative environment. The muted colour palette ensures that messages and interactions take centre stage, creating a distraction-free workspace. This implementation enhances user focus and provides a visually polished interface for effective communication.

3. Reddit: Redefining Community Interaction

Reddit's dark mode goes beyond aesthetics, redefining how users interact with the platform. The subdued background allows the content and conversations to shine, creating a more immersive and focused browsing experience. This design choice reflects Reddit's commitment to user-centric design and enhancing the overall community engagement.

Conclusion:

As we navigate the digital realms of 2024, it's evident that dark mode has evolved from a passing trend to a design staple. Its continued prominence can be attributed to its multifaceted impact on user experience, accessibility, and even energy efficiency. Dark mode isn't merely a design choice; it's a commitment to creating digital experiences that are visually engaging, inclusive, and user-friendly. As web designers and users alike embrace this sleek and modern aesthetic, it's safe to say that dark mode is not just a trend – it's here to stay, defining the digital aesthetics of 2024 and beyond. So, as you scroll through your favourite websites, consider the impact of dark mode on your digital journey – a journey that's comfortable, immersive, and visually captivating.

Ready to immerse in the future of web design? Embrace dark mode for a sleek, comfortable, and visually captivating online experience. Get in contact today!

Posted in Responsive Design, Responsive Web Design, Mobile Apps, Graphic Design

A Guide to Choosing the Right Images for Your Website

When it comes to building a website, one crucial element that often gets overlooked is the selection of images. Images play a significant role in conveying your brand, engaging visitors, and making your website visually appealing. 

However, not just any image will do the job. To create a website that truly stands out, you need to carefully choose and optimise your images. In this blog, we'll walk you through the process of selecting the right images for your website and provide essential tips for image quality, formats, and licensing.

Understand Your Brand and Audience

Before you start looking for images, it's essential to have a clear understanding of your brand and your target audience.

What message do you want to convey?

What emotions or impressions should your website evoke? Knowing your brand's identity and your audience's preferences will guide you in selecting images that align with your website's purpose.

Prioritise Image Quality

Image quality is paramount. Blurry, pixelated, or low-resolution images can make your website look unprofessional. Always opt for high-quality images that are sharp and well-composed. If you're using photographs, make sure they are in focus and properly exposed.

Use Original Images When Possible

Original images can set your website apart from the competition. If you have the means to create custom images or hire a photographer, do so. Original images give your website a unique personality and help you avoid common stock photo clichés.

Optimise for Web Performance

Website speed is critical for user experience and SEO. Be sure to optimise your images for the web to minimise file size while maintaining quality. You can use image optimisation tools or plugins to help with this. Consider image compression and choose the appropriate file format.

Choose the Right File Format

JPEG, PNG, and GIF are the most common image file formats for the web. Each format has its strengths:

JPEG: Best for photographs and images with many colours. It offers high-quality compression and is ideal for visuals with intricate details.

PNG: Suitable for images with transparency or a need for high quality and sharpness. Great for logos, icons, and simple graphics.

GIF: Primarily used for animations, but it's not suitable for most photographs due to its limited colour palette.

Consider WebP for Web Optimisation

WebP is a modern image format developed by Google that offers significant advantages in terms of both image quality and file size. It's particularly effective for websites that prioritise speed and performance.

Here's why WebP should be on your radar:

Superior Compression: WebP employs advanced compression techniques, resulting in smaller file sizes without significant loss of image quality. This means faster loading times for your web pages and a better user experience.

Lossless and Lossy Options: WebP supports both lossless and lossy compression, giving you the flexibility to choose the level of compression that best suits your needs. You can use lossless compression for graphics and images where maintaining every detail is essential, while employing lossy compression for photographs and images with more forgiving quality requirements.

Transparency Support: Like PNG, WebP also supports transparency, making it an excellent choice for images that need to blend seamlessly with various backgrounds.

Wide Browser Support: While WebP was initially developed by Google, it is now supported by many web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge. For browsers that do not support WebP, fallbacks to other formats can be easily implemented.

To use WebP on your website, you can convert your existing images to the WebP format or export new images directly in WebP. Many image editing tools, such as Adobe Photoshop and online image converters, support WebP. Additionally, there are plugins and scripts available for popular content management systems like WordPress to automate the process.

When implementing WebP, don't forget to provide fallback formats (e.g., JPEG and PNG) for older browsers that do not support WebP. This ensures that your images remain accessible to all users, regardless of the browser they are using.

Licensing Matters

When using images from external sources, be mindful of licensing. There are various types of licenses, such as Creative Commons, royalty-free, and rights-managed. Always ensure you have the appropriate rights to use an image on your website. Websites like Unsplash, Pexels, and Shutterstock offer a wide range of images with different licensing options.

Consistency Is Key

Maintain a consistent visual style throughout your website. This includes image sizes, filters, and editing techniques. A coherent look and feel will help create a cohesive and professional web presence.

Test Responsiveness

Ensure your selected images are responsive and adapt well to different screen sizes and orientations. What looks great on a desktop may not work as effectively on a mobile device. Test your images on various devices to guarantee they remain visually pleasing and informative.

Accessibility

Accessibility is a fundamental aspect of web design and includes ensuring that everyone, including those with disabilities, can access and understand your website's content. When it comes to images, adding descriptive alternative text, or "alt text," is an essential accessibility practice.

Alt Text

Is a brief text description of an image that is read aloud by screen readers for users with visual impairments. 

It serves two main purposes:

Providing context: Alt text describes the content and purpose of the image, helping users understand its significance within the context of the page.

Ensuring accessibility: Alt text is crucial for compliance with web accessibility standards, such as WCAG (Web Content Accessibility Guidelines).

When writing alt text for your images, keep these best practices in mind:

Be descriptive but concise: Describe the image's content without being overly verbose. A good alt text balances detail with brevity.

Include essential information: If an image conveys vital information or serves a functional purpose (e.g., a button), ensure that the alt text reflects this.

Avoid "image of" or "photo of": Redundant phrases like "image of" or "photo of" can be omitted, as screen readers already identify the content as an image.

Be mindful of context: Consider the surrounding content to provide an alt text that fits seamlessly into the page's narrative.

By incorporating proper alt text for your images, you enhance the accessibility of your website, making it inclusive and user-friendly for all visitors.

Regularly Update and Refresh

Your website is a dynamic entity. Don't forget to update your images periodically to keep your content fresh and relevant. Regularly reviewing and refreshing your visuals is essential for maintaining a modern and engaging web presence.

Regularly reviewing and refreshing your visuals is essential for maintaining a modern and engaging web presence. Here are some considerations:

Product Updates: If you offer products or services, ensure that product images, descriptions, and pricing remain up-to-date. Removing outdated or discontinued items is equally important.

Seasonal Changes: For businesses that cater to different seasons or holidays, updating your imagery to reflect these changes adds a fresh and relevant touch to your website.

Relevance: Evaluate the relevance of your images over time. Are they still in sync with your brand's message and audience preferences? If not, consider updating them.

Optimising for Trends: Staying updated with design and image trends is a smart approach. Periodically assess whether your website's visuals align with the latest trends in web design.

Performance Monitoring: Regularly analyse your website's performance metrics, such as page load times and user engagement. If you notice issues, optimising your images further might be necessary.

A well-maintained website, complete with current and engaging imagery, can contribute to increased user engagement and a more positive impression of your brand.

In conclusion, choosing the right images for your website is a multi-faceted task that requires careful thought and attention to detail. By understanding your brand and audience, prioritising image quality, optimising for web performance, adhering to licensing regulations, and considering accessibility, you can create a visually stunning and user-friendly website that captivates your audience.

Posted in Marketing, Responsive Design, Responsive Web Design, Website Design, Web Design

Responsive Web Design: Optimising Experiences Across Devices

Responsive web design has become a fundamental approach in today's digital landscape. With the diverse range of devices and screen sizes available to users, it's crucial to create websites that can adapt seamlessly to different platforms. Responsive design ensures that websites look and function optimally, providing a consistent user experience across devices.

In this article, we will explore the principles and benefits of responsive web design. We will delve into the significance of adopting a mobile-first approach, the advantages it offers over separate mobile and desktop versions, and how user behaviour varies across devices. We will also touch upon the importance of testing and optimisation, as well as common challenges faced in implementing responsive design.

Join us as we dive into the world of responsive web design and discover how it enhances accessibility, user experience, and overall success in today's multi-device world.

What is Responsive Web Design?

Responsive web design is an approach to web development that aims to create websites capable of adapting and responding seamlessly to different devices and screen sizes. The principles of responsive design revolve around fluidity, flexibility, and content prioritisation.

3 Components of Responsive Web Design

1. Fluidity and Flexibility

Responsive design uses fluid grids and flexible layouts that allow elements on a web page to resize and reposition themselves based on the screen size of the device being used. This ensures that the content and design elements adjust proportionally, providing an optimal viewing experience.

2. Media Queries

Media queries are a fundamental component of responsive design. They allow developers to apply different styles and layout rules based on the characteristics of the device, such as screen width, resolution, and orientation. By using CSS media queries, specific styles can be targeted to create a tailored experience for each device.

3. Content Prioritisation

Responsive design involves organising and presenting content in a way that prioritises its importance and relevance across different devices. This ensures that users can access the most critical information without overwhelming them with unnecessary elements. Content prioritisation is achieved through thoughtful design decisions, such as adjusting font sizes, hiding non-essential elements, and repositioning content blocks.

Importance of Mobile-First Approach in Responsive Design

A mobile-first approach is a core principle of responsive web design, emphasising the importance of designing for mobile devices first and then progressively enhancing the experience for larger screens. This approach recognises the increasing dominance of mobile devices and the unique challenges they present.

Mobile usage is rapidly increasing: Statistics show that mobile devices account for a significant portion of internet traffic, with more people accessing websites on smartphones and tablets than on desktop computers. By prioritising mobile design, websites can cater to the growing mobile audience and provide an optimised experience.

User expectations: Mobile users have high expectations for a seamless and user-friendly experience on their devices. They expect websites to load quickly, have intuitive navigation, and display content in a readable format. By adopting a mobile-first approach, designers can ensure that the most critical features and content are prioritised for mobile users.

Google's mobile-first indexing: Google, the most popular search engine, has shifted to a mobile-first indexing approach, meaning that the mobile version of a website is considered the primary version for indexing and ranking. A mobile-first design not only improves user experience but also enhances search engine optimisation (SEO) by aligning with Google's indexing preferences.

5 Reasons You Need Responsive Design

1. Consistency across devices

Responsive design ensures a consistent brand experience and interface across different devices. Users can easily recognize and navigate a website, regardless of the device they use. This consistency builds trust and fosters familiarity, leading to better user engagement and conversions.

2. Cost and time efficiency

Developing and maintaining separate mobile and desktop versions of a website can be time-consuming and costly. Responsive design eliminates the need for duplicating efforts, as a single codebase can adapt to different devices. This saves development time, reduces maintenance efforts, and lowers overall costs.

3. Improved user experience

Responsive design optimises the user experience by adapting the content layout, font sizes, and navigation to suit each device's screen size and capabilities. Users can access information easily, read content comfortably, and interact intuitively, leading to higher satisfaction and engagement.

4. Better SEO performance

Having a responsive website eliminates the need for duplicate content across different versions, reducing the risk of content duplication penalties from search engines. Additionally, a responsive design provides a consistent URL structure, which consolidates the authority and ranking signals for SEO. As a result, responsive websites tend to perform better in search engine rankings.

5. Future-proofing

Technology is constantly evolving, and new devices with varying screen sizes and capabilities continue to emerge. Responsive design future-proofs websites by ensuring they can adapt and accommodate new devices without requiring significant redevelopment. It provides scalability and readiness for the evolving digital landscape.

How User Behaviour Varies Across Devices

User behaviour can significantly differ depending on the device they use. Understanding these variations is essential for delivering tailored experiences. Here are some key points to consider:

Device-specific tasks

Smartphones: Users often engage in quick, on-the-go activities like checking emails, messaging, and accessing social media.

Tablets: Users tend to consume media, play games, read e-books, and perform light productivity tasks.

Laptops/desktops: These devices are commonly used for complex tasks, work-related activities, and in-depth research.

Contextual factors

Location: Users may utilise smartphones more when they are outside their homes, whereas tablets and laptops are favoured in more comfortable settings.

Time of day: User behaviour may vary depending on the time of day, with smartphones being more prominent during commuting hours and evenings.

Content Consumption Patterns

Smaller screens: Smartphones require concise and easily scannable content, whereas tablets and laptops allow for more in-depth reading.

Visual content: Such as videos and images, may be more engaging on larger screens.

User Expectations

Users expect seamless transitions and consistency when switching between devices. They desire responsive websites that adapt to their chosen device's screen size and capabilities.

Using a Mobile-First Approach

Benefits of Starting the Design Process with Mobile Devices in Mind

Taking a mobile-first approach to design involves prioritising the needs and constraints of mobile users from the beginning. Here are the benefits of adopting a mobile-first mindset:

Focus on Core Content

By starting with mobile devices, designers are forced to prioritise the most essential content and functionality, resulting in streamlined and concise experiences.

Users on mobile devices often have limited attention spans and different goals compared to desktop users. Designing for mobile-first ensures that the core message is communicated effectively.

Improved Performance

Mobile devices typically have slower internet connections and less processing power than desktop computers.

Prioritising mobile optimisation leads to lighter and faster websites, benefiting users across all devices.

Progressive Enhancement

Starting with a mobile design allows for a foundation that can be enhanced with additional features and layout adjustments for larger screens.

This approach ensures a graceful progression, providing an optimal experience regardless of the device being used.

Common Challenges and Solutions

Dealing with Complex Layouts and Navigation Menus

Responsive design can pose challenges when dealing with complex layouts and navigation menus. Here are some solutions to address these challenges:

Simplify Navigation - Streamline navigation menus for smaller screens by using collapsible menus, hamburger icons, or off-canvas menus. Prioritise important navigation links and consider utilising breadcrumb navigation or sticky menus for improved accessibility.

Adaptive Layouts - Break down complex layouts into modular components that can be rearranged and stacked vertically on smaller screens. Utilise CSS grid or flexbox to create flexible and adaptive layouts that adjust to different screen sizes without sacrificing visual appeal.

Progressive disclosure - Implement progressive disclosure techniques to show or hide content based on user interactions, optimising the display of complex information on smaller screens. Use accordions, tabs, or expandable sections to allow users to reveal additional content as needed, keeping the initial layout uncluttered.

Responsive web design is crucial in our multi-device world. By adapting to different devices and screen sizes, it enhances user experience and accessibility. It prioritises fluidity, flexibility, and content optimisation.

In this article, we explored the benefits of a mobile-first approach, responsive design over separate versions, and user behaviour across devices. Testing, optimisation, and overcoming challenges were also discussed.

Responsive web design empowers businesses to deliver consistent experiences and adapt to the evolving digital landscape.

In summary, responsive design is a powerful tool for user-centric websites and long-term success in the digital realm.

Ready to unlock the power of responsive web design? Get in touch to start creating user-friendly, device-optimised websites today and revolutionise your online presence!

Posted in Responsive Design, Responsive Web Design, Web Design, Web Design Trends, Website Design

A Guide to eCommerce Web Design - Landing Page

The terms “landing page” and “product page” are often used interchangeably in the ecommerce sector, but they couldn’t be more different.  Landing pages are incredibly important. They provide the opportunity to target a specific audience as part of a larger marketing campaign.


This article will explain the differences between landing pages & product pages, how they play a role in ecommerce success, and how to design a landing page for high conversion rates and maximum revenue.


What is a Landing Page?

A landing page is a standalone page that a visitor “lands” on after clicking  a link in a specific marketing or advertising campaign. Optimised for high conversion rates and personalised to a particular audience segment, landing pages aim to accomplish just one goal in a campaign – move the customer further along in their journey. 


When a visitor clicks on a link they are directed to the landing page which provides exactly what the customer expected. For example if they clicked on a link that was provided in an email marketing campaign for 40% of a certain product or service the landing page would provide exactly that.

Wait… Isn’t that a Product Page?

Landing Page Versus Product Page


Although product pages are often used as landing pages, they are not the same. Landing pages are designed to move a particular customer or audience segment further along in the buying process whereas product pages are only intended for purchase decisions.  


Consider this: If you were to drive paid traffic from social media to a product page, the conversion rate would likely be extremely low and the campaign would be ineffective. But if users were instead driven to a landing page where they could submit their email for a discount code or more information, the conversion rate would likely be much higher down the road.


In fact, studies suggest that visitors who land directly on product pages are 72% more likely to bounce than those who land on a personalised landing page.


The landing page is designed to fulfil a single purpose for a single customer in a specific marketing campaign. Landing pages removes unnecessary distractions so that the customer reaches the desired goal and provides one offer.


The product page is designed to provide all the information about a product/service in a much broader sense to cater to a wider variety of visitors. Unlike the landing page, the product page provides a variety of different actions for the visitor to take with multiple CTA’s and links where more information can be found.

Why Does My Ecommerce Site Need a Landing Page?

To Increase Revenue

High-quality landing pages are guaranteed to increase your ecommerce revenue with higher conversion rates, increased AOV, and greater customer retention. 


You don’t want a customer looking for a beanie being directed to a category page for winter clothing as this does not show them exactly what they want. 

To Maximise Conversion Rate 

Landing pages should only have one CTA! There is only one goal for the landing page and that is to move the customer to the next phase of the customer journey, so you only need ONE CTA. 


Adding other links or information risks distracting the user from the goal, crushing your conversion rates and harming the campaign.

To Generate Leads

The more landing pages the more new leads will be generated! More landing pages = more conversion opportunities 


Companies with 10-15 landing pages see a 55% increase in leads shown in a study by Hubspot.

To Target Specific Audience Segments

Landing pages provide the opportunity to target a very specific audience. A landing page targeting Gen Z (1996 - 2010) would look completely different to a landing page target Gen X (1965 - 1980).


Personalized landing pages increase conversion rates because customers feel like they’re being catered to rather than just being sold products.


For example, a stationery brand would not want to target a full time worker with an offer catered to a student with a student discount or similar. Likewise a student between the ages of 18 - 21 doesn’t want to be targeted with a gold card offer.

To Learn More About Their Customer Behaviour

Landing pages provide a fantastic opportunity for A/B testing to find out exactly what works with a specific target market and what doesn't.


For example, two landing pages with the same offer could have slightly different headlines, CTAs, or images but one might convert far better than the other. The more you test, the more you’ll understand their behaviour. Remember to only test one variation at a time to avoid skewing results. 

What Makes a Great Landing Page?

Cut The Clutter, Design a Clean Page

Cut the clutter. Your landing page only has one goal, don’t over complicate it. Place the primary CTA so that it is clear and visible above the fold. Use colours that draw attention to the most important details on the page - CTA, Offer, Offer End Date 


Sell your high-quality product with high-quality content

The landing pages on your Ecommerce website are like windows in the shop. Customers are more likely to enter a store with a 50% off sign in the window than a shop with no sale or decor.


Use high quality images which draw your target customer in and allude to the quality of your product/service.


Clearly Define the CTA

Your CTA button is the most important button on the landing page. The visitor shouldn’t have to put any effort into finding it. Use contrasting colours to make it easy to spot and copy that makes it irresistible to click.


Focus On Your Target Audience

One of the features that differentiates landing pages from other pages on your ecommerce website is that landing pages are created for specific target markets.


The value proposition on the landing page needs to be crafted specifically for the audience segment being targeted.


Offer Social Proof & Case Studies

Showcase the best reviews from customers to increase social proof and build trust with the target audience to make the offer seem more desirable.

How Do You Design a Landing Page?

Landing Page Structure


Write a great headline - the visitor to your landing page should be instantly interested in your offer. Make it irresistible yet concise.

Add high-quality images & graphics  - this is your opportunity to really make the visitor feel like they are having a personalised experience. Use the high quality images that you cannot use in general marketing!

Center the content around one CTA - the landing page is for one offer so use one clear CTA, they either want it or they don’t.

Write in short, concise sentences - you should include a brief yet powerful description that entices the visitor to click on the CTA.

Add social share buttons (If Applicable) - if it makes sense for the landing page, include social sharing buttons so that visitors can share the offer with their friends and family. Be careful though, these buttons could distract users from the main goal. 

Landing Page Layout

Most visitors to your landing page won't read everything you’ve written so make sure to make the most important parts stand out!

Keep the most important information above the fold… this means anything that a visitor NEEDS to see should be available on the screen without having to scroll down.

A visitor to your landing page should be able easily find what the offer is and the CTA in less than five seconds.

Only have one offer per landing page! Landing pages that use more than one offer/CTA get 255% fewer leads than landing pages with one offer.


How Can I Improve My Landing page?

A/B Testing

Due to the unique ability of a landing page to be shown to a very specific audience, there is a lot of potential for A/B testing to find out what works and what doesn't. 

This means having the same offer but two different page designs or layouts to figure out what works best for that specific audience.

Irresistible Offers

Even if the landing page is extremely well designed using high quality images and catchy on brand copy if the offer isn't irresistible you can’t expect to convert.


An offer is irresistible when there is a limited amount of time or number available. Another way to make an offer irresistible is for the offer itself to be marketed as a once in a lifetime never again will this offer be available again.


It is the irresistible offer on your landing page which at the end of the day will create a sense of urgency in the visitor and lead to conversion.

Creative Copy and Images


Using your brand voice and being creative in your copywriting and CTA’s can help significantly increase conversions. Simply adding personality by changing the copy on a CTA from “buy now” to “I want it” can make all the difference and liven up your landing page.


The same goes for the images your use on your landing page. Stay away from manufacturers' photos and take your own. The landing page is aimed at a specific target market so use photos of someone within the target marketing using your product or service.

In Conclusion

Landing pages are important, so make sure that you are making the most of them on your ecommerce site. The more landing pages you have the more opportunity there is for new leads, so do not hesitate to add new ones wherever possible to cater to specific audiences. 


 

Posted in Marketing, Responsive Design, Responsive Web Design, Web Design, Web Design Trends, Website Design

How responsive web design can help your business

responsive web designThe amount of websites that utilise responsive web design is growing with the increasing amount of devices people can access the web from. We want to tell you all about responsive web design so that your website doesn’t get left behind in the dust of this rapidly adopted web designtrend. With people using laptops, tablets, smartphones and varying sized desktop screens, it is important to ensure that your website responds to the technology it is accessed from. A non-responsive website sticks out like a sore thumb in the quickly evolving web-world.

Responsive web design is simply the ability of a website to change its format to correspond to the device it is accessed from. On a more complicated level the tool can enable web designers to provide different content for different users; for example, by accessing the user location a website can tailor information to them on a geographical basis.

The growth in smart phones means that more often people are using websites on smaller screens and if the website is non-responsive it makes navigation around said website extremely difficult. For example; a traditional fixed width screen can cause a user to have to scroll horizontally to view content that was intended to be seen at first sight. If you can believe it, the current attention span for humans using the web is now less than a goldfish; meaning webpages must be both engaging and easy to use to be effective . A non-responsive, ill-fitting format will cause frustration and repel many users, meaning that the crucial messages websites need to transmit to users are not received.

If you don’t believe us, check out your websites stats on Google analytics; you can find out how many users are accessing your website via their cell phones by selecting the ‘Audience’ option, then ‘Mobile’. The time is now to change your website design as the amount of people accessing the web from different devices is only going to increase in this technology driven world.

The good news is, transforming your website into a responsive design is not as complicated as it sounds! There are two options for implementing responsive web design; creating an adaptive website with multiple fixed width layouts set for common devices, or, using multiple fluid grid layouts to achieve a truly responsive user experience. Most web designers will use fixed width layouts if they want more control over how the website will look on different screen sizes, however, this approach does not respond to change in browser size - a common practice of web-users who want to view multiple browser windows at the same time. Fluid grid layouts work on the basis of proportions rather than pixels and the content changes according to browser size. Web content is given a percentage of the browser or screen to take up; as the size of the viewing window changes the content continues to take up it’s assigned percentage of the browser responding to it’s viewing environment. You can even utilise both concepts with a mixed approach to responsive design; having some fixed width layouts for certain devices and some fluid grid layouts for others.

In implementing responsive design there are a few things to think about. The first is that graphics can cause a website to be slower to load on certain devices, so when designing a web-platform to be accessed from cell-phones or tablets with lower capability, it might be wiser to remove or downsize on images, graphics and advertisements. The popularity of touch screens means that there are now two navigation routes to consider; touch and mouse. What may work well for the click of a mouse could be a nightmare for somebody with not-so dainty digits.

It’s that simple, and with the populations’ increasing reliance on technology and high-speed culture, being able to access the information you need, on the go, is a luxury many aren’t willing to live without. The integration of laptops, tablets and smartphones into everyday life has made Responsive Design a necessity for websites that want universal exposure.

Now you may be thinking all this talk of cell-phone and tablet usage means that you should be thinking about creating an application, and this is indeed something to consider. Our take on this decision is that a responsive website may be the better option in terms of universal compatibility. This is because the application world is fickle; often certain brands will only work with apps from certain platforms. With the iOS and android faceoff going down, to allow both apple and android users access to your app, double the work may be required. Having a responsive website guarantees that all devices that have access to the Internet will be able to use your site. Wonderful! No more taking sides.

While vamping up your website it might be a good idea to consider including some other current web design trends. Long scrolling is the new thing in website navigation; the effort exerted through clicking can sometimes be too much! Websites that take the user on an intuitive narrative journey through scrolling; up, down and side-to-side are sought after and savvy. Where the bold and bright colours may have been hip and eye catching yesterday tomorrows request is light and subtle hues. With so much time spent staring at a screen nowadays it can be nice to find yourself looking at a website that is not an assault on the senses. Lastly to get personality into a website and make meaningful connections add simple animations - you might even make somebody laugh!

Responsive web design is a win-win tool as it means ease of use for users and better communication from website beneficiaries.

Posted in Responsive Design, Website Design

responsive web design for future business

The late/great Albert Einstein once said “I never think about the future, it comes soon enough.” True enough for some, Al, but when it comes to web design and business, we think it’s smart and necessary to think about the future in order to succeed. As we all know, change happens fast, and in the worlds of web design, business and technology, it happens even faster. To be good web designers and business operators, we need to stay on trend and stay current. To be excellent at what we do, it’s necessary to identify trends before they hit.  mobile web designs

With the advance in mobile technology in the last few years, it’s no surprise that more and more people are using their mobile devices to access the Internet. How is it then that the vast majority of businesses are still not mobile user-friendly? Can I be frank? If you’re a business owner and you don’t have an online presence that is accessible via mobile you’re missing out on major business opportunities. There’s nothing complex about having a mobile presence. The answer is so simple:Responsive Web Design. So, what is it exactly?

Responsive web design is a web design style that crafts websites with the aim of providing an optimal viewing experience. These websites are easy to read and even easier to navigate across a wide range of devices by being coded in a way that uses a minimum of resizing, panning and scrolling, thus making it a very user-friendly style. Happy users are happy customers and happy customers spend more money. This is what we call conversion. So, how do you get the most out of your responsive design?

Ring! Ring!

When it comes to creating a mobile website, you have two options: Responsive Design and Mobile Templates. Responsive design is easier in that it requires only one website that is coded in order to adapt to all screen sizes and therefore accessible through multiple devices. Mobile templates aren’t as friendly. They require an entirely separate mobile-only website. You can see why this is a problem! It’s more work, more money and more hassle.

Consider this:

  • More people are using their mobiles for Google searches
  • 25% of Internet users access it on a mobile device
  • 25% of all emails are opened on mobile phones
  • 61% of people have a better opinion of brands when they offer a good mobile experience

Keeping customers happy is paramount to a successful business so providing a positive user experience should be a top priority. If someone lands on your mobile website and doesn’t find what they’re looking for easily they’re likely to leave your site for your competitor. A positive experience on mobile devices can translate into more profits as the customer is 67% more likely to purchase your services or products if it’s fast and easy to do so.

Keeping Google Happy

It’s a well-known fact that Google prefers responsive web design over mobile templates. Just like your customers, Google wants to be able to navigate your site and organise the content with ease. With responsive design your site has one URL and the same HTML across any device making it easier for users to share and engage with the content compared to sites with different pages for mobile and desktop users. Google knows that unhappy customers will go to other sites which then results in an increase in bounce rates and lower ranking on mobile searches. Beware: Google’s external link algorithm then gets cranky and this can have serious consequences for your SEO.

Back to the Future

One of the best characteristics of responsive design is that the size of the template is designed based on screen size and not specific devices. Technology is in a state of flux at all times. New devices are dreamed up and created faster than you can say “Eight Track Player”. Your responsive website won’t be made obsolete with the advent of new technology. It will stay current and beautiful which saves you money because you won’t need to tweak it. Speaking of money…

Responsive Design: How Much Does It Cost?

Depending on your current website, changing it to a responsive design may cost a few hundred dollars or a few thousand. That’s assuming the existing design lends itself to becoming responsive. If you haven’t redesigned your website in the last several years it’s quite probable that you’ll need to go through a complete redesign process. As designers we know that the cost depends on how much work you want to get done.  If you’re interested in converting your existing site to responsive design, we can help. Just get in touch with one of our designers and they can talk you through the process. If you’re looking to stay competitive in the marketplace, you’re going to have to make the leap to responsive design.

Call me: The Future Is Mobile

Going ‘responsive’ can present challenges for website owners but without a mobile-friendly website the future of your online presence is bleak. If you’re not providing a mobile-friendly experience for your customers, they’ll bounce off your website and go to your competitor whose website is easier to use. Haven’t you ever done that before yourself? I know I have. The future, as we all know, is mobile. People prefer their mobile devices over desktop and laptop computers. Consider this fun fact: by 2017 5 billion people will use mobile phones. Can you afford to stay in the Dark Ages of web design? Nope.

There are, however, some exceptions to the rule:

  1. Your business doesn’t depend on your website to operate. (Lucky you!)
  2. Your business has absolutely no competitors in the marketplace. (Um, really?!)
  3. You’re totally familiar with responsive design, you know that it’s not the right fit for your business and you have an alternative mobile strategy. (Fair enough.)

If any of these 3 points resonate with you, then you have nothing to worry about. If not, get in touch. We’re here and we’re ready to update your website to be responsive. Welcome to the future.

 

Posted in Responsive Design, Website Design

Recent articles

Categories