Responsive Design Archives

Mobile websites vs responsive design

Posted on June 7, 2016June 7, 2016 by Marika Hirsch

Introduction: Google is making a fuss about being mobile optimized (and for good reason)

Do you remember Mobilegeddon? It was the Google update released last year that favoured mobile optimized websites over ones that were not. We’ve written all about it here. If your company’s website isn’t mobile configured the way Google wants, then you won’t show up very high in mobile search results. In order to make the mobile cut in Google’s eyes, you have two choices. And that’s where mobile websites vs responsive design come in. These options are the two typical types of configuration that will boost your website’s mobile-friendliness.

Want exact steps of how to get mobile-friendly? Download The Ultimate Mobile Optimization Test to see if you are good to go with Google.

What is the difference between mobile websites vs responsive design?

Mobile websites

A mobile website is a parallel website created just for mobile phones and tablets. Both the content within the mobile website and the website address (URL) will be different than your original website. Usually, to avoid confusion with your original URL, a mobile website looks like “www.m.company.com”. The great thing about mobile websites is that you can select specific content to only be shown to mobile users. For instance, if a large section of your corporate website won’t apply to those viewing on a phone, or if you have a corporate video that isn’t optimized, you can select which pieces to remove. This is also possible with responsive design, but that may require a website redesign.

Responsive design

A responsive website ‘responds’ to the device you’re using; whether it’s a smartphone, tablet or on desktop. Due to the flexible format and design, the site’s content automatically resizes itself to work seamlessly on the screen on which it’s being viewed. Responsive design, while it may require a redesign before you get started, ensures that your site stays on one URL and updating content is easier to implement.

Which one should I use?

When it comes to mobile websites vs responsive design, both get you a ‘pass’ from Google. However, Google prefers responsive design and so do we. Why? Google gives a lot of reasons, and you can read them all here. Here’s why we recommend it:

Responsive design makes sharing content across different devices easier since the URLs stay the same.
Any content changes only need to be made in one place, so there’s less risk of duplication.
It’s probably just smarter to go the way Google recommends if you’re trying to ensure that your website is favoured on Google’s search engine.

Conclusion: choose one and get started

Regardless of the method you choose, it’s important to start mobile optimizing your website if you haven’t already. We’re moving to a mobile-first world, and you don’t want your company to be left behind. A recent study by Google showed that a third of all internet traffic now comes from mobile devices, and that number is increasing every day. Seem overwhelming? Don’t worry, because we have a complete mobile optimization checklist. See if you pass Google’s test, and if you don’t, we’ve provided a list of steps to ensure mobile optimization. Download the checklist below!

The best mobile investor relations websites

Posted on May 3, 2016March 28, 2018 by Marika Hirsch

Introduction: Investors are looking at you on mobile.

The best mobile investor relations websites are the ones that will capture the most investor attention. The IR App, with IR Magazine, surveyed 300 institutional investors at the end of 2014 about their mobile usage. The survey found that 83% of investors rely on mobile when it comes to their work, and 68% of investors look at IR related content on their mobile device. For a more in-depth look about investor mobile usage, download our ebook about 9 tips to improve investor communication with your website. But this week on the blog, we’re singing the praises of the best mobile investor relations websites. We take a look at companies from all sectors, including resources, biotech, and manufacturing. Each of these IR websites follow best practices and make accessibility and investor communication paramount.

5 of the best mobile investor relations websites

1. Amcor – visual and easy to follow

Amcor’s ‘Amcor at a Glance’ overview page in their investor relations section offers investors the most important statistics and information about the company in visual and easily digestible pieces. Their mobile IR section utilizes data visualization to really drive their points home.

2. EXL – dedicated investor website

EXL’s dedicated investor website is eye candy. Their mobile focused investor section is even better than on desktop screens. The website is beautiful to look at and even simpler to use.

3. Barrick Gold – easy access to company reports

While Barrick Gold’s investor section isn’t as dazzling as EXL’s, they rely on investor accessibility with easy to read objectives for the company followed by a section of download links. Each report is readily available for shareholders to look through.

4. Biogen – scroll through the latest webcasts

Biogen’s investor relations section begins with their objective and easy to use buttons for requesting further information and signing up for company alerts. Their latest webcasts can also easily be accessed on scroll.

5. Critical Outcome Technologies Inc. – investor connect

COTI comes from our own wheelhouse, and is a site we’re very proud of. The mobile-friendly investor overview section features investment highlights, easy investor connect opportunities through email signup and an easy path to the company’s website awards.

Conclusion: get mobile-friendly and stay current for investors

If your investor relations section, or IR website, isn’t mobile-friendly, you are losing a serious audience. If an investor tries to access your corporate presentation or latest quarterly numbers while they’re on the go, your IR section must have clear pathways to information. Don’t make the process more difficult with small text, buttons that can’t be pressed, or necessary public company materials stored away in the basement where no one can find them. Do follow the examples of the companies above and see how each industry uses the best mobile investor relations websites to their benefit.

8 steps to take before choosing a web design agency

Posted on February 16, 2016February 15, 2016 by Marika Hirsch

Introduction: it’s all about the portfolio

There are hundreds of web design agencies out there, and each should have a portfolio of work for your perusal. Last month, we introduced you to 11 key questions to ask a web agency before hiring them. Now we’re digging deeper and giving you 8 steps to investigate on your own before choosing a web design agency. The most important aspect of any digital agency is their portfolio. Portfolio, portfolio, portfolio. Before making any decisions, take the time to really look at the work of the agency, or agencies, you’re considering.

Test drive client websites

Most often, a web agency’s portfolio will include images and screenshots of the work they’ve produced for their clients. Visuals on portfolio pages are great, but don’t just rely on them. Go to each project’s individual website and take a look around. If the agency’s portfolio speaks about creating an interactive projects map for a mining client, don’t just take their word for it. Go to the URL for that mining company and test the map yourself. Clicking around websites will give you a good sense of the agency’s capabilities, from how they chose to lay out information to how pathways through the site work.

Know which parts of a project the agency worked on

The best web design agency portfolio pages have a sorting function where users can see their levels of experience and participation in different projects. Knowing how much an agency contributed is important, as many digital agencies specialize in particular areas. If you are a smaller public company in need of branding materials, make sure the agency you’re looking at offers branding as a service.

Make sure their portfolio includes experience in your industry

The way websites are laid out best varies exponentially depending on the industry. If you’re a mining company and looking at a portfolio full of tech companies and retail outlets, that agency may not be the best fit. Why? Well, staying with the mining company example, a mining website may need an easy to navigate projects section identifying the different exploration, development, and producing locations. Similarly, if you’re a public company, look at web design agencies that specialize in public company websites and know all the regulations.

How do their projects treat the most important sections for your company?

What is the most important aspect for users to see when landing on your website? For most public companies, it’s usually the investors section. When investigating different web design agency portfolios, have an idea of the most important section of your future website, whether it’s the mission and vision statement section, the investor highlights page, or the email signup space. See how the agency lays out these areas. Are you satisfied them? If you’re really excited about creating an investor highlights page, but every project you look through doesn’t have that feature, that agency might not be the one for you.

All their websites should have a favicon

Wondering what that word means? (Side note: it’s a great one to know for pub trivia). A favicon, or ‘shortcut icon’ is a file containing the small icons you see on the top left corner on a website tab, in your bookmarks, as your URL icon, etc. A web designer will create and upload a site’s favicon, and web browsers will then use the file. Does the website agency you’re considering make use of favicons in their client websites? It’s a small element, sure, but highlights professionalism and website smarts.

Check to see how the agency’s projects handle email signups

If you’re a public company, this one is especially crucial. Most companies want an option somewhere on their website for users to input their email, name, etc. and receive items such as a weekly newsletter, latest company updates, or news releases. When looking at a web agency’s portfolio, see how they handle email signups. Go to one of the agency’s client sites and sign up. How did the process go? Did you receive an email right away? What did that email look like? How does the unsubscribe function work? Every public company knows that emailing investors and interested parties are both crucial and regulated. Make sure you’re choosing a web design agency who can keep up with your company’s email demands.

Test all their websites on mobile and tablet

We can’t say it enough: responsive, responsive, responsive design! At this point, if your new website won’t have mobile and tablet capabilities, you’re not choosing the right agency. As you look through the agency’s portfolio, take out your phone and test each website they’ve created on mobile. How does the site function? Can you read everything clearly, and navigate to where you need to go?

Study the content strategy of previous projects

Often, one of the most important and time consuming aspects for a web design agency is deciding how information will be presented in an easy to navigate way. Even if you already have a website, a good website design agency will take a look at the flow of information and how content is presented and make suggestions for improvements. Click through the websites of previous projects and take note at how easy or hard it is to get around. Does it make sense where the website places the team bios, mission statement, projects, etc? Are drop-downs confusing, or do you understand exactly where you’re headed when you click a button?

Conclusion: take time to research and test drive

Choosing a website design agency shouldn’t only about which sites are prettiest. Once you’ve decided that your company needs a website redesign, do your homework and research what type of design company is the best for you. If you’re a mining or metals company, check out how the agency lays out their client projects pages. If you love your vision and mission statement, see how different agencies display them on their sites. The finished product will be worth the work, we promise!

The best mining and metals websites

Posted on February 9, 2016March 28, 2018 by Marika Hirsch

Introduction

This week, we’re kicking off the first article in a new series we’re bringing to the Blender blog where we spread the love and pick some of our favourite website designs from different industries. It seems fitting to begin this love fest on Valentine’s week. We’re not just looking at companies with the coolest animations or prettiest images. We want to see which public companies are using digital elements to their advantage in all aspects: annual reports, mobile-friendliness, social media, and more. We also want to show our clients and community alike what some of their peers are up to, and hopefully inspire them to think about getting a website redesign in 2016. Without further ado!

Dated like the rocks they’re digging up?

First up: Mining and metals! Companies in the resource industries have a reputation for being slow adopters when it comes to newer digital initiatives. That’s definitely not always the case, and we want to show some love for those companies blazing the trail in their industry. Here are seven mining companies who all others should take notes from when it comes to their website design and digital marketing. All our mining clients, listen up!

1. Anglo American

Fullscreen videos throughout the site that play effortlessly, and a unique ‘At a Glance’ video offers an alternative to the usual dry paragraphs in the About Us section. Each page of the site sticks to the same design and colour theme, from the homepage to the investors section, preventing any branding confusion or design ‘drop off’.

Our favourite part: Embedded Twitter boxes

While many mining sites encourage investors and website visitors to ‘Follow Us on Social’, Anglo American allows people to tweet to them directly on their website. An embedded Twitter area and a button labelled ‘Talk to Us’ really opens communication and personalizes the company. This embedded Twitter function continues throughout the website. Each page has a ‘Talk to Us’ button that, when clicked, opens a box so a user can tweet Anglo American right on the page they’re viewing.

2. Newmont Mining

The most important parts of the company are easily featured right on the homepage. From a Twitter Timeline to their Third Quarter Results, each element is part of an intuitive layout. Fullscreen slider images immerse a user in the company’s story.

Our favourite part: Featuring original content

It’s slightly unusual for a mining company to prominently feature their latest blog post or an educational video about gold right on their homepage, but Newmont Mining stepped outside the box, and we think it’s really working for them. Newmont has an entire separate website for their original content called ‘OurVoice’. The blog is separated in the categories, ‘Performance’, ‘Environment’, ‘Community’, and ‘People’, and is updated almost daily.

3. B2 Gold Corp

We’re very proud of the B2Gold project we completed and launched at the end of 2015 for a variety of reasons. The detailed CSR page with fullscreen imagery and personal stories really gives people an idea of how B2 Gold contributes to surrounding communities, and the homepage features the most important information for investors.

Our favourite part: Project Map 2.0

If there’s anything we’d want to feature, it’s the mining company’s interactive project map that’s unlike any other in the industry. Clicking upon each location zooms to give a profile about the country, from population to GDP. The map’s unique icons also explain the different development, exploration, and producing areas of the company.

4. Kiewit

We’re in love with this homepage. Textured imagery gives the website a unique feel and, the images coupled with a bold yellow brand colour really sets Kiewit apart from other mining sites.

Our favourite part: Great use of icons

The navigation on this site is clean and intuitive, both on the top and the bottom. We love the icons across the middle of the page that direct users to different aspects of the site. Sweeeet.

5. Teck Resources

Teck Resources is a Canadian resource company that has nailed their website design. Sliding homepage banners offer quick links to their latest projects and investor numbers. The homepage’s interactive map also showcases the regions where Teck is focusing on copper, zinc, Steelmaking coal, and Energy.

Our favourite part: that mobile-friendless, though

While all these websites look great on a mobile phone or tablet, Teck Resources takes the cake. We’d argue the site almost looks better on a phone. Besides just the beautiful way the site looks on a phone, it’s also incredibly easy to use. Clicking one button at the bottom of the homepage allows a user to download Teck’s latest sustainability and annual reports.

6. Glencore Mining

Glencore’s site is very successful in their use of colour. Oftentimes, companies with a multitude of different colours on their homepage can just look sloppy or generic, but Glencore uses many colours while still keeping a cohesive feel.

Our favourite part: Grid lookin’ good

We love a good homepage grid. Glencore’s use of a gird layout on their homepage works so well because each box features a bold tagline such as ‘Make a Difference’ and ‘Global Network’. There’s also a live ‘Share Price’ box on the homepage for investors to follow along without needed to click on the investor section.

7. NOVAGOLD Resources Inc.

NOVAGOLD, a Canadian-based company, is one of our current favourite projects. Interactive icons keep audiences engaged in NOVAGOLD’s story, and big taglines on each slider of the homepage and inner pages easily direct users to where they want to go.

Our favourite part: investor section

When we were creating this section, we thought a lot about how we’d want a page to look and function if we were investing in a mining company. NOVAGOLD’s investor section is simple and straightforward, while still staying cohesive with the other, more ‘exciting’ pages. Anything a current or potential investor needs to learn about the company, from annual reports and share structures to FAQs and factsheets, is right on the page.

Your Mobilegeddon survival kit is here

Posted on April 21, 2015February 4, 2016 by Marika Hirsch

Days to Mobilegeddon: 0

Panic level: epic

Vaccination kit: installment 3 of 3

Today’s the day!

Happy Mobilegeddon everyone. In case you’re not sure what we’ve been talking about, here’s a recap: As of April 21st, 2015 Google will start favoring websites that are mobile-friendly over ones that are not. If your website isn’t mobile-friendly, it will be harder and harder for people to find you on their smartphones or tablets. This update has been nicknamed ‘Mobilegeddon’. Sound scary? It is but we’ve made you a guide.

Introducing ‘The Mobilegeddon Survival Kit: your guide to getting a mobile-friendly website’.

Fancy, huh?

The ‘Mobilegeddon Survival Kit’ will teach you:

What Google’s update means and how it affects you
What it means to be mobile-friendly and the two routes you can take to get there
What route Google recommends and why
A simple checklist you can use to see if your website makes the mobile-friendly cut

To get your hands on the ‘Mobilegeddon Survival Kit,’ just click the link below and we’ll send the guide straight to your inbox!

Mobilegeddon Survival Kit

5 Web Design Trends for Your IR Website

Posted on September 4, 2013May 1, 2018 by The Blender Team

Design can really make or break your brand identity. The web design of your website is especially important, because it’s basically your company’s front door. When it comes to design, it has to look good, and it needs to be functional; but the biggest question is how? Make it cleaner and less cluttered? Kind of vague don’t you think? Our creative team came up with a list of 5 key trends in web design to give you a better picture of how we create clean and intuitive websites:

Parallax Scrolling is a technique that is often used in websites, where the background image scrolls at a slower pace than the foreground. Still unsure of what parallax scrolling is? Check out Faris Investment Corporation’s website that we designed and a list of 20 best websites with parallax scrolling of 2013 on Awwwards. The scrolling creates a visually appealing effect, and makes the audience wonder ‘what’s beyond the fold?’ Accompanied with a clean and static navigation bar on the top, users can also fast forward the scrolling to a section they desire to read. The parallax effect allows the company to convey a compelling equity story with effective visual cues and breaks.

Bold and solid colors make a difference. Colors are a huge part in web design, think of it as a form of non-verbal communication. What do the colors say about your brand right now? Are the colors doing its job in brand recognition? The number of acceptable hues for brands keeps increasing and a sea of different blues showed up in design. Blue is known to be the color for trust, dependable and strength. That’s why blue is often seen with banks and businesses that hope to inspire trust. Take a look at this useful infographic created by Kissmetrics to know more about how color psychology works. Leave us a comment or give us a call if you need help deciding what color scheme best fits your company.

Large image backgrounds are usually used in online photography portfolios, but the trend is growing and reaching many web designers as well. Imagery should not just be limited to photography; publicly traded companies can also draw stories and capture investors’ interest with visuals too. With Endeavour Silver’s website, we decided to whitewash large images and rotate them in the background. Hence, visitors will be constantly reminded of Endeavour Silver’s strategic silver acquisition and exploration programs by the rotating images in the background. Yet the images work in a way that doesn’t steal the spotlight from Endeavour’s rich content. Want to steal a look? Click here and remember to check out Endeavour’s Silver Hub too!

Big headlines and mixed & matched fonts – really trendy in terms of web design right now. We experimented with big, bold headlines and got great results with Texas Rare Earth’s corporate website. When investors enter the site, they will immediately see mining company’s catch phrases, which really summarize what the corporation is all about. Say for instance, “Unlocking a National Treasure in west Texas” and “Strategically Poised Long-Life Heavy Rare Earth Developer” against visually appealing images of Texas and the multi-metallic rare earth.

Responsive – you didn’t think I’d miss responsive did you? Responsive has been a trend in 2012 already, and it’ll continue to be a trend for as long as we use our mobile and tablets. 81% of mobile searches are driven by speed and convenience, says Google. It’s really not a surprise to anyone right? Searching on a mobile device is quicker, and easier. Investors can research about you anywhere. That’s why responsive is in trend, websites need to smart enough to respond to a wide range of screen sizes to engage mobile investors.

Forget Zoom Navigation & Prioritize Mobile Optimization

Posted on July 15, 2013May 2, 2018 by The Blender Team

With global smartphone sales growing every day, we always tune into the latest tech trends, and thrive to break the barriers of viewing a website on a mobile. So, how do you optimize your website for mobile and make it easy to navigate? Here’s what you need to know:

Use bigger fonts, more white space and buttons that are easy to tap. That’s because 49% of mobile users hold their phone with just one hand. So whichever mobile optimization you choose, keep this in mind when you’re making decisions on the design.

A fluid layout means that the width of your website is set to a percentage rather than a fixed number. This simple approach will allow your website to expand or shrink to adjust to whatever screen the viewer is using.

A single-column layout is a simple mobile-friendly website designed specifically for mobile browsers. It saves investors time and gives them quick access to key data without any zoom navigation needed. We call our unique version of this layout, Mobilize, in which content updates in between mobile and full website are done automatically.

A responsive design is similar to the fluid layout idea except it provides a much greater flexibility. Instead of just resizing the frame of your website to fit the screen, the content also resizes to fit. So literally, your mother website will be presented in an optimized layout regardless of what device is being used.

This is just a very brief summary of the possible mobile optimization options for your website. With mobile marketing exploding and smartphone sales booming, it’s inevitable that websites need to be optimized to expand their reach across all devices. Give us a call to speak with our tech professionals if you want to know more, we’re always here to help! @BlenderMedia

Latest

Subscribe

Social