Category Archives: Uncategorized

Mobile Website Design: Key Elements to Having a Great UX Design

According to The Social Skinny, there are over 1.2 billion people accessing the web from their mobile phones. This number is continually growing, ensuring the progression and need for mobile websites. The truth is, most consumers won’t get their hair cut by you, go to your gym, or eat at your restaurant if they are unable to find what they are looking for on your mobile website. For this reason, usability on mobile sites is more crucial than ever.

It is important for mobile designers to have an understanding of what leads to a great user experience. A design that focuses on target users, minimizes distractions, and boosts desirability will ensure your users’ experiences will be positive ones.

Focus On Target Users

The first step in creating any mobile website is to specifically define who the target users are. A great approach to this is creating user personas. In my experience of using user personas, I have found that they help boost productivity in all of my projects. Creating user personas helps me become more acquainted with the target user, making it easier for me to create a design based around their needs.

Clarifying user needs,the base of your UX design requirements, beforehand using User Personas helps to diminish the chance of last-minute major design changes. Users will be happy and engaged with your mobile website when the design of the site aligns with expectations of the individual users.

Minimize Distractions

Users want to get to from point A to point B to find the content they are looking for quickly. Avoid designing any visual elements that could divert a user’s attention. Below is a list of best practices for minimizing distractions:

  • Simplify the Layout: Simplifying a mobile site’s layout will enable users to easily discover the content they are searching for. Remember: Negative space (or whitespace) is not a bad thing. A spacious layout helps users digest information more easily. Also, use effective placement for all elements. Key elements such as the navigation and search bar need to be the most accessible.
  • Be Consistent: Consistency in color will also boost usability and keep layouts simple. Color is a great visual cue in mobile design and with such a small screen, a cohesive color palette is vital for guiding users throughout your site. For example, having the same color call-to-action buttons is a must in all my design projects because it allows a user to always know what is clickable.
  • Show Hierarchy. You can minimize the complexity of your mobile site by having clear titles, marking keywords in bold or italic, and having full width buttons. This is a great way to showcase content and organize the site’s structure, allowing important content to become more distinguishable.
  • Use Effective Writing: Use language that is understandable to the site’s target users. A great example of this is the Virgin America’s mobile website. They have a hamburger menu to house their whole navigation, but below that they have listed the two main navigational points – Check in & Manage. These are short concise words that are instantly recognizable by their users. Another way to minimize distractions in writing is by breaking taglines into short key phrases. This allows for a more scannable layout, enabling users to find what they are searching for quicker.

Boost Desirability

Ultimately, when a mobile website’s design is user-centered, it becomes more valuable to your target users. It is all about minimizing distractions and simplifying the layout to make your site showcase important content. By designing for your target audience’s needs, you will promote positive user engagement. Users who can easily navigate through your site to what they need will continue to come back- and that’s a win-win situation for everyone.d

Web Design & Software

Web Design & Software

Did you know….. we don’t just create innovative web designs that help your business grow…. we also do software development?

Over the years Webfuel have helped many clients with advanced software development projects including:

  • An online clinical database that is currently tracking over 300,000 clinical episodes for over 60,000 patients
  • A project management database used by a university research departments to track grant applications
  • An order delivery and dispatch system for a national confectionary retailer that schedules the production and dispatch of hundreds of orders a day
  • A bespoke event tracking and booking system for a national training company

These are just a few examples of the kind of software projects we’ve worked on.

Our software is web based, meaning it can be accessed from any web browser. We bring the same level of expertise in usability to our software design as we do to our web design.

We make use of a range of core technologies when developing web based software applications including:

  • C#
  • Microsoft ASP.NET Core
  • Microsoft SQL Server
  • Angular
  • TypeScript

We can host your software application in Microsoft Azure data centres giving you unrivaled levels of security and scalablity.

Do you need a bespoke software application? Is there an area of your business process that would benefit from a system that is custom made to work the way you work, and that can be adapted and developed as your needs change?

Many business could make substantial savings and increases in productivity if some area of their process was moved into an online custom software application. If you think there may be some way we could help you with online bespoke software then please give us a call.

We’re always happy to talk though ideas with no obligation or hard sell.

How to pick a domain name

How to pick a domain name

We are often asked for advice on picking a domain name when someone wants to setup a website. In this post we’ll look at some of the things to consider when finding that perfect domain name for your new website.

First things first, in case you don’t know what a domain name is, it is the address of the website that you see in the browser’s navigation bar. For example our domain name is www.subodhsharma.in  All websites need a domain name so that people have an address to remember them by. The domain name is also used in your email address (e.g. info@subodhsharma.in).

So how do you pick a great domain name for a new business or website? Let’s look at some factors one by one.

Is the domain name available

This is the first thing to find out. Many millions of domain names have already been registered, particulary on the popular top-level-domains (TLDs) such as .com and .co.uk. However there are still many gems to be found, and you can always get a domain name on a different TLD (e.g. .business, .help, .net, .co). More and more sites are moving away from the common TLDs like .com precisely because they want to pick a website name that is no longer available there.

Make it easy to remember, and easy to say

If your website is successful your domain name will get used a lot. You’ll have it printed on stationary and business cards. You’ll be telling people your email address over the phone. People will be writing your website address down. So picking a relatively snappy, easy to remember, and easy to read domain name is important. Having to constantly spell your 40 character long domain name to people over the phone is going to get very tedious, very fast.

Think about SEO

A domain name can be great for SEO. If you can get your keywords into the domain name that can give your search engine rankings a big boost for those keywords. However with all things SEO it’s important not to get too hung up on one aspect of SEO, and it’s equally important all your content and any off site SEO work is also driving towards the same SEO goals.

To WWW or not to WWW

Some websites use www at the start of their domain name, some do not. At Webfuel we would always recommend starting with www. There are strong technical reasons built into the domain name standards for this, to do with how website addresses are redirected. There are workarounds but using them can limit your hosting options. However if you really want to shave 4 characters off the website address and you think the site looks better that way then dropping the www is always an option.

Note that whether to start your website with www or not is not strictly to do with choosing the domain name. You will always register the domain name without www. You are then free to put websites on any “sub-domain” of your domain (www.my-domain.com is a sub-domain of my-domain.com). You essentially own any web address that ends with your domain name.

Consider registering related domain names

If your business is really successful, you may want to register related domain names too. This would prevent any competitors putting sites on domain names very similar to your own. Obviously there is a limit to this, you can’t buy hundreds of domain names. But for example if you register a .co.uk you may also want to register the same domain on .com and perhaps .co if they are available. If you register a domain with hyphens and the un-hyphenated version is available you may want to get that. One way to think about this is if you read your domain name to someone and they slightly mis-remember it, how would they be likely to type it into a browser.

Importance of Wireframing in Website Design

Designing and developing websites that work across multiple devices is an important part of the work we do on today’s web. Responsive design is forcing us to re-think about how we plan out our site designs and how our pages gracefully fit the device they are being viewed on. These days, we rarely ever start a design without going through some sort of wireframing process. Even if clients do not need to see a wireframe, I think it’s still important to create one internally so that designers and developers are all on the same page.

Changing the Way We Do Wireframes

A wireframe is the skeleton of the page, usually drawn with basic shapes and lines with limited colors and styling. The point is to focus on figuring out layout and content placement, and solving navigation and functionality problems in a format that is easy to adjust. When planning for a responsive website design, we cannot continue to think through the wireframing process from a desktop only perspective. However, I understand that changing the way we think about these layouts and choosing a new direction can be a little challenging. For years we have spent our time designing fixed width layouts or maximum 960px width in our designs. Wireframing for mobile devices first (or from narrow widths outwards) helps us prioritize site elements while putting us in a good mindset for thinking about what content is most relevant to the site visitor and how your content becomes available to work with on wider screens.

Your Wireframing Tools

The first step of any good design is to sketch out your ideas and determine the placement of all the different elements on a page. If you’re trying to decide which type of wireframing tool to use, there are a wide variety of wireframing tools and apps out there that make wireframing quick and easy. Tools such as Balsamiq Mockups, Omnigraffle, and Axure are widely used for creating wireframes and have very extensive toolsets and features. I used Adobe Illustrator for many years but ever since Sketch came out, it has been a designer’s dream tool and our team fell in love with it right away. Sketch is very intuitive and you can create multiple artboards and view what you’re designing all at once — perfect for designing responsive sites!

At the end of the day, pen, paper or even markers can make excellent wireframing tools. I still find that sketching and drawing out your wireframes on paper is always a great way to get ideas flowing, to quickly illustrate those ideas to colleagues and to get things straight in your own head. When collaborating with our team here at Segue, I still start with paper and a pencil, roughly sketching things out and I probably always will.

wireframes with pencil and marker

What to Avoid

Wireframing is both a process for thinking through problems and specifying interfaces. Like other aspects of your development process, wireframing can have its pitfalls if not done properly.Here are some things to avoid when you are creating your responsive wireframes.

1. Emphasizing color and design: Wireframing is for deciding the layout and location of elements. Working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design. Starting with simple, low-fidelity wireframes is probably better and easier to work with if you decide to change and move things around.

2. Too much detail: You can always add more detail to show to your team and clients later in the process. But including too much in the beginning may add confusion. Drawing on paper is always a great place to start and rough sketches allow you to come up with new, more interesting solutions. Keep the fidelity low and focus on making something that others will collaborate around.

3. Wireframing every single page: Creating wireframes doesn’t usually require that you lay out every single page view. It’s always good to know your website’s content ahead of time and what your user is trying to achieve. All of that gathered information from stakeholder interviews, content audit, and research are all important pieces of your site that will help prioritize elements on your page. Doing what’s necessary to move the project forward and get consensus before building is what I think wireframes are being useful for.

wireframe

Benefits of Wireframing

Wireframing is an important communication tool in any web or app project. It gives the client, developer, and designer an opportunity to walk through the structure of the website without getting sidetracked by design elements such as colors and images. For me, I believe that building a simple wireframe will save time in the long run and ease the development process for the designer, developer, and client. The following is a list of some of the great benefits of wireframes:

1. Wireframes bring clarity to your projects, allowing you to work through all the interactions and layout needs.

2. Wireframes gets your client thinking about what their needs really are and helps them define their project goals and what their primary focus should be.

3. Having your wireframes handy can make it easier for you to communicate your ideas to your team and how your design would work with responsiveness in mind.

4. Wireframes can also help deliver the core message of your website more effectively and gather feedback at an early stage.

5. Wireframes gives the developer a clear picture of the elements that they will need to code. How should the layout adjust for smaller-sized devices? What is the hierarchy of the content? How does the navigation respond to smaller screens?

6. Wireframes helps designers layout many sections of the website, resulting in a more fluid creative process.

Responsive thinking challenges our design options and certain approaches will not be easy to implement as others. Frequent collaboration among team members and the client is a must in your design workflow, not the exception. While it is common to go through several wireframe revisions with your colleagues and client(s), at the end of the day, our main goal as a team is to review and collaborate regularly at every stage in the creation process until the site is live.

How does SEO keyword work for a website?

Any effective SEO campaign starts with keyword analysis. Before we can decide where to target our SEO efforts we first need to understand what keywords we are going to be getting to Google page 1. Our keyword research revolves around niche analysis. This post explains some of the things we look at when performing keyword niche analysis.

When you start an SEO campagin with us we will first discuss with you the kind of keywords that you think your customers will be searching on. Your own business or local knowledge is invaluable in getting the best possible starting set of keywords. We will then take your keywords (perhaps 5 – 10) and expand them out, often to 20, 30 or more keywords. We expand them using a range of variants, such as local terms, value terms (e.g. luxury, low cost, sale) and more.

Once we have a list of keyphrases to analyse we run them through our keyword niche analysis software. This software analyses the keywords and pulls back several useful measures including:

  • Monthly search volume on Google.
  • Estimated pay-per-click (PPC) cost using data from AdWords
  • Your current ranking for the keyword
  • An estimate of competitiveness of the keyword based on analysing the top 10 sites for the keyword

This information allows us to recommend valuable keywords where a page 1 rank on Google is likely to be achievable.

A valuable keyword is first and foremost one with a high search volume. There is no point in getting to page 1 for a keyword that very few people search on. The PPC cost also indicates the value of the keyword as the more advertisers are prepared to pay for a keyword the more they value it, and therefore the more valuable traffic it is likely to provide.

The competitiveness of a keyword is a lot harder to estimate. The main way we determine this is to look at the current top 10 sites for that keyword and use a number of mertics on those sites to determine how easy or hard they will be to beat in the rankings. This kind of competitor site analysis can be quite complicated, starting from a number of standard measures such as the Moz Domain Authority (DA) ranking, Google’s own Page Rank (PR) and moving on to keyword frequency analysis and back link analysis.

The end result of all this analysis allows us to recommend a handful of keywords that we can optimise. These keywords should be those that we have a reasonably high chance of getting onto page 1, and that will produce a significant amount of valuable traffic. The PPC cost applied to the monthly search volume even allows us to quantify the value of a page 1 ranking, and give a quantitative comparison of our SEO cost to the value generated.

Once our SEO campaigns have started we reperfom this analysis on a wide range of keywords on a daily basis. This covers not just the primary keywords for the campaign, but a large number of related keywords that should also show improvement. You can login to your own SEO dashboard to review this on a daily basis. This reporting allows you to see the progress of your campaign, and the results that are being delivered, whever you want to.

If you’d like a free, no-obligation keyword and competitor analysis please get in touch on  8058007341