Benefits of using Shopify for your Ecommerce website

If you’re a product-selling business, the best way to start selling simply and efficiently is with Shopify; believe us, your customers will thank you!

In our latest blog, we’ll detail a host of reasons why using Shopify for your eCommerce website is a must and outline the many benefits of having the plugin on site.

 

A Hosted Platform –

This means instead of hosting the site on your own server, it is hosted on Shopify-optimized servers. By managing the hosting and server, your website and Shopify will run as one seamlessly, without compromising on speed!

 

Security Updates –

Any security updates to be downloaded and installed on the Shopify eCommerce platform are automatically performed as needed. Because of this, downtime for your store isn’t an issue, allowing you to continue to generate revenue through your store.

Many third-party plugins can cause your store to break, leaving you hanging while the plugin developer or host catch up and create fixes.

With Shopify, security issues are a thing of the past, ticking away in the background. At the same time, you can continue to do what you do best!

 

Apps & Customer Support –

With their own app store, Shopify can extend and increase the functionality of your site store at the click of a button!

All apps are vetted and approved by Shopify before they can be added to the store. Costing of apps is often on a subscription basis which includes automatic update notifications.

Third-party plugins are often filled with nasty bugs and viruses. This can be a disaster for your store and often result in unwanted extra costs!

In addition to the support our Web team can offer, Shopify also has its own customer support team that can provide help and advice 24/7. In addition to this, they also have excellent documentation via their help centre, which cover numerous FAQs about your Shopify store.

 

Customisable –

Shopify websites are designed to be customisable, giving a site owner countless options for their Shopify store.

From themes to simply moving content, Shopify makes editing and customising a breeze!

All Shopify themes are thoroughly tested and vetted, allowing you to pick between numerous themes and styles until you find the one that’s just right!

 

SEO & Marketing tools –

To truly get your product out there into the big wide world, you’ll need to make the most of SEO & Marketing. Luckily for you, Shopify has all the tools you need inbuilt!

From social channel integration and SEO optimisation, your product will be sat front and centre in front of your target audience in no time!

 

Multiple sales channels –

Shopify can act as much more than just an online store. The Shopify admin can also add sales channels for the following out of the box:

  • Shopify Point of sale system which can be used in your physical store/s
  • Facebook Shop functionality.
  • Apps integration with other external systems allows stock monitoring across many platforms.

 

Abandoned cart recovery & built-in payment gateway –

How many times as a shopper have you gone to buy a product, got distracted and forgot to complete the purchase? The honest answer is probably quite a lot!

With Shopify, make this common mistake a thing of the past with abandoned cart recovery. An abandoned cart will automatically send the customer a quick reminder that they may have forgotten to complete your purchase.

When it comes to payment gateways, you have many options to choose from, including Shopify’s own in-built payment gateway. These include:

Find a complete list of payment providers here: https://www.shopify.co.uk/payment-gateways/united-kingdom

 

Refund, privacy, and TOS statements –

Shopify has a generator built directly in the admin to help to generate GDPR-complaint Refund, Privacy, and TOS statements. These are a great starting point and are easy to edit to your needs.

As Shopify benefits go, this is one of the biggest; allowing small to medium businesses to do what they do best, rather than worrying about legal informational pages!

 

To learn more about our eCommerce expertise, call 01925 563 960 or fill in our enquiry form here.

How to make Mobile website Design a more User-Friendly Experience

If you want your mobile website design to be successful, you need to make sure that it is user-friendly. If the user cannot comprehend your website or use it in ease, there is no point of creating that website.

When making a website, your main aim is to ensure you get as many visitors as possible and make them loyal visitors as well! However, with over 200 million active websites around the globe, this is difficult to do! Therefore, along with the content, consistency, and your niche being essential for your success, your mobile website design must be user-friendly. Here are some tips to make your mobile design experience more user-friendly:

Make it appear more attractive

You want to ensure that every visitor has a magical experience when they visit your website. Therefore, when you are designing your website, keep the mobile user in mind. Mobile phones contributed to over half of the global website trafficking in 2018. Therefore, not only does your website need to function on phones, but also look great too! Even though the looks of your website shouldn’t be your priority, you should take it seriously. The first impression a mobile user has is based on the looks of your website! Therefore, you need to make sure that your website is compatible enough.

Must be easy to comprehend and explore

Users will switch to other websites if your website is difficult to explore. So, you need to make sure that your website is organized and provides the user with exactly what he/she needs. For instance, it’s always better to have drop-down menus that are consistent from page to page. Ensure that you design your page names so that they are easy to understand. No need to be over-creative and confuse customers. Give them what they want.

Don’t ignore the overall performance of your website!

Your mobile website design needs to ensure that your website performs well. Even though your website needs to look and feel good in the eyes of the customers, it is also important that it is efficient. So, if your website is slow, or it lags, and doesn’t work up to the mark, the user will get frustrated and say goodbye to your website.  Therefore, never ignore your efficiency. Numerous tools can allow you to be aware of the status of your website and also give you alerts! So, ensure that you make use of such tools!

No need for any complications

Always remember, less is more. Don’t overdo anything, whether it’s your website’s content, appearance, etc.  Your mobile website design must have a sophisticated look. Make your website look beautiful. But you should also ensure that the visitors can digest everything that is on your website. If you complicate things too much, there is a chance that users would become annoyed and leave your website.

In conclusion, mobile website design needs to be user-friendly if you want your website to be successful. You can have amazing content, but there’s no point if the website is confusing.

Codevember 2018

As you may have noticed over the last few days on our social media we have been sharing our efforts for an event known as Codevember.

What is Codevember?

Codevember is a challenge for developers to sharpen their design and coding skills every day during November. The challenge has been going on for a few years now and was started by two developers known as Arthur Rob and Valentin Daguenet. On the Codevember site, http://codevember.xyz/, there is a list of each day with a prompt for that day (though this prompt is just to help developers to come up with something for each day and doesn’t necessarily need to be followed).

How is Mosaic participating?

At Mosaic we are participating by creating a coded piece each day on Codepen and submitting it to the Codevember site. We are attempting to make sure each days submission is different from the last and trying to come away each day with something new learned. We have imposed some rules to keep us challenged;

  1. The submission must be coded, ie it cannot just be an embed image created in photoshop or illustrator (this isn’t to say creating an image in these isn’t a skill in itself just that the challenge seems to be more targeted at coding skill).
  2. We only have an hour each day to code the submission, this is to stop us getting too wrapped up in the challenge and to stop us constantly tweaking the submission.
  3. We have to do something based on the prompt, as this forces us out of our comfort zones and gets us learning new things.

What have we Done so far?

So far we have completed the following challenges each day:

  • Day 1: For the first day the prompt was infinity. For this we created a rocket ship trapped to travel through a rainbow warp hole for infinity.

    See the Pen #codevember – 01 – infinity by Liam Wright (@Uiliam) on CodePen.

  • Day 2: The prompt for day 2 was Time. For this one we created a clock in Javascript that used numbers and blocks to show the current time.

    See the Pen #codevember – 02 – Time by Liam Wright (@Uiliam) on CodePen.

  • Day 3: For day 3 we had to do something based on carrots. For this challenge we used some SCSS functions and mixins to pixel art carrot.

    See the Pen #codevember – 03 – Carrot by Liam Wright (@Uiliam) on CodePen.

  • Day 4: This day’s prompt was to create something based on the sky. To do this challenge we create a sky background and used css animation to move clouds across it. We also added some Javascript logic to check the time of day and change the sky based on whether it was morning, day, evening or night.

    See the Pen #codevember – 04 – Sky by Liam Wright (@Uiliam) on CodePen.

  • Day 5: For this challenge we had to do something music based. We did this by creating a javascript function to log keypresses and to display a music note when certain keys were pressed.

    See the Pen #codevember – 05 – Music by Liam Wright (@Uiliam) on CodePen.

  • Day 6: For day 6 we had a create something based on the prompt web. We created a spiders web with a spider that tracks your mouse when you move your cursor over its web, clicking the mouse makes the spider move towards the pointer. We also added custom CSS to change the cursor to a fly when you hover over the web.

    See the Pen #codevember – 06 – Web by Liam Wright (@Uiliam) on CodePen.

How do we see the other submissions?

As the submission could come for anyone of our Codepen accounts the best way to see our submission each day is to follow us on either Facebook or Twitter where we will post our submissions each day. Also, look out for a roundup post at the end of November to find out our impressions for the challenge and to see all our submissions.

5 Web Design trends of 2018

2018 has seen a number of new and evolving trends in web design and development. Below we will explore some of these trends.

1. Dynamic gradients

Gradients seem to be one of those web design trends that faze in and out of favour. In the past when they were used they would usually be a gradient that would transition from two shades of the same colour in the form of subtle shading to suggest 3D like early iOS. These were fazed out for flat design using solid colours. Now they are making a comeback, and this time they are big, loud and full of colour.

gradientlab screen capture demostrating bold gradients
Via: gradientlab.space

These big bold colours are getting used both for simple gradient backgrounds and as a gradient filter over photos, which is a great way to make a less interesting image look intriguing.

2. Mobile first

With more and more people using mobiles in daily life, mobile traffic is dominating over 50% of all web traffic and surpassing desktop traffic it has become even more important in 2018 to design from a Mobile first perspective. This is only going to increase as we move into 2019 and beyond.

Screen capture two modern mobile first designs
Via:thegrove.co.uk & www.and.co

What in the past used to be a challenge for designers has over the years become more refined. The hamburger icon and slide out menus have become the established norm, and where we used to have to ditch large images can now be replaced with more economical icons.

3. Vibrant & bold colour schemes

2018 has seen the rise in the use of vibrant and bold colours in web design. In the past, many brands and designers were stuck using web-safe colours, but with advances in monitors and devices able to reproduce richer colours designers have been getting more courageous in their approach to colours on the web.

screen capture of premier league site and it's use of bold contrating colours
Via:premierleague.com

The trend leans towards supersaturation, vibrant shades, and even clashing colours. These are helping to attract visitors and to set brands and sites apart from the ‘web-safe’ and the traditional.

4. CSS Grid

One of the biggest changes in 2017 was the adoption of the CSS grid spec in the latest versions of the major browsers like Chrome, Firefox, Safari and Edge. This has led to asymmetrical and unconventional ‘broken’ layouts in 2018, the appeal of these asymmetrical and broken layouts is that they are unique, distinctive and a major departure from the blocky sites of previous years.

screen capture of a asymmetrical and broken layout
Via:dada-data.net

These are still experimental due to the fact older browser doesn’t support the grid spec but as the adoption of the newer browsers increases, these asymmetrical and broken layouts will become more prevalent in 2019.

5. Big & bold typography

Typography has always been a powerful visual tool in design, but until recent years it was difficult to use custom and non-web safe fonts in web design due to limited support for custom fonts. This has all changed in recent years if the ability to embed custom fonts and due to services like Google Web Fonts. By being able to use the same fonts in web design as those in print design has enabled site to create more personality, evoke better emotion and set a tone on a website all while conveying important information.

screen capture of big and bold typography
Via:nurturedigital.com

This year has also seen the rise of using bigger fonts. While the standard for body fonts used to be 16px, there has now been an increase and it is starting to become more common of the body fonts to be in the range of 20px. This has, in turn, led to titles become bigger and bolder and them starting to become more integrated into the overall design on the page.

Summary

2018 has seen a lot of changes which will carry on having an effect into 2019 and beyond. Check back for a future article where we discuss what may change in 2019.

Why WordPress is more than just a Blogging Platform

��WordPress is just for a blogger, isn’t it?’, That may have been true at one time in the distant past but has certainly not been the case for a long time now.

So what is WordPress?

WordPress is a CMS or better known as a Content Management system. One of the reasons WordPress is such a popular CMS with its ease of use for content managers, meaning there is little need to contact your designer every time an alteration to your site content is needed (though we are happy to help with these if needed). The control panel can be accessed from anywhere in the world with an internet connection. There is even a mobile app for those who may want to edit there site content from there mobile or tablet devices.

WordPress also comes with the inbuilt functionality to create different content types to fit the needs of the site. By default, these content types are ‘Pages’ and ‘Posts’, but additional types can be created for many different uses such as Galleries, Project showcase pages, or even product pages.

WordPress Themes

Whether you are looking to create a blogging website or using WordPress to build a simple business website, you will need a theme to display your content to your site visitors on the frontend. Themes can be purchased or gained free of charge from the WordPress store but offer little creativity or customisation to match the look and feel you are after for you to display your content.

You could hire a website designer like Mosaic Digital Media Ltd, to build you a custom theme for your WordPress blog, website or WooCommerce store. By hiring a reputable designer you have greater ability to make your website your own by using your branding, colours, images and content to the best of its ability.

Vibrant WordPress Plugin Ecosystem

WordPress boosts a considerable number of plugins to help extend the functionality of your website. Plugins can help you to; managing site content, optimising the site for search engines, secure your site, and help to keep your site running fast. Some of the common plugins we use include;

Advanced Custom Fields – Extends your ability to create easily editable fields for pages, posts and custom posts types.

Yoast – This is a Search Engine Optimisation plugin which helps us to ensure your site is performing to its best potential on Google, Bing, etc.

W3 Total Cache – A caching plugin which helps us to ensure your site running as fast as possible.

WP smush – In this age of ever-increasing photo quality and size, this plugin helps make sure the images being uploaded to your site are optimised to ensure they do not slow your pages down.

Defender – With the ever-increasing security risks of the web we use to Defender as an additional line of defence to keep your site safe and secure from attacks.

WordPress offers other plugins and lots of websites on Google give you a better idea of new and useful plugins to solve any problem you may face.

Does WordPress Offer an Ecommerce Solution?

The short answer to this is yes. If you are looking to start a small online business selling digital or physical products WordPress offers several solutions for your website.

WordPress has several plugins that offer different e-commerce solutions however the leader in this field is WooCommerce. WooCommerce is provided by the guys at Automattic who create several plugins but the most successful creation is Woo.

WooCommerce gives you the ability to take your ordinary WordPress website blog or website and turn it into a fully functioning store within a matter of around 60 minutes of work. WordPress and WooCommerce is a great solution for anyone looking to start up an online business.

Who uses WordPress?

A survey conducted by W3Techs revealed that 30% of all websites are now powered by WordPress. Notably, websites powered by WordPress include:

So what is it that attracts big brands like these to use WordPress over other CMS’s and what makes WordPress more than just a blogging platform?

As you can see WordPress is much more than a blogging platform, with its ease of use as a CMS, ability to have custom themes, e-commerce solution and it’s plugin ecosystem it is easy to see why small businesses all the way up to big brands use WordPress and the use worldwide is growing.

CSS Grid Impressions

CSS grid spec, the hot topic on the web right now. Almost every front-end developer blog has at least one article on it, how it is going to revolutionise the web design landscape and detailing how to use the new CSS grid spec…

With that in mind, I’m going to do something a little different instead, I’m going to talk about my past and current experience with the CSS grid spec.

First Impressions

I first started playing around with CSS grid in 2015. As seen in the Codepen below, I used the syntax of the time ( the one still present in IE and Edge 15 and below) and a polyfill so it showed correctly in non-supported browsers.

 

See the Pen CSS grid layout module showcase by Liam Wright (@Uiliam) on CodePen.

Though the demo I created was fairly simplistic I was still excited by the possibilities of the spec.

I remember showing this to my co-workers of the time, and with them being cynical and apprehensive they were convinced it would be years and years before we would be able to use the spec fully. I couldn’t blame them as they had seen all the kerfuffle with Flexbox and the need for so many different vendor prefixes and vendor variations, which to this day we are still feeling the repercussions from. I’d done my research though and was optimistic, I’d read the articles about the spec being behind browser flags so we didn’t have a to deal with a flexbox fiasco again.

Recent Experience

Fast forward to March 2017 and both Firefox and Google Chrome shipped with the finalised standard of CSS grid, with the other popular browsers not far behind.

I was excited that the spec had finally been released but was also disheartened by the fact that people would still be using browsers where the spec was not supported (damn to the misguide IE9 users who refuse to update). Due to this, the changes made to the spec and the fact IE and Edge were dragging their feet as usual in updating to the latest specs I know it would be a little while yet until it could be fully used in production.

Still, I plowed on and started using CSS grid in my personal projects so I would be ready for the day when it would more viable to use in production. I add fallbacks to flexbox and inline-blocks so it would still be functional in most browsers. While doing this for my personal project I have observed a few things;

  • Due to the fact I have been using CSS frameworks like Bootstrap and Foundation for a while now, I found it difficult to break out of the mindset these grid system put you in.
  • It is hard work putting fallbacks (like these: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks) in as it feels like you are coding things twice.

That second point actually got me thinking if there was an easy way of doing the fallbacks via SCSS mixins. I have done a couple of experiments with this which I’ll perhaps touch on in a future article. For now, I’ll say currently it is but not without some sacrifice to the design or some over the top code bloat.

Conclusion

I feel I have only scratched the surface of the possibility of the CSS grid spec, especially when you look at whats been done in challenges like this: https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/.

I honestly think we’re going to see some awesome things come out of CSS grid spec in the next few years and my current experience with it all indicates that the predicted revolution is coming sooner rather than later.

Liams First Month At Mosaic Digital Media!

So… It’s been a month since Liam started here at Mosaic Digital Media and we thought that it’s time to introduce him properly! We wanted to help you get to know him the way we do, and that’s why we got him to fill out a questionnaire to narrow himself down to make it easier to get to know him.

1. How long have you worked at Mosaic Digital Media?

“I’ve been working at Mosaic for 1 month.”

2. What do you do?

“I’m a Senior frontend developer. You could describe a frontend developer as a catch-all terms for someone who has expert knowledge in HTML, CSS and JavaScript, has an understanding of UX design and is a dab hand at web design when needed.”

3. What are your biggest challenges as a SEO Specialist/Web Designer/Frontend Developer/Operations Manager/Apprentice etc?

“My biggest challenge as a frontend developer is the actual web design side. I can take a web design and build a fully functional site that matches the design. Ask me to design and build a site and I’m never happy with the result, maybe I’m just overly critical of my own designs.”

4. What part of the process do you find most rewarding?

“Building a site which meets the clients expectations and see that site go live knowing I can be proud of the results.”

5. Which new trend or feature in digital do you feel has the most impact for business/you area of expertise?

“I think the new CSS grid specs and custom properties are going to have a big impact on how we build websites in the next few years. I think we’ll see a decrease in the user of CSS grid frameworks and also a decrease in the use of Preprocessors like SASS and LESS as more and more features are added to vanilla CSS.”

6. When you’re not in the house, what do you like to do to relax?

“In my free time I enjoy playing video games, playing tabletop RPGs and board games, and catching up on my Anime watch list. I’m currently making my way through Persona 5 and planning for a charity Tabletop RPG session where we play for 24 hours straight.”