Philboss Design Copyright 2024

Accessibility in Email Design: How to Execute it Right

There are 253 million people with visual impairment while 300 million colorblind people. You must take them into consideration while designing any email. It is quite likely that they are taking the help of screen readers, eye tracking systems, screen magnifiers, sip n puff devices, and other adaptive technologies.

To cater to all these subscribers who might be using such tools, designing accessible emails is inevitable. So, let’s get a hang of all the tips you can use to create accessible emails.

1. Make use of the <title> tag properly

You must set the <title> tag of the email without fail. This is necessary because:

  1. For subscribers accessing your email on a browser, the webpage tab will get a title through the <title> tag.
  2. If the subscribers are using screen readers, the title will make the email more relevant.

See the HTML code below to understand how you can use title tag in emails.

2. Do not forget to add HTML language attribute in the email code

If you are a global business with several branches in different countries, you might have to send emails in different languages according to their geographical location. For instance: Your subscribers in the Netherlands would prefer to receive emails in the Dutch language while people in Canada would like to read emails in English or French.

In order to inform the screen readers about the right pronunciation, you should always set the language attribute by using lang=””. By doing so, the devices and email clients will understand how to write the words.

Check out w3schools to get the list of language codes. Here’s how the code will look like.

3. Add semantic codes in the email

Semantic codes facilitate better comprehension of the emails as screen readers can clearly figure out the paragraphs and headings. Use <H1> and <P> tags so that the screen readers can convey the message of the email without any confusion.

You must maintain proper visual hierarchy and logical reading order in the emails. Regardless of the devices the subscribers are accessing your emails from, they must be able to read the content in a proper flow. This becomes particularly important for people with cognitive disabilities and users taking the help of screen readers. It will facilitate quick consumption of the content.

See this email by Survey Monkey wherein they have placed limited content and relevant visuals with plenty of white space. The CTAs are perfectly in contrast with the white background.

4. Make sure your font size is at least 14px

If your email has tiny fonts, your subscribers will find it hard to read and not engage with it. Therefore, you must ensure that your emails are easily readable. Keep 14px as the minimum font size. Also, keep the size to 16px in case you are using a light font face like Montserrat.

5.  Avoid center-aligned email copy

It can be daunting for a dyslexic patient to read center-aligned email copies. Of course, it looks more visually aesthetic but it can make the email inaccessible for certain subscribers. It is advisable to have a left-aligned copy with a properly sized font face.

6. Do not add flashy GIFs

Many marketers add flashy images or animations with too bright colors. That is not recommended according to the principles of accessibility. GIFs flashing at the rate of 2 Hz to 55 Hz can worsen photosensitive epilepsy leading to seizures. Therefore, you must design GIFs that end after three cycles or within five seconds. See to it that the frames in your GIFs transition smoothly and do not have a high animation rate.

7. Have a suitable alt-text for the email visuals

Screen readers will not be able to understand what the images are trying to convey. Hence, you must add a relevant alt-text that describes what the image is about. As a result, it will render the email readable and accessible even if the email clients block the images by default. If an image is placed only for its visual impact, add an empty alt=“” on the image. Screen readers will not consider such visuals.

8. Pick an appropriate contrast ratio

Imagine blue text on a purple background. It will be nearly impossible to read it, right? Now, take a look at the text block below. Very easy and convenient to read, isn’t it?

Always follow WCAG guidelines and maintain 4.5:1 as the minimum contrast ratio. This can be modified to 3:1 for a font size of 23 px or bold fonts larger than 18 px. Follow the thumb rule of arranging dark text on light backgrounds and light text on dark backgrounds to enhance the readability of the content.

9. Create a text-only version for all your HTML emails

A plain text email can be of great value if the subscriber is using a screen reader. Therefore, make it a point that all your HTML emails are accompanied by a text-only option.

10. Space your email elements properly

A cluttered email is the biggest turn-off for any subscriber. You must have ample white space in your email so that it becomes easy to skim through or read. Your subscribers will get enough breathing space to consume your content properly. Add padding to your tables and visual elements with proper line heights and spacing in the text.

Wrapping Up

Whenever you are designing and coding your emails, you must always take into account these accessibility principles. It will not only help you to reach out to a larger audience but also impart a pleasant experience to them. This will, in turn, contribute to a higher ROI and better conversions.

The Author

Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free responsive HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.

What You Need To Know About Using Video For Design

How to integrate video into your web design

Websites can no longer afford to be static. The average user has moved on from images and text on a plain background, hungry for new ways to consume content. By far, video is their preferred method of getting this content.

Before you start to develop your own video content, you need to think about how it will integrate and benefit your web design. Using video within web design isn’t just about re-creating something you saw on YouTube and adding it onto your homepage, it’s about representing your brand and giving an impression of your aims and creativity. Video doesn’t even just mean conventional video content, it can be more creative and subtle, such as animation.

With this in mind, let’s take a look at some of the most common methods.

Background videos

One of the most popular forms of integrating video into web design. Full-screen background videos are striking, and succeed because they force the user to intake the content. They typically sit in the background of the website or within a large top banner, lasting up to a minute and rarely making use of audio.

Web designers like background videos because they give a website a modern feel and force the viewer to confront the content, allowing you to showcase important information or a campaign as soon as the page loads within any action from the user.

Movement catches the eye first as a page loads, so video can act as a starting point for your homepage design. Video walls can also be used to showcase other forms of content, such as social feeds for specific campaigns like the kind Walls produce. These are beneficial as rather than putting company info in a visitor’s face, you’re showing them your most vital campaign at that moment.

Video loops

Video loops are a more subtle method. While background videos can be looped, they’re not necessarily the same. As automated content they serve much of the same purpose, but are generally used as showreels, helping to encompass the business’ successes and culture to the visitor without asking them to engage for long periods.

Sometimes a viewer can find themselves watching this loop multiple times, waiting for a specific moment they missed the first time. The opportunity to do this can increase watch time where they would initially have moved on. The aim of this content is to be short, engaging and informative. They are simple to make and have been shown to play a huge part in user retention. At the simplest level, Kapwing allows you to loop short clips to use on your website or social media, giving you fun, engaging short-form video content to attract new visitors with.

Video players

Traditional video content is what we’re most familiar with as frequent browsers. This video content is accessed from clicking play on a video player placed strategically on a website, generally to complement other content or pages. More a style of content than a design element, getting creative with their placement can prolong engagement with the page. Marketers enjoy using this type of video to produce interviews, product highlights and behind-the-scenes content.

Selecting the right video player is key to making video content within your web design a success. How your website is built will play a huge part in this, as some more rigid CMS are resistant to video. Most leading website builders will feature video compatibility automatically integrated or accept the use of video apps. However, adding content to these pages may not always be as straightforward and require the use of an external video player. While free, YouTube and Vimeo aren’t always the best option, and a private video host such as Cincopa may be better suited to your CMS.

Emerging methods

As video evolves as a medium, your website needs to be capable of keeping up with emerging trends and the customer demand for new forms of video content. VR, for example, is a growing interest amongst consumers looking for new methods to help them make purchase decisions.

This means future-proofing your websites for developments in the video industry should be a major consideration for any business owner or web designer. Leading CMS platforms like WordPress have already invested heavily integrating VR and AR in their design, helping to increase customer buying confidence with immersive technologies.

How video can retain audiences and grow engagement

Video is a proven method of keeping users on your website and improving engagement rates. The average user will spend 88% more time on a website with video content than on one that lacks it.

No matter what kind of video content you have on your website, it will increase engagement and time spent on it to some level, even if it is just the second spend watching the content. You can leverage this engagement and push it throughout the website, using your video to direct visitors to other pages.

Video content performs best on homepages, product pages and when complementing social proof. If the video auto-plays or is in an inherently obvious place on the page, it will encourage the user to watch before proceeding with the rest of the page, which can provide context to the rest of the page and website, improving the total time they spend on the page.

How video in your design is brand building

Video is one of the best tools available for brand building. A well-placed video on your homepage or a creatively edited and insightful content scattered around your website can do a lot for building a positive perception of your brand. Think about how you could use an about us or employee highlight video on your homepage to give a full overview of your brand, or how auto-playing product videos may be more enticing on a product page than a static image and text.

These signs of creativity can help users make decisions and also lead them down a content rabbit hole, looking for more information about your business and what you offer. This may seem like it’s distracting from the user journey, but it’s actually part of building your brand identity and developing customer loyalty.

The use of video within website design suggests to visitors that you are a forward-thinking, innovative brand and puts your content or brand story right in front of your face. Here we have covered some tools and methods of making the most of video, but there are more ways you can learn by experimenting with what suits your brand.

A look ahead at the Visual Design Trends for 2020

2020 has finally arrived, bringing with it a near-boundless opportunity for growth as well as further twists and turns in worldwide trends. Every industry will change somehow, driven by the spread of knowledge, improvements in technology and technique, and mostly-arbitrary shifts in opinion.

In this piece, we’re going to focus specifically on the visual design world, looking at some of the core trends that are already in effect and set to prove influential as the new year unfolds.

Natural shapes

There’s a reason why digital designers have traditionally gone for rigid straight-edged shapes (typically with right angles): they’re easier for computers to handle, smoother to place and tessellate, and faster to serve because a straight-edged vector shapefile is notably small. OK, that’s technically several reasons, but you get the point.

These days, though, the average smartphone is vastly more powerful than the average desktop computer was when the internet first hit the mainstream, and this has affected every facet of the design process. It’s now possible to create smooth vectors with ease and extreme precision, and a combination of stronger connections and better renderers supports them with no issues.

There’s also the point that companies are more willing to experiment with their visual designs. They worry less about being considered unprofessional for using ovals instead of rectangles, or using an irregular background pattern instead of evenly-spaced elements. This year, why not think about introducing some curves to your website?

Minimalistic layouts

The minimalist design trend has been around for quite some time, but it shows no sign of slowing down. In fact, I expect it to pick up even more pace this year. Why? Because there are still so many websites and interfaces out there that don’t reflect this design philosophy — partially because they’re just behind the times, and partially because it’s surprisingly tough.

Sure, certain aspects of it have become extremely common: everyone knows the value of cutting things back, whether they’re blanking out backgrounds for fashion photography or trimming their paragraphs to look great on mobile screens, but design minimalism is broader than that. It’s about including only the essentials on a site-wide basis. No wasted space, no unnecessary elements — just vital navigation links, useful features, and irreplaceable visuals.

Subtle animation

Showy animations are rarely advisable in the online world. They take up huge amounts of space and processing power, yes, but more importantly they tend to irritate people. Internet users visit sites or open apps to get things done, and having to wait for an elaborate animation to play out first can feel like dealing with a full-page ad that somehow can’t be closed.

Subtle animation, though, can work incredibly well. Background elements that waver slightly as the visitor scrolls through the page. Buttons that move to indicate they’re accessible. These things don’t take up much space or drain performance significantly, and they add a lot to user experiences by making pages feel more vibrant. Look for them to become even more common.

Depth indicators

VR may still be looking for an entry into fully mainstream appeal, but you don’t actually need three-dimensional data to give the appearance of depth. This isn’t some new discovery, obviously — artists have been toying with perspective since time immemorial — but Google’s introduction of Material Design back in 2014 played a big part in pushing designers towards embracing the importance of depth, and that process is ongoing.

This year, look out for the use of complex 3D modeling to create 2D designs that seem to leap off the screen (or page, if in print). Now that artists don’t need to painstakingly figure out the angles to get something that passes muster, it’s easy to bring depth to a page: combine this practice with the aforementioned use of animation and you can do interesting things like creating pseudo-holographic images that shift perspective with screen movement.

2019 Year in Review

A new look for 2020 and beyond!

This year I decided to take on fewer client-based projects so that I could focus on my brand and digital presence. In conducting a review, it became apparent that my website needed to provide better engagement. I also felt it was a little cluttered and had become somewhat dated.

The first stage of this project involved refining my logo. I wanted to make it more minimal in appearance and versatile in application. Once satisfied, I turned my attention to the supplementary design elements. In particular, font styles. After weeks of deliberation, I decided to move forward with a combination of both serif and san-serif typefaces.

From a user experience viewpoint, the previous website planner was a bit of a catastrophe. It was arduous and extremely overwhelming. In acknowledging this issue I managed to successfully reduce the questionnaire from thirty text fields to just six. The new project planner spans over four progressive stages. It consists of integrated presets and sliders that provide better overall functionality and is far less time-consuming.

Aesthetically, my new site features an innovative fixed left side panel (desktop) that effectively replaces the header. It encompasses my logo and a menu icon which can be used to access the primary navigation.

On your initial visit, the main headline is typed onto the home page. Visual elements including images and content blocks transition onto the screen as you continue to explore. The footer section is masked so it only appears once you have scrolled beyond the body copy.

Teaching opportunities continue rolling in

In 2019 I was approached by Mark Woszczalski from TAFENSW to write a user interface (UI) design course that could be delivered online. This took more than a month for me to produce as it incorporated a series of video-based recordings. Subsequently, this course was successfully delivered to a cohort of students in China.

I continue to teach at General Assembly which I thoroughly enjoy. This year I presented at several off-campus coding events. These typically provide me with an extra challenge. Of particular note was the session I delivered to over 50 Westpac employees at the International Towers in Barangaroo.

“Absolutely LOVED the Coding 101 masterclass that General Assembly ran for our graduate cohort yesterday! Coding is an integral skill for the future and practicing with the support of trained professionals can improve problem-solving capabilities, resilience and boost creativity.”

Hannah Reid – Westpac

In October Marcus Aldred-Traynor from Sydney Community College reached out to see if I would be interested in delivering ongoing WordPress classes. These are scheduled to run at their Sydney based campus approximately four times a year. This was an opportunity that I grabbed with both hands.

2020 vision for the new year

In 2020 I will be switching my focus back to client-based work. First and foremost will be the completion and relaunch of the Slappas Thongs website. I also have another exciting project in the pipeline for Maccabi Tennis, a large tennis complex based in Paddington. They are rebranding and moving forward will be known as White City Tennis. I will be assisting them in designing a new website with an integrated booking system.

On that note, thanks again to all my dedicated clients and supporters! I hope you all enjoy a lovely Christmas and New Year shared with family and friends. I will be taking a short office break from Friday 20th December through to Monday 13th January. As always for any urgent matters please contact me via email on phillip@philbossdesign.com.au.

Useful Design Resources

Well, fortunately enough these days my job has been made a lot easier thanks to a growing collection of professional blogs with inspiring articles and examples of good design practices and techniques. I have hand picked a few of my favourites and explained why I believe they make so much appeal.

The CSS Awards

The CSS Awards is a fantastic website which recognises creative and talented works within the web design industry. A truly exceptional source for inspiration and forms a major part of my research process.

Visit Website

Make Better Websites

Make Better Websites exhibits a gallery of superior websites. Much like The CSS Awards website they identify innovative practices and showcase them in a structured graphical manner.

Visit Website

One Page Love

One Page Love is a collection of the best one page website designs on the internet. One of my personal favourites especially for creative user interface design and information graphics.

Visit Website

Awwwards

Similar in style to The CSS Awards this website showcases the best talent and effort of web designers, developers, and agencies around the world. I hope to join this astute club and be recognised for one of my own creations in time to come

Visit Website

Subtle Patterns

Subtle Patterns is a high-quality resource for anyone looking for free tileable patterns. The patterns are subtle textures that are ideal for applying to website backgrounds. A feature I like on Subtle Patterns website is the ability to live preview a pattern swatch before downloading.

Visit Website

Adobe Color

Adobe Color is an internet application from Adobe Systems that allows you to create, save and share various colour schemes. I find this site very helpful in discovering complimenting colour collections for logos, brands, and websites.

Visit Website

Unsplash

Unsplash is an open-source library of beautiful, free images and photos that you can download and use for any project. They say it is “better than any royalty free or stock photos”. Believe me, it certainly is!

Visit Website

Undraw

Similar to Unsplash, Undraw is a library of free, creative illustrations you can download and use for any project. These graphics can be very useful if you have to create a set on ‘on-boarding’ screens for a native or web application.

Visit Website

Lost Type

Lost Type is a font distribution website which has a beautiful collection of designer typefaces. For typography lovers this is one to add to the bookmarks.

Visit Website

Snazzy Maps

Snazzy Maps is a site that I recently stumbled across when searching for custom display Google Maps. The site has a repository of different color schemes for Google Maps aimed towards web designers and developers.

Visit Website

LogoPond

The Logopond website is a portfolio of creative brands logos, visual and corporate identities. There are a few sites similar to LogoPond although in my eyes this site features the most innovative concepts.

Visit Website

Font Squirrel

Font Squirrel is another typographic website resource much like LostType which offers free font kits. The site also has a useful font converter for web designers. The font generator converts TFF and OTF typefaces into web-safe fonts that can be viewed on all browsers and devices.

Visit Website

Smashing Magazine

Smashing Magazine, in my mind, are without a doubt industry leaders when it comes to quality design content. They continually amaze me with their inspiring design posts and the currency of information. I know several colleagues who use this website more than they use social media – including myself!

Visit Website

Icon Finder

If you need icons, look no further than Icon Finder. This website provides beautiful icons to millions of designers, developers, and other creative professionals. With over 350,000 beautiful icons in stock, you are sure to find the ideal symbol for your next graphic design or web project.

Visit Website

Graphic Burger

Graphic Burger is a buffet of premium quality design resources offered for free to the community. The site includes a large collection of layered PSD assets ideal for creating superimposed ‘in-situ’ mockups.

Visit Website

Creative Market

Creative Market is quite similar to Graphic Burger in that the site has collections of handcrafted design templates for typographers, web and graphic designers. Although I prefer these graphics over Graphic Burger they all come at a cost.

Visit Website

Other Websites

There is a stack of professional design blogs available on the Internet although topping my list in order are DzineBlog, Web Designer Depot, Web Designer Wall, CreativeBloq, Design Modo and Spoon Graphics. These three blogs not only comprise useful web resources, but they also offer exceptional inspiration for logos, packaging, typography and many other areas of design.

2018 Year in Review

The Good

In 2018 I enjoyed a spike in teaching opportunities at General Assembly. I delivered a total of 26 workshops (Coding and WordPress) to approximately 334 students. These classes came in the form of 2hr intro sessions, full day boot camps, and short courses. I was also given the opportunity to speak at the Youth Marketing Australia Conference at Dockside in Sydney.

The Better

It was tricky trying to separate the better from the best but I have given this one to the Nerada Tea project. For this brief, we worked alongside the talented team at Mastermind Consulting. They played a vital role in assessing the brand’s presence and redefining their online strategy. It was then over to us to help bring it all to life. We achieved this by designing and implementing a custom responsive eCommerce WordPress website. With noise and clutter minimised, customers are instantly immersed in curated content that tells a story of Nerada Tea’s history and products.

The Best

(Drum roll) In 2018 our greatest achievement was the relaunch of Shack Homewares website. Being a long-term client of ours it was a pleasure to be offered the opportunity to work with them once again. In collaboration with Shack, the aim was to create a unique style that would help the brand stand out in a highly competitive retail market. This phase of the project was wonderfully executed by Janette Symonds from Squiggle Graphix. We then joined forces to produce a creative website by combining beautiful type, soft neutral colours, and warm gold accents. The stunning new site appeals to a much broader target audience and rivals the in-store experience.

The Year Ahead

At present we are working on a creative brief for Westbourne Constructions. Similarly to Shack, they are a long-term client of ours. We are currently in the process of revitalising their website which we originally launched back in 2011. We are hoping to relaunch this one in early 2019. Stay tuned!

Thanks

On that note, we want to thank all of our clients for continuously making us look good! Without you, there wouldn’t be us. We hope you all have a safe, happy and prosperous Christmas and New Year. We will be taking a short break from Friday 21st December through to Monday 7th January. For anything that requires urgent attention please contact me on phillip@philbossdesign.com.au.

Gravity Forms for WordPress

Gravity Forms is highly customisable

For the less CSS savvy, Gravity Forms outputs its own CSS styling by default. The appearance is a large step up from those default input fields seen on websites in the late 90s / early 2000s. Advanced users, by contrast, will be able to disable Gravity Forms from outputting its CSS, therefore working with their own pre-styled CSS.

Try Gravity Forms

Gravity Forms has also got a number of “Ready Classes”. These are effectively class names that have a predefined function. It can be a quick an easy way to make part of your form sit in a two columned layout, or perhaps enable a scrollbar for some terms and conditions text.

Gravity Forms Ready Classes

Gravity Forms seamlessly supports third party integrations

Have you ever thought about setting up a mailing list for a monthly newsletter? Perhaps you have considered enabling a mini form for Paypal donations? For those who have ever signed up to and used Mailchimp or Campaign Monitor, you will be pleased to know that these services can be integrated in Gravity Forms.

Gravity Forms Add-Ons

Gravity Forms is not just for contact forms

Running competitions is made easy with Gravity Forms. The number of entries can be limited. Users are also able to upload files (of which filetypes may be specified). Small to medium businesses may also benefit from setting up order forms with Gravity Forms. With pricing fields, Gravity Forms allows for auto generated totals based on product and option selections.

Gravity Forms Builder

2017 Year in Review

From the outside looking in 2017 appeared to be a little quieter than previous years. We launched three new websites for You’re Welcome Finance, Gary Johns, and VA Hire. The relaunch of the VA Hire website encompassing in excess of 300 individual products was a huge achievement for both us and our client. Our achievements didn’t go unnoticed either as we received our second Awwwards honourable mention for creativity and innovation.

The Gary Johns project was an opportunity for us to rediscover Gary’s identity and digital footprint. The previous brand was, let’s just say well past it’s used by date and as for the website – it was built in Adobe Flash. Enough said.

The You’re Welcome Finance project was a collaborative one. We joined forces with the lovely Janette Symonds from Squiggle Graphix. For this new business, Janette worked closely with the client to define the brand and (website) user interface. In turn, we assisted with the implementation, taking Janette’s design and converting it into a functional WordPress site.

In addition to these projects, we have also been working on an innovative web app, MyChoice. This is a purpose-built tool which helps you plan and tailor home care support. Whilst not quite 100% functional we are hopeful of completing the build early in the new year. Coinciding with this we will be launching a year-long website redesign project for John Paul Village.

I continue to enjoy teaching web development and WordPress courses at General Assembly in Sydney. Speaking of which in October they moved and have a new spacious campus consisting of 2 levels and 6 classrooms. I am still teaching at TAFE although I am now more permanently based at the design centre in Nepean (Penrith). Whilst it is a bit of a drive, this is very much offset by the relaxed working environment and friendly staff.

As for next year, we have two new exciting projects in the pipeline. One is a site redesign for emma (Enhanced Media Metrics Australia), a readership metric for the news media industry. The other is one that we will be working on in conjunction with Mastermind Consulting. At this point in time, the client cannot be disclosed – so you will just have to watch this space.

That’s the wrap for 2017. As always we would like to thank all of our clients for their ongoing support. On that note (raise your glass) here’s to a happy, healthy and prosperous 2018. We will be taking a short break from the office from Friday 22nd December through to Thursday 4th January. For anything that requires urgent attention please contact me on phillip@philbossdesign.com.au.

WordPress Plugins: Greatest Hits

Gravity Forms

By default, WordPress does not come with an inbuilt feature to support the creation of HTML forms. This is where Gravity Forms comes in. Whilst it is not the only form builder plugin, I am completely sold on it being the most intuitive and robust option. It is flexible enough to easily embed a basic contact form yet scalable enough to create a sophisticated multi-functional/purpose application.

Gravity Forms seamlessly integrates with email marketing applications such as MailChimp and Campaign Monitor. Among other things, it also has conditional field support, calculation options, and routable notifications. Furthermore, there is a suite of extensions like Gravity Perks and Gravity Slider which adds enhanced UI/UX features such as range slider fields. The possibilities and options are endless !!

The EC Controls website uses the Gravity Forms plugin to capture general enquiries. Likewise an App I developed for John Paul Village called MyChoice also uses Gravity Forms albeit in a much more sophisticated way encompassing multiple sections, conditional fields, calculations, and sliders.

Visit Plugin Page

Duplicate Posts

This plugin adds the capacity for users to be able to clone posts of any type. When I design/build websites for my clients I typically assist them with the setup of all of their pages, posts, products etc. Once the initial setup is complete I hand over the reins (so to speak) so that my clients can add, edit, update and/or remove pages, posts, products etc. I have always found this plugin to be a very useful one as it copies the formatting/style of a post that has been previously created/published. Once cloned, clients can use the post as a guide helping them identify what content needs to be updated and which assets need to be replaced.

The duplicate posts plugin is active on all WordPress sites found in my design portfolio.

Visit Plugin Page

WooCommerce

Whilst there are a number of eCommerce plugins available on the WordPress marketplace, my preference is WooCommerce. WordPress core does not have the capacity to sell products or services hence some form of eCommerce plugin is necessary should you want to process online orders. WooCommerce is the most popular plugin which provides a platform to do this. The plugin itself is super flexible and has a number of extensions which offer a variety of options including payment gateways and shipping services to name a few.

The Lip Lab website features the WooCommerce plugin which enables customers to order products and gift vouchers. The VA Hire website also features this plugin albeit in conjunction with both Request a Quote and Gravity Forms. Jointly these plugins turn the traditional cart/checkout order process into a form submission.

Visit Plugin Page

Advanced Custom Fields

When discussing my favourite plugins this one is sure to get a mention. Amongst other things, Advanced Custom Fields (ACF), allows you as a developer to add additional fields to a WordPress post, page, product etc. Think of it as like adding the capacity to have multiple content sections/areas on a single post/page. I have found this to be the ideal solution when trying to maintain formatting between pages/posts without having blocks of HTML content embedded within the text editor.

The Gary Johns website features the ACF plugin on the song list page. This helps my client keep the formatting of the song title and artist consistent throughout. It also utilises the repeater field, which is part of the ACF Pro version, so that my client can easily add/remove songs from his list.

Visit Plugin Page

Yoast SEO

WordPress alone is not ‘Search Engine Optimised’. Having said that, however, it is ‘Search Engine Friendly’ and provides a solid foundation to be able to apply SEO techniques to improve a website’s overall ranking. Yoast SEO is one of the most popular SEO plugins which seamlessly integrates with WordPress. It enables the user to add custom post titles, descriptions and meta information. It provides feedback in the sense it gives your content a ranking and also suggests keywords etc. Personally, I like the breadcrumb feature the most which can be seen on a number of the websites I have launched.

The Yoast breadcrumb widget can be found on the VA Hire category and product pages.

Visit Plugin Page

The Discovery Phase

Typically, I like to explore a multitude of resources and gather together as many ideas and thoughts as possible. To me, the purpose of this phase is to identify and acknowledge great work. I like to use these findings to draw on inspiration for my project at hand.

The following is a collection of my top ten resources.

  1. The CSS Awards recognises creative and talented works within the web design industry.
  2. Best Website Gallery (formerly Make Better Websites) exhibits a gallery of superior websites.
  3. Site Inspire is a showcase of the finest web and interactive design.
  4. One Page Love is a collection of the best one-page website designs on the internet.
  5. UI Garage features all the latest UI design inspiration for desktop, tablet, and mobile.
  6. Inspired UI is a showcase of the best examples of beautifully designed mobile apps.
  7. Pttrns showcases the finest collection of mobile app design patterns.
  8. Mobile Patterns presents a library of iOS and Android reference screenshots.
  9. Sketch App Sources is the largest collection of free and premium design resources.
  10. UI Patterns offers a curated list of interactive mobile design patterns.

2016 Year in Review

For me personally, 2016 started off with a bang after my successful application for a new teaching role at Tractor – a specialist design school run by industry leaders. The highlight for me was working alongside Flyn Tracy on the User Interface (UI) commercial industry program. These classes spanned over 8 weeks and involved regular visits to top tier digital design agencies throughout Sydney. This was easily the best form of education I have been a part of as the courses offered an insight into sought after industry skills, practices and techniques. Sadly however this was short lived as Tractor publically announced in September that they would be closing their Sydney campus at years end. Despite Tractor closing I still intend to continue to teach for TAFE and deliver a range of website coding workshops out of General Assembly in Sydney.

Closer to home we managed to launch three new websites including Mount Annan Dental, JJames and Co. and EC Controls. We also worked with Fairfax Media on a digital campaign for South Australia Tourism. Titled “Along the way” the award winning website featured five captivating road trips to various iconic destinations throughout South Australia. For us the build presented numerous coding challenges. Most notably was the scroll magic function that formed the framework for image based elements and vector paths to only be exposed as the user scrolls beyond a certain point.

In between these projects we provided ongoing support and training for AdCentre, added a new payment gateway on the Slappas Thongs website, relaunched a new responsive website for Shack homewares and assisted The Lip Lab by adding blog functionality and new products onto their site. Can you also believe that amongst all of this I somehow slotted in a month long overseas trip.

Next year presents more opportunities for us to shine and none more so than the current crop of projects we are working on. These include a new build for Kent Town Cottage, Lafayette and VA Hire. We have also been appointed to work on a large scale website for John Paul Village – a residential aged care facility located south of Sydney, which we are looking forward to.

On behalf of all of us we want to thank you for your ongoing support and wish you all a safe, happy and prosperous new year. We will be taking a break from the office from Friday 23 December 2016 through to Monday 16 January 2017. During this time I will still be contactable via email phillip@philbossdesign.com.au for any urgent support issues.

Bring on 2017.

2015 Year in Review

The ‘pick of the crop’ came in the shape of South Terrace Apartments, MyFrontman, Smiles Group Orthodontics, The Lip Lab and Largs Bay Swim Centre. They were all challenging briefs which were well executed. I need to make special mention to my colleagues in particular Janette Symonds, Anthony Gulin and Matthew Karam for your creative contributions and making this possible.

We continued working with our great friends at Fairfax Media launching 4 separate ‘in-house’ competition websites this year including My Executive Style, The AFR Knowledge Project, 20 Years News and Fairfax Christmas. I was also called in to assist with the launch of the new AdCentre WordPress website which required documentation, training and support.

I continue to teach at TAFE as well as deliver a number of commercial courses on a regular basis at General Assembly in Sydney. The topics cover everything from basic WordPress management through to advanced WordPress custom theming/coding. They will be scheduled to run again in 2016 so if you are interested feel free to check out the web design workshops listed on our website.

In the pipeline at the moment is a new responsive website upgrade for Shack Homewares. This project involved the migration of some 350 products. We’re closing in on a launch working alongside WME, our SEO partners to officiate the process. We are also continuing to assist The Lip Lab with print based publications and other promotions after their store officially opened earlier this month.

That’s the wrap this year !! We hope you all have a lovely Christmas and a prosperous New Year. We will be having a small break finishing up on Thursday 24 December 2015 and returning on Monday 4 January 2016. As always I will still be contactable via email phillip@philbossdesign.com.au for anything that requires urgent attention.

2014 Year in Review

The start of the year always proves to be quite slow for us so instead of busking on the streets of Bondi [in the hope that one would pay us to leave instead of sing] we took it as an opportunity to review our own website. I had set a goal for this to happen and much thanks to the efforts of our fellow designers Alex Dale and Austin [Anh] Vu we managed to relaunch in April. The new site was well received having been nominated for three design awards from industry leading web design showcases including Awwwards, CSS Design Awards and CSS Winner.

We continued our relationship and worked alongside Larissa Behrendt. Having successfully launched her filming company Lavarch Productions late in December 2013 we were at it again assisting with her author site Larissa Behrendt.

We worked on three ‘in-house’ projects for Fairfax Media during the course of the year. They included Weekend Compact, Good Food Project and Christmas Conversations. Both Anthony Gulin and Austin [Anh] Vu did a wonderful job in assisting me with these projects. The Christmas Conversation website was a challenging one that housed 12 competitions that opened on a day by day basis during the first two and a half weeks of December. We managed to write a custom script to support this functionality as well as collect and export each quizzes data sets separately. The team at Fairfax were equally impressed.

In May I met a successful and highly regarded kitchen and bathroom designer by the name of Dean Welsh. In 2014 he and his colleagues Tracy Stern and Angelo Musumeci launched a new kitchen and bathroom design business called thinkdzine. We assisted with the opening of their showroom in August and continue to provide design advice, search engine optimisation and social media marketing. I should also mention, whilst I am at it, Dean and I are currently planning for my bathroom to undergo a renovation early next year. I am super excited !!

By far and away our largest project of 2014 was Super Natural Skincare. This project involved product photography, user interface design, WordPress, video and eCommerce. It was a completely unique website based around a heavily customised WooCommerce theme hence took us a little longer than expected. At the same time however we managed to achieve a fantastic result.

We continued our relationship with our talented external designers. Janette Symonds from Squiggle Graphix teamed up with us to work on the South Terrace Apartments branding and website redesign which is closing in on a launch. Janette also helped us with both a website facelift and an email newsletter for our lovely friends/family at Shack Homewares. This followed the successful opening of their third store in the Homemaker Centre, Alexandria. Saffron Meade from Avenue De Flaunt partnered with us to complete a year long project and launch Gaddy’s Plant Hire. In amongst all of this we also worked on a mixture of branding, graphic and web design projects including Inspired Credit Management, Equity Portfolio Management, MyFrontman, Smiles Group, Kearney Consulting and Mad About Parties.

For me personally whilst I continued my part time teaching commitments throughout 2014 at TAFENSW I wrote and delivered a few successful commercial WordPress courses at General Assembly [GA] in Sydney. GA is a fascinating community training facility which runs courses, classes and workshops in web design, user experience and digital marketing amongst other things. I have thoroughly enjoyed teaching at GA and very much hope to continue building my working relationship with Elisia Retsas and the team.

What a year !! If you have managed to get through your coffee/beer/wine grab another one to toast the arrival of 2015 and celebrate it in style. Our team will be having a small break finishing up on Friday 19 December 2014 and returning on Monday 12 January 2015. As always I will still be contactable via email phillip@philbossdesign.com.au for anything that requires urgent attention.

Last but not least, raise your coffee/beer/wine as my fellow colleagues and I would like to thank all our wonderful clients for helping us continue to do what we love doing most. We hope you all have a safe, happy and wonderful Christmas and a fabulous New Year.