Hero Patterns

Free SVG Background Patterns

I’ve been a big fan of Subtle Patterns for a long time and use a few other resources once in a while. Thanks to Smashing Magazine‘s newsletter, I’ve discovered a new pattern library called Hero Patterns. Unlike Subtle Patterns, this new library offers patterns in SVG format!

Thanks to the SVG specification, not only can you get cool patterns,, you can adjust the colours and opacity. This is another great resource for designer and developers to bookmark!

design-resources

Resources for Web Designers

Keeping a list of resources is always a difficult task, but a must-do for any designer or developer. Over the years I’ve discussed a few of them on this blog and some of my favourites, such as Unsplash, Trello and Whatfont, I use every day.

Caroline Reder, Director of Content & Communications at Webydo, put together a list of 75 smart resources for designers. This extensive list covers photos, icons, videos, type, colour, inspiration, tools and more. This fabulous list is a great place to find your next favourite resource and start your own list.

responsive-cover

9 basic principles of responsive web design in animated gifs

Although published ages ago in 2014, these responsive web design principles are still just as valid today. I love the simplicity and clarity of the animated gifs. This is a great resource for any designer having trouble grasping the concepts of responsive web design.

Be sure to add this article to your list of resources.

sass-codepen

Learning Sass with CodePen

If you’ve been working with CSS for a while, you’ve probably heard of Sass and even switched to it by now. Using Sass allows you to code much faster and efficiently. Getting started can be a bit daunting though. Tools like CodeKit can help or if you’re familiar with the command line then installing Sass is a breeze, but if you’re not, then you’re stuck. That is, until now.

Dudley Storey, at The New Code has created a free comprehensive course that allows you to learn Sass while using CodePen. Because Sass is built into CodePen, you can get started right away. His excellent tutorial series, takes you through the basics,  nesting, extends and imports and concludes with loops.  If you’re just getting your toes wet, this is a great place to start.

 

flexbox froggy

Preventing unwanted Google Search Results

Something weird and peculiar happened to me this week which I thought I’d like to share with you so that you learn from my mistake.

A client alerted me to the fact that my name was showing up as an author on their site in Google search results and sent me the following screenshot.

Google-search-results

This website was built for a company that required no blog, thus no author template was provided. But ever so helpful Google decided to index the author archive anyway, meaning that clicking on the link, led to a page with no content.

When building websites for clients, I normally insert the content in all the pages and thus I’m listed as the author, which is where this information on the search results page comes from. This is fairly normal and I’m sure that I’m the author of millions of pages out there.

There are a few ways to deal with this.

  1. When launching the site, if you are adding your client as a user, simply switch all of the authorship on all content.
  2. If you won’t be adding your client as a user, you can go to your User profile and change your display name. A good idea would be to add the company’s name as a nickname and then use that as your display name.
  3. Finally and this is probably the most important tip, if you are using the Yoast SEO plugin, go to Titles & Meta > Archives setting and se the author archive to no index and Disable the author archives.  This will then redirect anyone who hits that link to your home page.

Ideally, you want to do this before you launch a site, before Google indexes your non-existing author archive, but I didn’t know it would do this until this week. Lesson learned.

 

 

flexbox-videos

Flexbox fundamentals with Wes Bos

I’ve had the chance to play with Flexbox for a while on a few different projects and it’s been super handy. Flexbox allows you to do things that floats just make you scream and pull your hair out.

Although very simple, flexbox can be a bit tricky, especially when using it in a WordPress theme where you may not have full control of how the HTML is generated ( i.e. menus and search box). One of the best guide for using flexbox is Chris Coyier’s “Complete Guide to Flexbox“. I constantly refer back to this guide every time I’m using flexbox.

A few months ago, Wes Bos released a series of videos at Flexbox.io. I was curious about these and so signed up, got the videos, but hadn’t had the chance to go through them until this week. I spent a couple of days listening and playing around with the code. Although, most of the information was a review for me, the videos clarified quite a few things and highlighted very important points. I even burst out laughing when Wes said, “now this is when people normally say, What? This flexbox stuff doesn’t work“. I had literally just said something very similar.

I must admit, I’m not a big fan of video tutorials. I would rather just see code and read a brief explanation, but these were fabulous. Wes explains things very well, he’s very clear and repeats the most important points frequently. Best of all, the videos are free, so you should really check them out if you haven’t had a chance yet.

In Video 13, Wes introduces gulp and node which he uses for auto prefixing. I had some issues installing all of this and since I never write CSS, but work with Sass instead, I opted to use mixins instead and as always, a quick search lead me to a great collection that fits the bill.

A big thanks to all you fabulous people sharing knowledge online. You’re awesome.

doc

WordPress Documentation

As anyone who has ever used the web, you won’t find it surprising to hear that maintaining good documentation is difficult. For those of you who have known me for a long time (back in 2011?), you may remember that I had set up a site that had good WordPress documentation with links to articles and videos.

Don’t bother looking for a link, because you won’t find one. I simply can’t keep it up to date and won’t be maintaining that site. WordPress is evolving so rapidly, keeping up good documentation is very challenging. The same is true for all sorts of software tools, apps and anything online.

I remember has a teenager being told that purchasing a new car was a waste of money, since as soon as you drive it out of the lot, it depreciated. I’m starting to see the web in the same way. As soon as you start using a tool, something on the net changes and the documentation is no longer accurate. Just like purchasing cars, I think that’s something we have to accept.

Kudos to anyone who maintains docs. Your job is not an easy one.

How to Code  in HTML5 and CSS3

How to Code in HTML5 and CSS3

How to Code in HTML5 and CSS3” is a free e-book about making websites in HTML5 and CSS for beginners. I just read the first chapters and love the style of writing. Step by step instruction are provided along the way and these are clear and very well explained. This is a great resource for anyone who is interested in learning how to build websites. Students and teachers alike will find it a very useful resource.

WP-themes

The High Cost of Low Cost Themes

One of the reasons why people love WordPress so much is because there are so many resources, such as thousands of themes to chose from. Unfortunately, just like everything else, the quality of all of these themes can’t be guaranteed.

I was recently asked by two clients to help them out with their new websites. Both were almost ready to launch, but weren’t happy with a few things in their WordPress admin.

The first client, hired a developer and was a bit shocked to hear that they wouldn’t be able to update WordPress ever, or any of their plugins. The developer they hired, purchased a theme that was no longer supported and broke if anything was updated. Not only does this open you up to security vulnerability, it’s also just shoddy work. This is the equivalent of me buying my friend a new laptop running a XP them being stuck with using IE8 forever. I’m not sure my friend would appreciate.

In the second instance, the client also hired a developer who purchased a commercial theme but the updates weren’t an issue. However, they had no idea how the admin worked. The entire WordPress admin had been transformed and even I, after a few hours, didn’t know what was what. In addition, the final site loaded 32 javascript files and 17 external stylesheet, so was running super slow.

In both of these cases, I spent a few hours poking around the theme and tried to figure out what was going on. But I gave up very fast. Both contained so many files, it was hard to understand what was needed and what was not. In the end, I simply re-built the themes from scratch. Both were happy with the way the site displayed on and functioned on the front end, they just wanted to have an easier back end to manage.

In my opinion both of these commercial themes displayed what I resent most from them:

They have too many options.
Theme vendors want their theme to satisfy a large pool of clients, thus the more features there are, the better. These options come at a price though. More options, means more complexity with increase in error, and more files to load which makes your site load slowly.

Many love to customize the WordPress admin.
Perhaps this is meant to be helpful, but it’s not. As soon as you modify an interface, you’re asking your audience to relearn how things are set up. People shouldn’t have to re-learn out the WordPress admin works when switching from theme to theme.

So how do you know which theme you should use?
That’s a great question.

You might think to yourself that free themes won’t be as good, but the quality of themes in the WordPress.org repo has improved greatly over the years. In addition many theme foundries release their themes for free on WordPress.org and then offer a pro version for a fee. Before purchasing these, I would encourage anyone to look at a few free versions first.

If a theme from a foundry caught your eye, the first thing I would recommend before buying it, is to look at the theme’s rating and look at how the developer is addressing support issues. Are questions in the support form answered well and in a timely manner? Have many people written great reviews or are all of them one star only?

Make sure that the theme you are purchasing contains 99% of what your looking for. If all you want to do is change one or two colours, that’s easy enough to do with some custom CSS or a child theme, but if you want to make major changes to the layout, then you might as well start from scratch or look at free themes. Keep in mind as well, that purchasing a theme may not save you all that much. Hiring a good developer who builds theme from scratch will  be able to give you a bespoke theme made just right for you.