Author: Liam

Codevember 2018

6 Simple Codevember Creations to Inspire you in 2018 | #Codevember

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

5 Web Design trends of 2018 | Web Design | Mosaic Digital Media Ltd

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.

10 Benefits of using Shopify for your Ecommerce website

10 Benefits of using Shopify for your Ecommerce website

Shopify is a hosted eCommerce solution and is fast becoming one of the biggest and most successful eCommerce platforms in the world. To put Shopify into some numerical context, currently 270,036 websites using the Shopify platform, with a market share of 13% against other eCommerce platforms such as Magento and WooCommerce.

Here are 10 reasons while we would recommend using Shopify for your eCommerce website.

1. It’s a hosted Platform

Shopify is a hosted platform. This means instead of hosting the site on your own server it is hosted on there own optimized servers. Unlike self host platforms like Magento which require a very particular server setup to run smoothly, Shopify manages the hosting and server config which ensures your store is always run at it best.

2. Security Updates

Due to Shopify be on hosted platform and the way Shopify stores are built using Shopify’s own language (Liquid). Any security updates that need to be done on the eCommerce platform are automatically performed as needed without any downtime for your store allowing you to continue to generate revenue through your store. Platforms like Magento requires the host to perform these updates and with older stores and the multitude of 3rd party plugins these can cause your store to break, leaving you hanging while the plugin developer or host catch up and create fixes.

3. Apps

Shopify has their own app store which can be used to extend the functionality of your site. These apps are all vetted and approved by Shopify before they can be added to the store. If they are costed then they operate on a subscription base, this payment model means that as long as the app is on your store you will get updates for the plugin automatically and be able to get support from the plugin developer without extra charge. Platforms like Magento have numerous plugins which are not vetted by the platform, can cost £100’s to purchase and charge extra for future support and updates.

4. Customisable

Shopify websites are designed to be customizable and put a lot of control in the eCommerce website owners hands. Your stores theme can be edited within the control panel of the site from the simply moving the content and section on the pages to making edits to the different templates files if you wanted to. Shopify has its own vetted theme store and we can also help build a new theme to fit your brand.

5. Customer Support

In addition to the support we can offer, Shopify also has its own customer support team who can help 24/7. In addition to this they also have excellent documentation in there help center on a number question and topics you may have about your store.

6. SEO & Marketing tools

Shopify has a built suite of tools to help you manage marketing your store and to see a number of stats about your store and it performance. It also has built-in functionality to optimise it for search engines. Also on the App Store you will also find some additional options that can be bought and added in giving you better options.

7. Multiple sales channels

Shopify can act as more than just 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)
  • Buys buttons which can be used to add products to other sites
  • Facebook so you can see items from your facebook page

There are also a number of apps to integrate with other external systems which help to make sure your stock level stay the same across all your platforms.

8. Abandoned cart recovery

Shopify has built-in Abandoned cart recovery which means you can alert your customers if they abandon their carts without checking out after a set amount of time.

9. 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 GDPR has been the flavour of 2018 so far, this has been one of the biggest benefits allowing small to medium businesses to do what they do best, rather than worrying about legal informational pages.

10. Built-in payment gateway

Shopify has its own built-in easy to set up payment gateway with competitive rates. Or if you already have a payment gateway you prefer then Shopify has support for all the popular gateways including:

  • Amazon Pay
  • Authorize.net
  • PayPal Express Checkout
  • SagePay
  • WorldPay

a full list of the UK supported gateway can be seen here: https://www.shopify.co.uk/payment-gateways/united-kingdom

Why don’t you get in contact today to see how we can help you to get your online store up and running on Shopify.

Why WordPress is more than just a Blogging Platform

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 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!

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.”