Profitable websites come from solid back-end development, great online marketing and an impressive appearance. When PushON design e-commerce sites on Magento, design is considered at every step of the journey. We recommend a mobile-first responsive design to deliver a truly user-centric experience that also delivers better Google results.
Good design transmits your branding and your values onto customers’ screens and into their brains. It’s a discipline that’s older than optimisation, older than the internet. But the principle remains:
sound theory + imagination + sensitivity to the brief = great design
In ecommerce the brief is to drive customers to the checkout in as few steps as possible.
What is Mobile-first Responsive Design?
Web designers have always sought to design their sites to satisfy the majority of users in the sector they’re designing for. In 2003 this was 800×600 resolution desktop screens. By 2006 it was 1024×768, a nod to widescreen monitors and laptops. But by 2008 these certainties were being questioned as users’ habits went into flux. The reason? Smartphones.
Although modern phones have resolutions equivalent to the top end of the desktop monitor market, you’d have to hold the phone about 10cm from your face to see the screen same size. That’s neither practical nor comfortable. We typically view our phones from 30cm away, which means intricate details (especially buttons and text hyperlinks) that would be clearly visible on a monitor would be fiddly to touch on the phone screen.
There are three realistic solutions:
- Build separate mobile and desktop sites (servers can detect which one to use);
- Build a site so it looks great on mobile but is fixed; or
- Build a responsive site.
At PushON we favour the third option. A truly responsive site doesn’t simply grow and shrink to fit the device, it rearranges elements to look best at any resolution on any device. So for example if there’s an image in a blog post, it might appear on the desktop screen with text wrapping around it but on the mobile it will go full-width and have text above and below it. Drop-down menus that work fine on the computer screen can be awkward to navigate on a phone – a responsive site can serve different menu styles depending on the device. And the list goes on.
“Mobile first” refers to the fact that the design is made initially for phones, with the design reflowing as the screen gets bigger. Generally speaking, if a site works when it’s 10 centimetres across, it’ll also be usable if it’s 40cm. But the opposite is not necessarily the case.