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

WordPress – The Good, The Bad and The Ugly

Starting out as a blogging platform, WordPress has grown into a fully-fledged content management system. With 34% of all websites based on WordPress, its popularity is indicative of the flexibility of the platform and the creative possibilities this brings.

We have sat down with Nathan and James, two of the very best from our website development team here at Mosaic Digital Media, to talk to them about their views around WordPress and some of the experience they have using the platform.

 

So what makes WordPress different?

One of the biggest benefits of using WordPress is the integrated Plugins, which the user can download and install on their site to provide extra functionality. Plugins are community created and those provided through the WordPress official directory are free to use, although there are premium/subscription-based plugins available.

The use of plugins allows for sites to be tailored to a specific need, for example allowing users to register and login to your site, adding eCommerce functionality to create a web store or the use of APIs to link your site to various external platforms. With over 50,000 plugins listed on the WordPress official directory, a solution can be found to meet almost any specification.

Being a web-based service, WordPress allows for site updates to be made whenever or wherever as long as you have a suitable device, an internet connection and the logins details. This means that it is very easy to make amends to your site without the need for transferring files or data, a process that is assisted with the inclusion of a built-in visual editor. Instead of having to write code for new site features or styling, the visual builder provides an easier method of selecting and editing page elements. This makes WordPress fairly intuitive and straightforward to use, with a small amount of training anyone can grasp the basics of using the system. This is useful for us here at Mosaic Digital Media, as it allows for a client to take ownership of their site (should they wish) after it has been developed and make basic amendments to the site such as updating text or images.

 

Can WordPress still be used as a blogging platform?

Can WordPress still be used for blogging?

As mentioned, WordPress began its life as a blogging platform. And although it has developed into much more than that, the ability to create blogs for a site remains and is made incredibly easy, again due to a new built-in editor. The process can be as easy as creating a new post, giving it a name, adding content to it and then publishing it on your site. Once you have added an area on your site to display blog posts, newly created posts will automatically be added to it.

The creation of blogs is something that Google recommends for SEO purposes, as it means the site is constantly being updated and added to. SEO is made easier with WordPress, for several reasons. As mentioned previously, the use of plugins, specifically those which are SEO specific, such as Yoast SEO (a firm favourite here at Mosaic) allow for metadata to be added to a site or specific pages, or for keyword searches to be targeted. This, in combination with the regular automatic WordPress updates, often means that Google will favour these sites and they will rank higher on search results – potentially leading to greater trust and more conversions.

Whilst WordPress is an excellent choice for creating and maintaining a website, there are many methods of doing so, some of which are not optimal and can lead to problems further down the life span of your site. One of these methods is to use a pre-made theme.

 

What are pre-made themes?

A theme is essentially a skin for WordPress, changing the layout of the site and some of the functionality. For a beginner, the idea of a pre-made theme may seem appealing – a fancy looking website out of the box that simply needs custom text and images adding to it. However, these themes often are extremely limited in the amount of customization you can apply, with layout issues occurring if you stray from the design.

Other issues crop up with pre-built themes, for example, they often feature lots of redundant code. This may not seem like a big issue, but it can affect both the site load speed as well as SEO potential. Another potential issue is the conflict between your theme and installed plugins. This is an especially important point to mention, given the importance of plugins for site customisation. When using a pre-made theme, attempting to use plugins may lead to layout or functionality issues that cause your website to display incorrectly or in the worst-case scenario, break your site.

Of course, this is not to say that WordPress themes are wholly bad, for basic blogs, portfolios or small scale personal websites, themes provide an easy way for individuals to create their own website. However, when it comes to larger projects, such as a website for a company or eCommerce shop, pre-built WordPress themes are not the best solution.

 

How we can help

Here at Mosaic Digital Media, we’re big on WordPress! If you’ve attempted to build your own site using a pre-built theme and things have gone awry, or you’re simply in the market for a professionally built site get in touch today. Contact us on 01925 563 960 or use our contact form to see if Mosaic can help your business.

Meat Free Marketing – Veganuary 2020

‘Veganuary’ (a play on the words ‘Vegan’ and ‘January’, if you were confused) has kicked off 2020 in an exciting way. Starting in 2014, attempting to promote and educate about a vegan lifestyle, Veganuary challenges people to go vegan for the entire month of January. Obviously, this has led to many UK brands using social media to promote their latest vegan products to appeal to those taking part. In this blog, we are going to look at examples of two easy marketing tactics used successfully by brands during veganuary, and, how they can be used to an advantage in your own marketing campaigns.

 

Hashtags

Whether you love them or hate them, hashtags are an undeniably powerful tool to use in the right context. Acting as a digital ecosystem of sorts, they allow users to find or browse the content they are interested in, as such; they can be extremely useful, both when attempting to target a specific audience, or attempting to carve out your own little niche in the social media scene.

Taking example from the Veganuary campaign itself, the use of more generic hashtags such as #vegan or #plantbased serve to spread the Veganuary campaign to a wider audience. This has helped to contribute to the campaign’s growth from just around 1500 participants in 2014 to over 385,000 in 2020, with every year in-between seeing a doubling in these numbers.

Whilst more generic hashtags can reach a wide range of people, creating your own hashtag can serve to help build your own social media bubble relating to your campaign. For example, the Veganuary campaign uses the hashtag #veganuary to promote themselves and allow social media users to join in with the hype. The use of your own hashtag can lead to a snowball effect of increased activity and awareness, all the while linking back to your original campaign.

 

veganuary 2020 social media - #veganuary2020

Ultimately, hashtags are a way to spread your message to specific communities, or in a sense, to create your own social community, all with the intent of increasing visibility.

 

Community Interaction

Another important aspect to social media marketing is to interact with your audience (simple, really). It is all well and good rolling out your fancy new marketing campaign, but you need to be willing and ready to interact with users. We have all seen company social media accounts with automated responses and low levels of interaction – it comes off as cold and unhuman.

The bakery chain, Greggs, who recently have introduced new vegan items to their menu, coinciding with veganuary, have shown a great example of how this is done. Some people took to social media to voice their less-than-positive opinion regarding this matter – The Greggs social team responding in turn, mostly with a slightly sarcastic, humorous tone. They have also taken the time to respond to any questions users have, such as where to find these new products and what ingredients they contain.

 

greggs-twitter-screenshot

 

Whilst it is always a good idea to respond to simple questioning and be helpful where possible on social media, it can be a tricky business to deal with negative attention. The tone of the response and the impression you want to give off should match your business – for example, you wouldn’t expect a large international banking firm to use twitter to reply to trolls with gifs. However, with something as trivial as a vegan pasty, Greggs has managed to use both negative and positive interactions to their advantage and increase awareness of their campaign.

The phrase ‘people buy from people’ is used around the Mosaic office from time to time, serving to highlight the need for a business to appear as genuine and people focused. This is exactly what social engagement will achieve for your business and will set your company apart from others, for whom social media marketing is not a priority.

 

Using hashtags and interacting with users on social media might seem like an obvious part of running social media marketing, which is exactly why careful thought and care needs to applied towards their use. Their simplicity is by no means an indicator of the effect they can have when used properly, as such they should be given adequate resources to be properly implemented, in order to provide your business with maximum results.

 

Need A Helping Hand?

Here at Mosaic, we understand the importance of proper social media marketing to get your brand out there, to the right audience. We follow trends and look at what does, and does not, work in the world of social media marketing, so that we can offer our clients expert advice and services.

If you’re struggling to make a difference with your social media marketing or are looking to start the decade with a brand new marketing campaign, give us a call on 01925 563 960 or use our contact form.

 

A Brief History Into Responsive Web Design

In days of old, people wishing to access the internet were limited to using a desktop computer, which unfortunately for the user, were large and cumbersome. However, fortunately for web developers of the time, due to the uniformity of screen sizes, a website would be displayed more or less the same for all visitors, without the need for any fancy trickery.

However, things got complicated when smartphones took over. With an entire spectrum of screen sizes and the increased use of mobile devices to access the internet, websites no longer had a single audience to cater for. Developers now had to build websites with the knowledge that anyone, using any sized screen, could potentially be a visitor to their site. In particular, a solution had to be found for properly displaying websites on smaller screens, which naturally are unable to display a site in the same manner as a widescreen desktop display.

One solution (now outdated), was the practice of separating audiences into 2 groups – mobile and desktop. A separate site would be created for each group, which would then be displayed to visitors respective of the device being used. Although an effective solution, it came with many disadvantages. Not only causing a negative impact on development time, the user experience between devices due to inconsistencies between them. This method also fails to take into account the variety of screen sizes and shapes, so the site could display differently on certain devices. Thankfully, a more elegant solution was developed – responsive web design.

 

What actually is responsive web design?

Responsive web design is a method of development whereby the layout of a site, and the content within, can automatically respond to the limitations of the screen it is being displayed on. Page elements can be sized using percentages rather than pixel values, horizontally aligned elements can be displayed vertically to fit screen constraints and text and images can resize to the correct proportion.

Typically, a site will be designed with three ‘sizes’ in mind – desktop, tablet and mobile. For each, page elements can be styled to change how they are displayed at different screen widths corresponding to these ‘sizes’. Importantly, this is achieved by using a single site, hence the name ‘responsive’. A responsive site is a one size fits all solution, eliminating the need to create separate custom site layouts for specific screen sizes or orientations.

To illustrate how a site can respond to different sized screens, an example from our own portfolio can be seen below from 1895 Sports.

Responsive Web Design on 1895 Clothing

 

How can responsive web design impact your business?

Responsive web design is important for your business as it directly affects how visitors interact with your site.

It is important that the information within a site is available to all users, in a way that is accessible and easy to read. With more and more people (around 50% of all internet traffic) now using mobile devices to access the internet, ensuring that your site is available to this demographic is important. A user presented with a poorly displayed site might think of it as unprofessional or outdated, and will likely look elsewhere to meet their needs, causing a business to miss out on new clients.

Responsive web design will not only affect the experience of visitors to your site but also how your site is presented to the world, through SEO. Many SEO benefits come from having a single responsive site that can adapt to all screens. By only needing to serve one site, page load time is reduced. This improves user experience with the site and also Google rankings, as websites with a faster load time are favoured.

Similarly, responsive websites have the benefit of having no duplicate data. If it were that separate sites were created for different devices, Google would read the content of these sites as being identical, something which Google would penalise – negatively impacting your site ranking.

Here at Mosaic Digital Media, we build our websites responsively by default – as it should be! If your site is outdated and needs a responsive makeover we can help – Give us a call on 01925 563 960 or contact us here.