Your Guide To Converting Websites To Responsive Web Design

If you haven’t noticed,  website design terms have largely revolved around 3 keywords:

  • Mobile-first
  • Responsive
  • Desktop site

So what’s the difference? Thank us because we’re gonna help everyone out by sharing what responsive web design is and how does a responsive web design benefit you.

What is a desktop design? 

A website set up to look best in either one of the following dimensions – 1024 x 768, 1280 x 1024, 1920 x 1080… which is large for a tiny mobile device screen. It can be feature-rich but it’s going to be hard seeing everything if you’re viewing it from an iPhone screen. Let’s not imagine the clutter, ugh. 

What is a mobile-first design?

A website set up to look best on smartphones or portable devices. Cheaper and functional if your main target audience is viewing your site on mobile devices. Best part? It pleases the search engines because Google looks at your mobile design, first. As literal as it sounds. Bingo!

What is a responsive web design?

A website that optimises and responds to whatever device you are viewing the site on regardless of whether desktop or on a smartphone. Now, this is where the magic happens! 

If you’ve guessed it by now, having a responsive website design is, of course, akin to having your cake and being able to eat it. You get the best of both worlds – a site that adjusts its buttons, layout and amount of information so you don’t have to pinch and zoom on your small iPhone or Android screen like a caveman.

It’s the 21st-century guys

Why does one need a responsive website design then you might ask, well, it is to provide viewers whether on mobile or desktop, the best user experience possible when using your site. Spending so much money on your website to make it functional and aesthetic as possible, wouldn’t you want your viewers to enjoy that? Maybe even make a purchase or subscribe while they’re on the site.

Big or small? 

How does a responsive web design react accordingly you might also ask? Well, it starts in the layout. Large, touch-friendly Call-to-Action buttons allow you to easily click on menus, “read more” and “buy now” and are signposts for viewers to understand where to go next. No more angrily pressing the screen in hopes that you might hit the right button sometime this year.

Next up, depending on the layout and amount of information presented to the viewer, it can either encourage them to read more or smash their phone in frustration. Strategically minimising the number of icons, information or summarising text into a sentence can go a long way when users want their information quickly and at their convenience.  

A journey of a thousand miles begins with a single step

Lastly, an optimised user experience for a desktop and mobile site can increase your conversion rate too. Do your audiences want to read more on desktop or do they want to quickly buy items on your mobile site and bugger off? One of the ways to improve your user journey is to understand your audience wants and needs like their pain points/frustrations. Start from what they don’t want.

Play the Google game

Changing from mobile or desktop to a responsive web design is a no-brainer. By ranking higher on google search because of your user-friendly site, this leads to more website traffic which ultimately leads to revenue for your company.

Now that we’ve cleared the air on those three terms, understanding what your needs are will be your next step. If you think you know what you need, drop us a message and we’ll be more than happy to work with you.

4 Tell-tale Signs of Bad UX in Website Design

Is User Experience (UX) important for website design? If you value how visitors on your website feel and navigate to the payment page, then yes. You want potential customers to have a painless experience throughout their journey with you and bad UX is a hindrance to that.

Good UX on web design in Malaysia is tantamount to having good sales staff to increase sales and provide good customer experience, while bad UX and sales staff turn your customers away. 

Achieve the UX worthy of the digital adage by identifying these 4 tell-tale signs that you need to do something about the UX of your site:

Slow Loading Speed

Not all speed kills. In this situation, not having speed will kill your brand.

Before customers enter your website, they need to load it up first and no one waits beyond the maximum loading time of 5 seconds in the 4G era.  Fancy designs and visuals are great but if it comes at the cost of your loading speed, then steer clear of it. 

Put some thought into the various aspects of your site and optimise them to improve the loading speed of it. From compressing your programming files to optimising your images, there are a couple of ways to go about improving this aspect of UX for your site. 

High Bounce Rates

Bad UX is frustrating and it’s evident in the statistics of your website, particularly your bounce rates. High bounce rates are great tells of bad UX and indicative of users getting out as soon as they see your website design.

Messy layouts, unfriendly navigation or outdated designs can easily send your potential leads off and running. 

Take a look at your Google Analytics and monitor that statistic regularly. After all, high bounce rates can be extremely destructive to your search engine rankings and the work you put in to improve your Search Engine Optimisation (SEO).

Want your SERP to go up the rankings? Consider looking for an expert SEO agency to take a look at it. 

Pop-Up Ads

Repeat after me, I will not use pop-up ads. No… just, no.

Imagine your customers trying to purchase a product and being stopped by pop-up ads continuously. At this point, it’s more likely they will ‘x’ off your website then following through with the payment. 

Unnecessary pop-up ads are so last century, and they definitely don’t belong in this decade’s website design. Not only do they take-up loading speeds, but they’re also extremely disruptive to user experience as illustrated above. 

If you’re going to do a pop-up ad, you may as well place it within your web design itself. 

Low Session Duration

Like we said, bad UX is offputting and causes a lot of distress to users. As a result, users looking to achieve something on your website would look to spend as little time as possible on the page. 

Bad UX affects the readability of content on your site, which means users are a lot less inclined to look through them and they’re less likely to be convinced by your site. 

The development of a single site requires the work of many – a copywriter, a website designer, a web developer. Don’t let the lack of UI/UX cause their efforts to go unappreciated. 

Choose UI/UX Over Fancy

UI/UX principles have to be adhered to for web design in the digital era. Although it’s okay to jazz it up once in a while, it’s superfluous if users are unable to enjoy it. 

For that reason and those already mentioned above, we recommend that you engage only a web design company that is based on UI/UX principles. That’s if you want an effective website development in Singapore. 

It’s time to speak to an experienced web design agency with UI/UX designers today!

browser pattern - A Web Component with Different HTML for Desktop and Mobile

A Web Component with Different HTML for Desktop and Mobile

Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.

One code snippet that caught my eye was a simple way to design a component that renders different HTML depending on the screen size.

<div class="ad">
  <template class="ad__mobile">
    // Mobile ad HTML code with inline script
  </template>
  <template class="ad__desktop">
    // Desktop ad HTML code with inline script
  </template>
  <script>
    const isMobile = matchMedia('(max-device-width: 20em)').matches;
    const ad = document.currentScript.closest('.ad');
    const content = ad
      .querySelector(isMobile ? '.ad__mobile' : '.ad__desktop')
      .content;
    
    ad.appendChild(document.importNode(content, true));
  </script>
</div> 

Clever. Although note that Christian ends up going a totally different route in the article.

Here’s that same code where I use a custom element and move the JavaScript to JavaScript just ‘cuz.

See the Pen
A Web Component with Different HTML for Desktop and Mobile
by Chris Coyier (@chriscoyier)
on CodePen.

vie import component - Thinking Through Styling Options for Web Components

Thinking Through Styling Options for Web Components

Where do you put styles in web components?

I’m assuming that we’re using the Shadow DOM here as, to me, that’s one of the big draws of a web component: a platform thing that is a uniquely powerful thing that only the platform can do. So this is about defining styles for a web component in a don’t-leak-out way, and less so a way to get global styles to leak in (although that’s very interesting as well, which can be done via custom properties which we’ll look at later in the article).

If you’re building the template inside the JavaScript — which is nice because of template literals and how we can sprinkle our data into the template nicely — you need access to those styles in JavaScript.

const template = `
  <style>${styles}</style>
  <div class="${class}">
    <h2>${title}</h2>
    ${content}
  </div>
`;

Where does that style variable come from? Maybe also a template literal?

const style = `
  :host {
    background: white;
  }
  h2 {
    font: 900 1.5rem/1.1 -system-ui, sans-serif;
  }
`;

I guess that’s fine, but it makes for a big messy block of code just dunked somewhere in the class where you’re trying to build this web component.

Another way is to <template> the template and make a <style> block part of it.

<template id="card-template">
  <style>
    :host {
      background: white;
    }
    h2 {
      font: 900 1.5rem/1.1 -system-ui, sans-serif;
    }
  </style>

  <div id="card-hook">
    <h2 id="title-hook"></h2>
    <p id="desc-hook"></p>
  </div>
</template>

I can see the appeal with this because it keeps HTML in HTML. What I don’t love about it is that you have to do a bunch of manual shadowRoot.querySelector("#title-hook").innerHTML = myData.title; work in order to flesh out that template. That doesn’t feel like a convenient template. I also don’t love that you need to just chuck this template somewhere in your HTML. Where? I dunno. Just chuck it in there. Chuck it.

The CSS is moved out of the JavaScript too, but it just moved from one awkward location to another.

If we wanted to keep the CSS in a CSS file, we can sorta do that like this:

<template id="card-template">
  <style>
    @import "/css/components/card.css";
  </style>

  <div id="card-hook">
    <h2 id="title-hook"></h2>
    <p id="desc-hook"></p>
  </div>
</template>

(The use of <link rel="import" type="css" href=""> is deprecated, apparently.)

Now we have @import which is an extra HTTP Request, and notorious for being a performance hit. An article by Steven Lambert says it clocked in at half a second slower. Not ideal. I don’t suppose it would be much better to do this instead:

class MyComponent extends HTMLElement {
    
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    fetch('/css/components/card.css')
      .then(response => response.text())
      .then(data => {
        let node = document.createElement('style');
        node.innerHTML = data;
        document.body.appendChild(node);
      });
  }

  // ...
}

Seems like that would potentially be a Flash-of-Unstyled-Web-Component? I guess I should get off my butt and test it.

Now that I’m digging into this again, it seems like ::part has gotten some steam (explainer). So I can do…

const template = `
  <div part="card">
    <h2>${title}</h2>
    ${content}
  </div>
`;

…then write styles in a global stylesheet that only apply inside that Shadow DOM, like:

my-card::part(card) {
  background: black;
  color: white;
}

…which has a smidge of browser support, but maybe not enough?

These “part” selectors can only touch the exact element it’s connected to. You’d have to do all your styling by applying a part name to every single DOM node and then styling each entirely on its own. That’s no fun, particularly because the appeal of the Shadow DOM is this isolated styling environment in which we’re supposed to be able to write looser CSS selectors and not be worried our h2 { } style is going to leak all over the place.

Looks like if native CSS modules becomes a thing, that will be the most helpful thing that could happen.

import styles from './styles.css';

class MyElement extends HTMLElement {
  constructor() {
    this.attachShadow({mode: open});
    this.shadowRoot.adoptedStyleSheets = [styles];
  }
}

I’m not sure, however, if this is any sort of performance boost. Seems like it would be a wash between this and @import. I have to say I prefer the clarity and syntax with native CSS modules. It’s nice to be writing JavaScript when working with JavaScript.

Constructable Stylesheets also look helpful for sharing a stylesheet across multiple components. But the CSS modules approach looks like it could also do that since the stylesheet has already become a variable at that point.

bright plaid - Third-Party Components at Their Best

Third-Party Components at Their Best

I’m a fan of the componentization of the web. I think it’s a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party for a moment. That is, components that you just use, rather than components that you build yourself as part of your site’s unique setup.

What makes a third-party component good? My favorite attribute of a third-party component is when it takes something hard and makes it easy. Particularly things that recognize and properly handle nuances, or things that you might not even know enough about to get right.

Perhaps you use some component that does pop-up contextual menus for you. It might perform browser edge detection, such as ensuring the menu never appears cut off or off-screen. That’s a tricky little bit of programming that you might not get right if you did it yourself — or even forget to do.

I think of the <Link /> component that React Router has or what’s used on Gatsby sites. It automatically injects aria-current="page" for you on the links when you’re on that page. You can and probably should use that for a styling hook! And you probably would have forgotten to program that if you were handling your own links.

In that same vein, Reach UI Tabs have rigorous accessibility baked into them that you probably wouldn’t get right if you hand-rolled them. This React image component does all sorts of stuff that is relatively difficult to pull off with images, like the complex responsive images syntax, lazy loading, placeholders, etc. This is, in a sense, handing you best practices for “free.”

Here’s a table library that doesn’t even touch UI for you, and instead focuses on other needs you’re likely to have with tables, which is another fascinating approach.

Anyway! Here’s what y’all said when I was asking about this. What makes a third-party component awesome? What do the best of them do? (besides the obvious, like good docs and good accessibility)? Some of these might be at-odds. I’m just listing what people said they like.

  • Plug-and-play. It should “just work” with minimal config.
  • Lots of editable demos
  • Highly configurable
  • “White label” styling. Don’t bring too strong of design choices.
  • Styled via regular CSS so you can BYO own styling tools
  • Fast
  • Small
  • Is installable via a package manager
  • Can be manually instantiated
  • Can be given a DOM node where it can go
  • Follows a useful versioning scheme
  • Is manintained, particularly for security
  • Has a public roadmap
  • Is framework-agnostic
  • Doesn’t have other dependencies
  • Uses intuitive naming conventions
  • Supports internationalization
  • Has lots of tests

Anything you’d add to that list?

Hamburger ☰ Heaven ★ Stellify

 

While exploring unicode symbols, I discovered that the three-bar icon people now see as the hamburger menu also exists in the symbol table as something called the “trigram for heaven” ☰.

It’s one of eight signs in Taoist cosmology, called the Bagua or Pa Qua, and found in the I Ching. If you’ve seen an octagon-shaped piece of Chinese decor with several dashed lines, usually around a yin yang symbol, those are actually the trigrams in a bagua diagram, either in “Earlier Heaven” or the “Later Heaven” arrangement.

https://live.staticflickr.com/1336/881672136_d89ae1349e_c.jpgBagua by Kenneth Gaerlan

Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.

The bagua diagram is used everywhere, from astronomy to anatomy, including feng shui. Each one also corresponds to other symbolic categories, e.g. the heaven trigram also means: the Creative, (natural) force, northwest, father, head, strong / persisting, creative, and horse.

Notes on implementation

So jumping back to design & development: the other trigrams and their concepts might just be interesting enough to spark some alternatives in your work, like how the “hamburger” metaphor has cooked up kebabs, doners, bento boxes, and meatballs:

And other tasty treats like cookies and cakes:

As a unicode symbol, it might not render in super old devices. A safer bet would be the similar-looking mathematical symbol for “identical to” ≡.

You can also flex with CSS shadows or gradients. These days, an SVG image is usually the way to go.

Not so universal meaning

But all these have the standard reminder that icons alone, unlabeled, aren’t always more understandable on their own, and other cultures can interpret them differently. Here’s what happened to Amazon in India when it came to graphically representing search, or the idea of adding to a virtual cart:

To make its screen easier to understand, Amazon added icons for books or electronics or beauty products. When it figured out customers didn’t know the magnifying glass was a standard symbol for search—some were calling it the ping-pong paddle—it added pop-up descriptions and recommendations in Hindi.

Then there’s the “Add to Cart” button. “It is not just about the translation but about the mental model of dropping something into the cart,” said Zahid Khan, senior manager of customer experience at Amazon India. “There are lots of places in India where customers have never even seen a cart. We might have to change that into ‘bag.’”

Eric Bellman, Wall Street Journal

And here’s what the Japanese government is changing for the tourist influx at the Tokyo 2020 Olympics:

Old and new icons of the onsen

The symbol could be misinterpreted by foreigners as the mark of a restaurant that serves hot food. To avoid confusion, three people have been added to the onsen symbol, to clarify the fact that the image is used to represent hot spring bathing.

Oona McGee, SoraNews24

What’s in a nickname

If you jump back even further: 30 years ago the three-line icon was already around, but there was a different nickname for it: the “air vent” icon. And it worked well as a pun, because the UI consisted of windows:

Xerox software user interface with the air vent icon

“At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’,” says [Norm] Cox. “This usually got a chuckle, and made the symbol more memorable and friendly.”

BBC News

So now we have at least 4 different sources for the metaphor:

  1. Hamburger 🍔
  2. Heaven ㆝
  3. Mathematical equality 🧮
  4. Air vent 💨

Imagine how much things in design and technology would be different if time or influence were tweaked just a bit. We could’ve been calling it the “heaven menu”.

 

igor miske JVSgcV8 vb4 unsplash (2) - Getting Started with Front End Testing — JavaScript January

Getting Started with Front End Testing — JavaScript January

You can also check multiple pages and screen sizes and run multiple tests by adding to the promise array in your test function. You can define the viewport for each test (to test various screen sizes) different pages of your application.

const results = await Promise.all([
        pa11y(`http://localhost:65519`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$/results/pa11y_home_desktop.png`,
            viewport: {
                width: 1280,
                height: 1024,
            },
        }),
        pa11y(`http://localhost:65519`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$/results/pa11y_home_mobile.png`,
            viewport: {
                width: 320,
                height: 480,
                isMobile: true,
            },
        }),
        pa11y(`http://localhost:65519/blog-post`, {
            browser: browser,
            standard: 'WCAG2AAA',
            screenCapture: `$
        ),
    ])

Visual Regression Testing

Even if you’re the only developer working on a project, it’s still easy to make code changes that bleed into other areas of your application (I’ve been know to do that at times 😬). Visual regression testing can help stop that, and highlight any areas of your application that are visually different from before.

BackstopJS is a good tool for running this, because it gives you starter config so you can hit the ground running. If you install backstop globally (npm install -g backstopjs), you can run their initialization command (backstop init) in your project folder and it’ll create all the files for you, including the backstop.json config file.

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "BackstopJS Homepage",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "http://localhost:65519",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold": 0.1,
      "requireSameDimensions": true
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": [
    "browser"
  ],
  "engine": "puppeteer",
  "engineOptions": {
    "args": [
      "--no-sandbox"
    ]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

Again, if you’re using WSL, add the executable path the to config options in backstop.json

"engine": "puppeteer",
  "engineOptions": {
    "args": [
      "--no-sandbox"
    ],
    "executablePath": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  },

Run the test using the backstop test command and it will save the results in the backstop_data/bitmaps_test folder under a separate folder for each test and launch a HTML report with the results. The first time you run the test it will fail as it doesn’t have anything to compare it to, set the default screenshots by running backstop approve and run the test again.

stripe accessible colors - The Best Color Functions in CSS?

The Best Color Functions in CSS?

I’ve said before that HSL is the best color format we have. Most of us aren’t like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it.

hsl(120, 100%, 40%)

Hue isn’t intuitive, but it’s not that weird. You take a trip around the color wheel from 0 to 360. Saturation is more obvious where 0% has all the color sucked out, like grayscale, and 100% is fully rich color at that hue. Lightness is “normal” at 50% and adds white or black as you go toward 100% and 0%, respectively. I’m sure that’s not the correct scientific or technical way of explaining it, but that’s the brain logic.

There are still issues with using HSL, which Brian Kardell explains in depth. I’m far from a color expert, but I think I see what Brian (and Adam) are saying in that article. Say you have three different colors and they all have the exact same lightness in HSL. That doesn’t mean they are all actually the same lightness. That’s kinda weird, particularly when you’re using this color format as part of a system of colors.

The good news is that there are color features already specced as a CSS Level 4 module that help with this: Lab and LCH. Check out the example from Adam where the colors in Lab have values that reflect their actual lightness much more accurately to how we perceive it.

Brian:

There are color spaces like Lab and LCH which deal with the full spectrum and have qualities like perceptual uniformness. Thus, if we want great color functions for use in real design systems everyone seems to agree that having support to do said math in the Lab/LCH color spaces is the ideal enabling feature.

In the bug ticket for Chrome, Tab thinks these would be almost trivial to implement.

Note that lab()/lch()/gray() can all be eagerly converted into our existing color infrastructure; they don’t introduce any fundamentally new concepts, they’re just a better way to specify colors, more closely associated with how our eyes actually function rather than being closely tied to how rgb pixels function.

The conversion functions to turn it into rgb are a little bit of code, but it’s just some exponentials and a bit of matrix multiplication, and it’s well-documented in the spec.

This should be a GoodFirstBug sort of thing, I think.

Free Address Geocoding & Maps API

{
    "data": [
        {
            "latitude": 40.755884,
            "longitude": -73.978504,
            "name": "565 5 Ave",
            "type": "address",
            "number": "565",
            "street": "5 Ave",
            "postal_code": "10017",
            "confidence": 1,
            "region": "New York",
            "region_code": "NY",
            "administrative_area": null,
            "neighbourhood": "Midtown East",
            "country": "United States",
            "country_code": "USA",
            "label": "565 5 Ave, Manhattan, New York, NY, USA",
            "map_url": "https://map.positionstack.com/export/embed.html?bbox=-73.978004,40.756384,-73.979004,40.755384&layer=mapnik&marker=40.755884,-73.978504",
            "country_module": {
                "latitude": "39.44325637817383",
                "longitude": "-98.95733642578125",
                "common_name": "United States",
                "official_name": "United States of America",
                "capital": "Washington D.C.",
                "flag": "🇺🇸",
                "area": 9372610,
                "landlocked": false,
                "independent": true,
                "global": {
                    "alpha2": "US",
                    "alpha3": "USA",
                    "numeric_code": "840",
                    "region": "Americas",
                    "subregion": "Northern America",
                    "region_code": "019",
                    "subregion_code": "021",
                    "world_region": "AMER",
                    "continent_name": "North America",
                    "continent_code": "NA"
                },
                "dial": {
                    "calling_code": "1",
                    "national_prefix": "1",
                    "international_prefix": "011"
                },
                "currencies": [
                    {
                        "symbol": "$",
                        "code": "USD",
                        "name": "US Dollar",
                        "numeric": 840,
                        "minor_unit": 2
                    }
                ],
                "languages": {
                    "eng": "English"
                }
            },
            "sun_module": {
                "rise": {
                    "time": 1575633924,
                    "astronomical": 1575628051,
                    "civil": 1575632092,
                    "nautical": 1575630040
                },
                "set": {
                    "time": 1575667704,
                    "astronomical": 1575673576,
                    "civil": 1575669535,
                    "nautical": 1575671587
                },
                "transit": 1575650814
            },
            "timezone_module": {
                "name": "America/New_York",
                "offset_sec": -18000,
                "offset_string": "-05:00"
            }
        ]
    }
}

Digital Marketing Cheatsheet For Your Website Design Revamp

Great job on getting your business a brand new look, but now what? For all that effort you’ve put into the revamp of your website design, it wouldn’t mean a thing if no one’s noticing it. 

To successfully put your website revamp on the map, you need a full-fledged digital marketing plan that covers a wide range of platforms and content mediums, pushing it out to your target audience.

Crafting a digital marketing campaign for a web design revamp takes work, but here’s how to make you can make it a little easier:

1. Optimise Your SEO

When it comes to website and visibility, you cannot stray away from the struggle of Search Engine Optimisation (SEO). Most major website revamps involve some form of content restructuring, which might result in a dip for the Search Engine Results Page (SERP). 

As a result, focusing on your SEO should literally be the first thing on your mind when it comes to marketing for your new website design. For starters, look out for missing/duplicate page titles, H1 tags, meta descriptions and broken links within your website’s architecture. 

Run a simple site crawl with the available free SEO tools to generate an existing SEO score and eliminate the listed errors for an SEO-friendly website. 

Ensure focused keywords are placed within the headers and throughout the website’s information architecture and content. 

Save yourself all that hassle with the help of an SEO agency

2. Plan Regular Content

Still not seeing the results you desire even after working on the SEO of your site? Get an added boost with consistent Content Marketing.

Content marketing revolves around producing SEO-focused content that helps to improve your website’s rankings on SERPs, by introducing the focus keywords into the website.

Craft content that can help your target audiences, such as guides, how-tos, reviews and comparisons, based on your products, services and accompanying keywords. Of course, a grasp of SEO-focused writing would be necessary as you go about doing so. 

You can take this opportunity to generate helpful articles for your customers and express yourself through your brand!

3. Get Creative On Social

If there’s any place to put your brand new web design out there, it’s on social media. Facebook, Instagram, Twitter, etc., just take your pick to promote your website. 

Post your new website on your various social media pages and run ads on these posts to reach your target audience, old and new. With a good web developer, a post using your website’s main banner should draw in the eyeballs you need. 

Or, amp it up with an incentivised engagement campaign to drive more of your target audience to your sparkling new website – run giveaways for your newsletter, mini-games based on your website design or create a quiz on your website homepage.

Creativity is unbeaten, so find creative ways to make it engaging for your target audience to check out a good website design

4. Market It On Search 

SEO is great, but you need faster results sometimes. That sounds like a job for Search Engine Marketing (SEM)! 

Forgive the overly dramatic intro, though SEM could really save your website from the pit of low-traffic. With billions of searches every day, having SEM ads allows you to tap into this huge volume of potential online users. 

By targeting keywords that your customers search for, SEM is an extremely potent tool for getting clicks to your website. All you need is a compelling and concise copy that will draw your audience in, alongside the strategic targeting of search keywords and demographics. 

Full-Service Creative Agency At Your Service

Not everyone has the time and resources at their disposal to execute the abovementioned strategies, that’s why you got agencies like us. Our expertise in various digital marketing proposals and vast experience in web design in Malaysia makes us the perfect partner for you. 

Intrigued? Our sales consultants are just a click away.