7 UX tips in a world of ever-changing screen sizes

Staying ahead of the curve

UX Design changed considerably in the last two decades when users began to focus on mobile and now we have so many devices of all sizes - desktops, laptops, tablets, smartphones and wearables, all supporting multiple aspect ratios. It continues to keep designers on their toes as we have to be so reactive to hardware changes in our individual creative processes.

It still shocks me how many young designers focus on the desktop – Why? I know it is so easy to check desktop whilst in work at your desk – I know, I know! but the desktop has reached a level of maturity. Mobile devices are seeing the largest growth in screen sizes which has led to a high demand for UI design.

Do not neglect mobile design or your product will suffer. People are on their phones all day, even in front of their desktop/laptop.

I am going share with you 6 crucial steps as a UX designer which will help you develop a strategy to target a range of screen sizes and devices.


1. Distinguish device groups for your product/service

It is almost impossible to target individual devices so define device groups for your products based on what your audience is likely to focus on.




2. What is the focus of your user experience?

Every product or service has a focal user experience which solves a problem people have – this provides value. To find the focal point of your product ask yourself: "What is the common task a customer needs to achieve?" It is imperative to maintain these tasks on every channel you use for your product.

For example, Skyscanner's focal user experience is to compare and book cheap flights. This feature should work well on each device regardless of screen size.



3. Design for the smallest screen first

Focus on a mobile-first approach and design on the smallest screen that is relevant to your users. In the past, designers have been used to designing for desktop and having so much white space for extra (often irrelevant) features. Designing for mobile first helps prioritise the key features and stops stakeholders from adding more and more unnecessary junk.

4. Adaptive Design

Don't just expand your designs to fit large screens, the large screens need the same level of consideration. An adaptive design will warrant the best user experience based on whichever device the user is interacting with. Unlike responsive design, where a screen stacks from desktop design into a smaller device’s, the adaptive design offers customised solutions.



5. Support a consistent experience

At Together Incredible, we talk a lot about consistency as it is one of the most important factors in user experience. A consistent experience should be paramount across all screen sizes. It saves your company money, time and builds user confidence – winner!

Users don't want to try work out your product on every device they interact with. Rather than creating bespoke designs across all screen sizes (which is nearly impossible), you can treat them as aspects of the same experience.

6. Build a seamless experience

This is will help you differentiate your product or service from your competitors. Users want to be able to move freely back and forth between devices to complete a task without thinking about what device they are using. The expectation in functionality is crucial - there should be no reason for the user to think this could be better.

Spotify is a famous example: you can set up a playlist on your desktop and it will immediately be accessible on your iPhone.

7. Test

Like everything in UX, we should test our products and not based anything on assumptions. Carry out usability tests for your product with real users on a variety of different devices and this will reveal any UX problems before it gets launched.



As a designer, it is not an easy task to create a seamless experience across multiple screen and devices. Users expect a frictionless user experience regardless of the device. The best approach is to always have the end-user in mind and assess when, where and how the product will be used in order to evaluate the optimal experience.


Other related articles:

Design-Thinking: Designers have become too reliant on surface-level visuals

4 tips to help build customer trust

The top 5 UX tips to consider

Pros and cons of ‘Ghost Buttons’ - should they be busted?

What are ghost buttons?

Ghost buttons are buttons with a coloured border but no colour fill – they have become very common on websites. They have inherited the name ‘ghost’ to describe their transparent image as they often take the background’s appearance.



There is an argument whether or not ghost buttons should be busted.

There are two main advantages of using them:

Style purposes

They work well on minimal or flat designed websites as they give an elegant, subtle feel to the design. Sometimes it’s the best way to add a cutting-edge look to a new or existing website.

Visual hierarchy

Their subtle appearance can give emphasis to other elements on the page. When used well they can help with the visual hierarchy of the design by giving the order of importance when there is more than one ‘Call to action’ (CTA) on a page.


However, there are several disadvantages of using ghost buttons


Ghost buttons have ghost conversion


Decreased click-through rate

Ghost buttons are popular amongst web designers who love the minimalist look – nice design doesn’t mean good design.

CTA’s need to have a strong visual presence that attracts the user’s attention. The purpose of the button is to guide users to proceed with the desired task flow – so, why make this button subtle?

It has been proven through many tests that ghost buttons are overlooked and therefore have a lower click rate. Several A/B tests have found that users recognise solid buttons a lot quicker and easier than ghost buttons.

ConversionXL carried out an A/B test and found a 20% decrease in clicks, based on 10,000 visits when testing the following options:

Ghost Button

Solid Button


It is very important to follow best practices rather than follow design trends that don’t help users easily reach their end goal. The call to actions need to encourage user engagement and in return lead to a higher conversion rate.


Legibility and Contrast

Ghost buttons come with usability issues. If the button is placed over a busy image without sufficient contrast, it can be difficult for users to read the CTA. If the ghost buttons and typography are both white, placed over an image, there is often a lack of visual hierarchy to engage users which can impact conversion.



Animation can often help ghost buttons to stand out a little more on hover however, it still may not be clear that it is a button. Take into consideration your audience and their age because ghost buttons can lead to some unwanted confusion.

The above issue may not seem too drastic but the potential impact on conversions is one that can cost the business a lot of money. Be aware of the possible implications and do not create designs that rely heavily on ghost buttons – it may not be the desired design aesthetics but we equally want to make the same mistakes others have already faced. It is important to test these styles and get real results for your audience.


Here are a few things to consider next time you think about ghost buttons:

  1. Use ghost buttons as a secondary CTA
  2. Consider Contrast
  3. Be consistent
  4. A/B test the ghost button vs solid button


You may also like to read:

Navigation UI- 5 Common mistakes designers need to avoid

6 UX principles that will guide you to create killer content