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.

Meet Jay – Junior Web Developer

Another new face at Mosaic Digital Media! We welcomed Jay this week as our new Junior Web Developer.

So without further delay, we’d like to welcome Jay to the Mosaic team!

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

“After graduating from University, I was looking for my first role within the industry. Still, I wasn’t sure which path I would like to take. After making sure my coding skills were good enough, I realised I enjoyed Web Development.

After this, I spent some time looking for roles that would suit my skills and match what I was looking for in a workplace. When I came across Mosaic, it stood out as the perfect role to learn and develop my skills whilst also growing within the company.”

How have you found life at Mosaic so far?

“As it is my first day today, I haven’t had much time within Mosaic. But so far, it has already been amazing, with the team being incredibly welcoming and friendly. I can’t wait to spend more time here!”

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

“My greatest strength is my problem-solving skills, as they are a vital part of any developer role. Having gained a lot of experience and skills throughout University, I spent time strengthening these skills. I cannot wait to learn even more from the great team at Mosaic.”

 

To speak to Jay about his growing Web Developer skills, 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: https://codepen.io/MDMJames/full/GRmqLer

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.

Remember, remember these 5 design tips for November

Bonfire Night, a night of colour and wonder with a heap of flare. Truly an enchanted time and a beautiful sight to behold. As website designers, we try and capture that wonder on every website we create as we believe a pretty website is a productive website.

To celebrate this bonfire night, in addition to eating our chocolate apples, we have decided to share with you 5 design tips that will give your website the glow up it deserves.

Before we get started though don’t forget if you need assistance modernising or creating your website, please give us a call on 01925 563 960 to see how we can help.

 

Equal Spacing & Consistent Sizing

The foundations of making a website as dazzling as a firework is to the first start by making your base design all neat and organised. As simple as it sounds, a consistently sized website is key to looking cool and is often overlooked and forgotten when people try and cram everything they have into a small area.

This applies for both the text size and the size of each section. Like a firework fountain, it is essential that the spacing is equal to show off what your business is capable of.

 

Complementary Colour Scheme

Such as a flurry of fireworks flying through the dark sky, making sure the flare of the fire makes a complementary colour contrast is a key feature in creating a firework display.

This same principle also applies when it comes to creating your website, an eye-catching colour scheme can astonish your viewers as they gaze upon the colourful creation that is your website.

The trick here is to try and keep the colour scheme on brand whilst trying to find colours that go well with one another without being overbearing on the viewer.

We use an online tool called Coolors that helps us choose a fitting colour scheme for each of our clients whilst embodying the essence of their brand.

 

Background Graphics / Abstract Shapes

Although this one is not quite as vital as the other design tips in this list we still believe this is the Catherine wheel of website design; not a showstopper but always welcomed. Abstract shapes draw the viewers’ attention to different elements of your website and can be used to great effect when trying to lead a potential customer to get a conversion.

Background graphics are an excellent way to make your website shine by filling up some white space with a little flurry of shapes, flash of colour or sparkle of imagery.

Generally, graphics like these don’t add to the practicality of your website but they certainly don’t take away from the design. You can see how we have effectively used abstract shapes and graphics throughout our website.

 

Placement

A well-shot rocket to light up an otherwise dull atmosphere can make all the difference between a good and bad bonfire night, likewise, a well-placed section can be the game-changer when it comes to making an outstanding and unique website.

Placement not only means putting sections in interesting and attention-grabbing ways but also means doing so in a manner that allows the more important content of your website to be more predominant such as your call to actions.

You must make sure that you don’t bury any content that is there to lead your potential customer to convert whilst also keeping your website layout fresh and flowing with popping placement and a fancy finish.

 

Personality

Last but not least, the cherry bomb on the cake; the true sparkler of website design – personality. Possibly the most important tip of all, above the rest, is to make sure your website is just what it says on the tin, yours.

Many websites will copy competitors that they know have a successful layout and there is nothing wrong with that but it is often overlooked that a truly great website is one that incorporates your business, your ideologies and what you stand for.

The best way for viewers and potential customers to get a feel about what you’re really about is by glowing up and quite literally showing your true colours.

 

It is understandable that you may find it difficult to incorporate any or all of these tips but doesn’t fret, we are here to help! Give us a call on 01925 563 960 or contact us here and we will see what we can do in building you your perfect website ready with the bonfire night spirit in mind.

From everybody here at Mosaic, we wish you a wonderful bonfire night with lots of treacle toffee, toffee apples and many brilliant fireworks – but most importantly; stay safe!

How a website can help your business thrive during COVID-19

2020. It’s not been the best, has it? However, at Mosaic Digital Media, we’re a very much ‘bright side of life‘ type of team. Which means we’ve spotted a somewhat silver lining in the dark clouds of Coronavirus, particularly if you have the capabilities of moving your business online.

All it takes is a dash of hope, a lick of luck and a really good web design team – we can definitely help you with the last part!

So if you’re struggling to see light in the current dark, let us be the torch to bring a brighter horizon into view…

To start with, let’s talk about turning one negative into a real positive and get your business thriving online during COVID-19!

 

Social-distanced shopping? Not so, online!

If you’re capable of selling products online and you’re not already doing so, you need to start selling online!

It’s a tricky time for shoppers at the moment and many, understandably, are nervous to venture out to shopping centres, supermarkets and the like.

To get the most out of your website and to put you in the best possible place to sell online, you’ll be needing eCommerce on your existing or new site.

Combined, we’ve got more than a decade’s worth of experience when it comes to building and designing eCommerce sites. We specialise in WordPress WooCommerce and Shopify, with both platforms giving you a variety of options.

We can help decide which of the above benefits you the most and the get to work on getting your business selling online.

 

Face to Face Mask Meetings? Stay safe with Virtual calls!

For many of us, the best way to get a feel of a business and a prospective new client is by meeting face to face.

This has been made very difficult for many businesses across the country, but it doesn’t mean an end to meetings!

Whether it’s WhatsApp, Google Hangout or Zoom, there’s plenty of platforms to take your meetings virtual. If you provide customer service, it’s also a great way to help respond to customer queries.

 

Working from home? It’s not all bad!

We’d all prefer to be in the office, but if you’re having to work from home, just think of the positives – for starters, as may tea breaks as you want!

Productivity doesn’t have to suffer just because you’re working from home. Your team can still be effective at working to deadlines, and keep the same levels of communication as you’d expect in an office.

Tools such as ClickUp, Slack and even your run of the mill email can all go a long way in ensuring your business and staff can work just as well at home as they do in the office!

However, all of this isn’t possible if your business hasn’t got a strong online process. To get you set-up to take on the challenge that this ‘new normal’ has brought, contact our Web or SEO team on 01925 563 960 or fill in our enquiry form here.

5 important tips to improve Website Security

As the internet becomes ever increasingly popular, to nobody’s surprise, so is the amount of private information that is shared over it and with this, the number of hackers and people trying to steal this sensitive information.

Even with the GDPR law implementation in 2018, many websites are still insecure and the information is still prone to be stolen and misused. Stealing information is unfortunately very common in this day and age with big corporations such as the NHS and TalkTalk being hacked and security breaches always showing up on the news.

This guide is to help you increase your website security and prevent hackers from gaining access to your website, downloading malware and stealing information.

 

How to protect your website

There are various website security procedures you can follow to help protect yourself from hackers. With many layers of website security, it usually means even if the hacker would manage to penetrate one of the defences there will be many more that will stop them in their tracks. Here are just a few ways you can improve your website security and protect your business:

 

Secure Servers

Some companies are in the belief that it is a good idea to self-host their own websites as it is a cost-effective solution and all of the website data is kept in-house. We are inclined to believe that this is not such a great idea, as these servers tend to be insecure and therefore a potential website security breach. We recommend hosting your website on a secure server that many companies, including ourselves, can provide. To read more into the different types of hosting available click here.

 

Strong Passwords

This may not come as a surprise to a lot of people but we cannot stress it enough the importance of strong passwords. A strong password is just not the combination of characters to make a secure chain it is also making sure it is memorable and known by as few people as possible. Your password can be the as complex as you want it to be but it means nothing if you cannot remember it. Complex passwords tend to end up being written down and placed in an easily accessible location; this, of course, does not really improve security when the details are out in the open for anyone to find and use.

 

Updated Software

Software is constantly being improved upon and updated to the extent of when you open the program and there is an update available you get mildly annoyed. Although once you update the software and seems that nothing has changed, the odds are something has and that something has to do with an improvement in website security to prevent any breaches. The reason software is so regularly updated is because as soon as a security flaw is located hackers will try to capitalise on the situation and will attempt to breach the software to get into your website.

 

Using HTTPS

You probably recognise these letters from May 2018 when the newest GDPR laws were rolled out throughout Europe, you can read more about GDPR here. If you missed the whole GDPR situation then you will still definitely recognise it from many website URLs, such as ours. Using HTTPS does more than just put a quaint little lock icon next to your website name, it also ensures that the content your website is sending is secured and cannot be tampered with or viewed by any unintended people whilst it is being sent across cyberspace.

If you are unsure on how to secure your website or want to make sure your website is on a secure server then contact us or call us on 01925 563 960 and we will move you to our servers and install a FREE SSL certificate.

 

Security plugins

We are big fans of WordPress here at Mosaic and with WordPress comes the vast selection of plugins available, with those comes the security plugins. There is a huge variety of different security plugins available to install such as WPMU’s Defender and Wordfence. These plugins are amazing at locating and locking down any security flaws it detects throughout your website and comes with the added feature of being able to scan your site files to detect any potentially hacked files that may have already snuck their way through your website security and breached some files.

If you’re fearful of the potential of your website being hacked and would like assistance in setting up website security and protecting you and your client’s information why not give us a call on 01925 563 960 or Contact Us to discuss how we can help you.

What is a Branding Kit?

In today’s day and age, image and how we are perceived is becoming the forefront for most people. With the introduction and increasing growth of social media platforms such as Instagram and SnapChat, the world is becoming more and more focused on appearance. Even though in the past what we wore, ate, drank or did was important to friends and family, with these powerhouses of social media becoming an everyday need to use. Instagram is all about showing people a sneak peek into your everyday life and many people are becoming in there own right a brand.

Before we delve deeper into the understanding of what a brand identity and what a branding kit is, we need to first understand what branding is.

 

What Is Branding?

Branding is something that is memorable to the person looking to buy a particular product. If you were to buy a mobile phone most people would say buy an Apple iPhone or a Samsung device. If you were to buy trainers, Adidas or Nike would sure be at the top of your list. Brand awareness and exposure are critical to a business’s success. For you as a business being able to see the general public identify your business against a product or service shows the great success of this.

 

This is why branding is first and foremost important but also gives identity to your business.

With any small business, their image is important to improve your revenue and for people to remember your business. A catchy name and a Yellow Pages advert used to be all a business needed to get leads or work flowing in but this kind of marketing does not work as well anymore. Consumers are looking for professionalism on all fronts to invest their money and time into a product or service.

 

Below are seven different steps you can take to improve your brand identity and utilise a branding kit.

 

Brand Identity

Even though the idea of building a branding kit is to coincide with the overall brand identity, you first of all need to look at what you want your brand’s image to be.

 

Who are our businesses target audience

Helps identify how your brand’s image is perceived. If you a young App development agency you would be appealing to a younger demographic whereas a catering company for the elderly will need to cater to this target audience. It is important to find this as your brands use of language across emails, website, letters, leaflets, vans, etc will need to reflect this narrative and audience selection.

 

Consistency is king

Most businesses start off with good intentions and develop a branding kit which will allow them to build different marketing strategies but over time due to many different factors, the branding toolkit can forget about. By misusing the branding kit or using the incorrect logos, colour or fonts you could come across to your client as sloppy and unprofessional.

By keeping the consistency optimal your brands image across all different mediums such as your website and social media platforms will come across well to potential prospects and turn them into clients.

 

Keep it simple

This has to one of my golden rules for brand kits and business identities. If you take some of the biggest brands such as Apple, their whole is based on simplicity. Lots of small to large companies invest lots of man-hours and cost to create brands that are overcomplicated and fussy causing them to miss the mark with potential clients. If you keep your brand message, look and persona clean and simple this will portray your brand’s identity well across all of your branding toolkits.

 

Develop a branding strategy

Lots of businesses jump at the chance to improve their image by throwing themselves directly into a rebrand or chance their branding kit without a second thought. This can prove to a be a costly mistake as with anything you need to prepare and plan your strategy for a branding toolkit.

 

Research different media and brands

You may feel that looking up your businesses competitor is like cheating but all research is important. By investing time in looking at what your competitor is doing is a worthy step to better your branding success going forward.

Other avenues to take in developing a successful branding kit is to make sure you look at different media outlets such blogs to ensure your branding is bang on trend rather than several years too late and instantly looking outdated to your potential prospective clients.

 

Brands Always evolve

If you feel like a business you have navigated your way through the whole branding maze successfully and have a brand toolkit that demonstrates your business in a nutshell, this is great news. However, this is something that needs to evolve as time passes. Brands in today’s market cannot remain static as the image of your brand can be seen as ‘stale’ as more time passes. If you take Nike there marketing and branding are always evolving and taking a new direction and keeping up to date with current trends. As a small business owner, you will need to make sure your brand and branding kits also do the same.

 

Invest In a Digital Agency With Graphic Designer

My final point to wrap this up is if you are unsure on anything always invest in a digital agency such as Mosaic Digital Media Ltd as we have some of the top talents in the NorthWest who can help your business develop a branding kit to shout about.

What is Liquid Template Language – An Introduction

To really understand what liquid template language is, you need to delve into the world of eCommerce and take a good look at Shopify. If you are a new user of the Shopify eCommerce system, you wouldn’t know instantly what code sits behind all of the pretty interfaces and easy to build product options. But as a web designer or developer, you may wish to find out more about what goes on under the hood of Shopify.

Many developers make the mistake of believing that Shopify uses some elements of PHP in its main code base, similar to how most other eCommerce platforms do, some include WooCommerce, Magento, OpenCart and PrestaShop. Unlike these other eCommerce platforms, Shopify has its own purpose-built templating language called Liquid it uses for themes for your online store.

Is Liquid a language or engine?

Some developers call Liquid a type of templating language, whereas, other people believe that it is an engine for Shopify themes. In simple terms, this is just a label and both terms in their own right are correct. I prefer the term “language” as with other traditional coding languages such as PHP, HTML and jQuery, these have syntax with a common output, IF statements and loops. Even with these similarities to other coding languages, this is where the common factors end. Shopify’s Liquid Templating Language is intuitive and has so many benefits over conventional coding practices.

Liquid Files

Once you’ve managed to get under the hood of Shopify and start to look at the actual theme development aspect of the eCommerce platform where do you find these liquid files? Like HTML and PHP, the files will always end in the language extension. See below:

  • afilename.php
  • afilename.html
  • afilename.js

This is no different with liquid template files as these end in .liquid, for example, “afilename.liquid”. This is the easiest way to establish what code you will find inside the actual file.

Once you have opened a .liquid file you will find some code you will be familiar with, HTML. Liquid templating language is a mixture of normal HTML code and also liquid constructs. You can easily distinguish the liquid tags from HTML code as these will follow one of the following patterns:

  • The double curly brace delimiters {{ }} denote some output
  • The curly brace and percentage delimiters {% %} denote logic

For an established designer or developer with some past experience should be able to read this code easily without any extensive training.

How Does Liquid Work with Shopify?

Shopify eCommerce platform will decide which templates are to be shown to the frontend user of the website. For example, if the URL is http://myshop.myshopify.com/collections/tshirts Shopify will render the collections.liquid template.

Once Shopify understands which template to show to site user, the template will be parsed to look for Liquid placeholder tags. These placeholders are replaced with relevant data from your stored database. It does take some time to understand the connection between Shopify and how the templates work but once you get the hang of this, it will be much easier to work with.

What Are Placeholders?

Placeholder is the simplest form is a piece of code that will be changed when the template is sent to the browser to parse. The information sent to the browser will usually be some logic as discussed earlier using tags like {% %} or output using tags such as {{ }}.

[markdown]
“`html

{{ product.title }}

“`
[/markdown]

As you can see from the above example, this is a mixture of HTML tags (Heading 2) and .liquid code {{ product.liquid }}. This is using the simple output tags from Shopify’s coding language and when passed to the browser will change the Liquid into information pulled from the database. In the example below I have left the heading 2’s in:

[markdown]
“`html

My New Online Store

“`
[/markdown]

Unless you use a filter on the Liquid tag this will print exactly what is stored in that field in the database. Filters will allow you to adapt further.

Logic Tags

As with other languages, Shopify’s Liquid Templating Language allows you to apply some logic. Please see the example below:

[markdown]
“`html
{% if product.available %}
This product is available
{% else %}
Sorry, this product is sold out
{% endif %}
“`
[/markdown]

The logic example above is an IF Statement. By using Liquid logic we can determine the output that is rendered based on whether things such as product stock level is equal to in stock. Liquid code goes one step further and as well as IF, ELSE and END IF logic parameters, Liquid allows you to use boolean logic such as true or false.

Summary

Liquid, in a nutshell, is a very powerful offering brought to the table by Shopify’s ever-growing eCommerce store system. Liquid has so many benefits and advantages over its nearest rivals in terms of usability and adaptability. For any new web designer or developer with some HTML experience should be able to get off the ground quickly with Shopify theme development.