Meet Sadie – Apprentice Web Developer

Another new face at Mosaic Digital Media! We welcomed Sadie recently as our new Web Design Warrington Apprentice.

So without further delay, we’d like to welcome Sadie to #TeamMo!

Hi Sadie, welcome to Mosaic Digital Media! How did the role come about, and what would you say the definition of your role is?

“I left university finishing a degree in Computer Games Technology unsure on a career path to follow. Over lockdown I was able to start some web development courses and was adamant that was what I was going to pursue.

I feel very lucky that Mosaic have given me the opportunity to continue learning while getting industry experience. My role will be taking the fab designs the design team create and bringing them to life”!

How have you found life at Mosaic so far?

“Everyone has been super lovely and approachable during my first week. I’m learning lots each day and Mosaic has so many interesting projects in the works so I’m looking forward to seeing what the future holds”.

What would you say your most significant strengths are, and why did you want to take up the position with Mosaic Digital Media?

“I would say I have a positive, can-do attitude to working. I try my best at everything I do, and I believe this drive will push me to become a better developer and a valued member of the team.

I took the position with Mosaic Digital Media because they gave me sense of really caring about their team and their career progression”.

To speak to Sadie about Web Design Warrington, call 01925 563 960 or use our contact form here.

CSS Gradient Tool Build

Here at Mosaic Digital Media, we get time allotted for independent training each week to develop our skills relevant to our roles. This can be in the form of subject reading and research or in creating little projects that utilise specific technologies and skills that we would like to improve our knowledge of.

In the web team, we regularly use HTML, CSS, PHP and JavaScript (amongst others) to create all of our websites. Out of these skills, I have the slightest practical knowledge with JavaScript – a programming language that uses scripts – or little pieces of code – to do a wide array of things on a website when you view it. This could include animations, changing colours or showing/hiding information.

So, to improve my skills, some of my training time has been dedicated to JavaScript. I find programming languages to learn by doing something practical, as such I decided to create something that uses JavaScript.

As well as building websites, my role also involves designing websites, as such, I work with a lot of colours and gradients. Therefore, I decided to build something that bridges the gap between design and development and create a tool that could automatically generate a random gradient at the touch of a button.

The end product was a tool that will generate a random gradient with two colours and a random angle of direction. To make it more user friendly, I also included a button that will copy the CSS code needed to replicate the gradient to the clipboard for use elsewhere.

The generator was built with HTML, SCSS and JavaScript, using the online development environment CodePen. The HTML and CSS code is nothing exceptional, but it’s the JavaScript that does all of the magic.

Each time the button is pressed, it will generate two random colours via their hex value and choose a number between 0 and 360 (for the angle of direction).

It then uses a function to add the various pieces together in a string, in the same way, that CSS code will display a gradient – this then allows the gradient to be used within the project, such as where the gradient is displayed

See the Pen
CSS Random Gradient Generator
by James Brewer (@MDMJames)
on CodePen.

Or take a closer look here:

A Guide to Website Flat Designs with Adobe XD

When we start a project, we always like to create a website flat design before developing and coding the site.

Below we have included a flat design for one of our clients;. However, the template isn’t a finished build, it is easy to understand how the final website will look.

Each flat design comes with its own “live link” that will update as changes are made to the design, so new revisions don’t have to be sent across whenever an element is adjusted. This saves hassle for all parties involved. The latest revision will always be present on the link, so there is no concern about having an outdated flat design.

This link can be viewed at any time, and though it isn’t the actual live site, it may have some interactive elements that will replicate how the site will function when it is developed. Interactive features will give you a better idea of how each aspect of the website will work with one another to provide you with a better idea of the User Experience and User Interactions.

As stated above, this is not a live and developed site, so elements such as links and forms will not be interactive. The whole website will not be designed, just the key pages.

What is a Flat Design Used For?

The reason why we create a flat design first is to allow you, the client, to see what the finished result of your website will look like before it has even started to be developed. This allows for changes and revamps to be made quickly and easily without deleting or modifying code.

With a flat design, the structure of the website is visually accessible without a significant time investment. This means the design can quickly be approved without waiting for something to be coded first, decreasing development time as a whole.

It also allows us to visualise what we are building as we code the site, saving us time from going back and forth between elements to adapt them per new section we create. We have found that when we create a flat design before coding, the final result flows more fluidly and gives a better User Experience.

The flat design also dictates the flow of the website. It effectively highlights what pages should link with one another and how to direct the user to the website goal in the fewest clicks (be it product checkouts, information pages or otherwise).

Mobile Layouts

Over 50% of website traffic has been reported to come from mobile devices; as such, it is as important to design for mobile as it is for desktop. This is why we do just that!

In our designs, we will include the desktop layouts for the key pages of your website (usually the home, inner, shop and product pages) and the mobile variations that come with it. This will make it easy to visualise how the website will look when shrunk down to mobile device size and how each element will fold into one another to remain responsive.

A mobile layout can be easily identified by the thinner nature of the page, with each element being stacked one above another rather than on the same row as per the desktop designs. An example of this has been included below.

How to Comment

A feature of the software we use to create flat designs is a helpful tool that allows for pinpointing an exact location on the design and adding a comment on it. This is especially useful for features that require modification or removal that you, as the client, can easily highlight and request.

It is a simple process to comment on the flat designs; all you need to do is in the top right section where the “make a comment” text box lies, click the pin icon, then select the element on the page in which you wish you need to make a comment.

Once the pin has been placed, type the comment into the comment box and press submit, this will add the comment to the list on the right sidebar of the design. Clicking any of the comments on the sidebar will take you to the exact pin for easy navigation.

If you’re looking for a new site, you’ve come to the right place! Call our Web Design team on 01925 563 960 or use our contact form here.

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:


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.