← Older posts

Variable Fonts

Posted on by jordanhaines

I want to talk about variable fonts, Yes you heard me correctly. A developer is going to talk about fonts. Right about now the designers I know have got there head in there hands saying “Please don’t”.

What I want to tell you about today is not the design of a font or anything like that but the way we deliver a font to a website is going to change.

Currently the way a font is delivered to a website is in multiple files. So for example you could have a font file for normal weight, a font file for bold weight and a font file for italic styling. 3 files are needed to deliver 3 variations of a certain font.

With so many font files needed, this added to page weight on a website which in turn slows down a site if you have many custom font in use.

Back in September 2016 it was presentated to the world that for the past year the companies of Apple, Google, Microsoft and Adobe have been working together on a new OpenType format called variable font.

Type designers can now use only 1 file to hold all the information needed for a font, This is instead of having multiple files for each different variant on the font. From a web developer point of view this is brilliant, 1 file for 1 font and then you can use any type of styling you wish. Serving less files is always a good thing in modern web development as our quest for speed goes on.

Today you can play with variable fonts here: http://www.axis-praxis.org/

This is already in the development builds of browsers, but is not fully supported as of yet. With Apple, Microsoft, Google and Adobe all working on this there is an expectation that this variable font format will make its way in to the operating systems for Mac and Windows based PC’s. But only time will tell on this.

Variable fonts is still really new but is progressing at a very fast rate, Its worth following this as in web development we could be using this within the next two years.

Posted in Web Development | Leave a comment

What is this HTTP2 you speak of

Posted on by jordanhaines

In the past year the talk of HTTP2 has gone hand in hand with the talk that all sites should have a SSL certificate and be using HTTPS. This was mainly because Google has started saying that going forward sites that use HTTPS will get a ranking boast, This is all because Google is pushing for a more secure web. Something we can all get behind, But to explain what HTTP 2 is I think it is best to start off with what we have now HTTP (Hypertext Transfer Protocol).

HTTP explained

HTTP is the current protocol we have now, it has been around since the start of the web and the version of HTTP we have now HTTP 1.1 came out in 1999.

Websites in 1999 looked a lot different from the websites we have today. There was of course no responsive design, There was very little CSS and JS. A website back in 1999 was just plain HTML and some images, The size of a website was also a lot smaller.

When you request a website from your browser in the current HTTP protocol, each resource which by this I mean, every image file, every CSS file, every JS file is requested 1 at a time. This means that if you have a large image file this will slow down the loading of the other files which in turn slows down the loading of the website.

Websites over the years have gotten bigger and now need to do a lot more which means that the old HTTP protocol is not very efficient in delivering websites.

HTTP 2 explained

In 2009 Google posted about a research project they had been working on named SPDY (Speedy). SPDY was not a new protocol is just modified the way existing HTTP requests and responses are sent.

SPDY addressed some of HTTP short comings with modern websites, These where:

  • allow multiplexing – This means that multiply files can be downloaded at the same time which will in turn speed up your website;
  • allow browsers to prioritize assets so that resources vital to the display of a page could be sent by the server first;
  • compress and reduce HTTP headers – This speeds up how fast your website is downloaded to the users browser.
  • implement server push, whereby a server can push vital resources to the browser before being asked for them.

SPDY was successful and became HTTP 2 which is built upon this success and in February 2015 the final spec was approved with browser support a year on being excellent , so you can start using it right now. Please remember that HTTP2 is browser and server side, This means that it is best to check with your hosting provider that they support HTTP2.

http2 diagram

Google Benefits

HTTP2 is what all websites should be using and this fact is backed up with Google pushing all sites to become faster and use HTTPS. If your site uses HTTPS today then you will more then likely be using HTTP2, To test this you can use the following website: https://tools.keycdn.com/http2-test

So what you waiting for, Go us HTTP2 now and speed up your website.

Posted in Web Development | Leave a comment

2017 a new look

Posted on by jordanhaines

The job of redesigning my site has been on my list to do for the last two years, but as I have learned. Once you have kids some jobs keep getting pushed to the back of the que. This is what happened with the design of this site.

In 2016 I actually got as far as making a photoshop document of the site I wanted after going through the site map process and all the wireframing, but the coding part of the job did not happen. This was mainly because of another bundle of joy coming into my life with the birth of my daughter.

Now my son is going to bed much easier in the evening, I now find I have a few hours in the evening where I can do little bits of work. So in 2017 I have made it my goal to redesign and sort out my site.

The theme currently running on it is 5 years old, it looks outdated and the responsive does not work that well.

I have been working on a new responsive WordPress theme which I use as my base files so want to use this. I will also be sorting out the structure to separate out the podcast posts as I would like to start mixing again now I have the chance.

I also want to include the ability to play the podcast from the site and sort out some of the coding examples that I have given in the past which do not look that great now.

I plan to blog the process of my redesign as I go through the process. This way it will keep me on track.

Posted in life | Tagged | Leave a comment

Why I like open source content management systems

Posted on by jordanhaines

The term “open source” refers to something people can modify and share because its design and development is public. Open source software is software with source code that anyone can inspect, modify, and build on.

Two examples of open source content management (CMS) system are WordPress and Drupal, You may have heard of these. They are the two biggest content management systems powering the web today with an equal share of 21%.

There are many reasons I love using open source content management systems and below are a few of the reasons with a short explanation.

1. Cost

The great thing about open source content management systems is that they are free, You can donate to the project if you like. This brings the cost of projects down which helps the client and also makes it easier for anyone to try and get building using the CMS.

2. Knowledge

Open source content management systems are built and maintained by many people, There are also everyone that uses the CMS which makes up the community. If you have a question about the CMS you are working with, you can ask in the forum or Google the problem. There is a good chance that someone has had the issue already and can suggest possible solutions for you to try.

3. Community

The community is the back bone of any open source content management system. This is were all the knowledge for the software is. In the community you will have the developers that build and maintain the project, You will also have other people that maintain the documentation, You will also have people that have a huge knowledge of either WordPress or Drupal as they use it on a day to day basis. With such a strong community behind any project, you can be assured that support of the CMS will continue long in to the future.

4. Secure

WordPress and Drupal are very secure content management systems, If a security issue is found and reported to the community it is dealt with very quickly. Confidence in security for a CMS will be one of the factors in deciding if people will use it or not.

5. Quality

When new features are added to the code base for either WordPress or Drupal the community can inspect the code and have there say on weather it needs improving or not. Buy having many people looking at the code, you can insure that you get a higher quality of code then if it was just a few people in a company building a fully paid for content management system.

6. Flexibility and Freedom

Unlike paid for content management systems if there is a feature you need for an open source content management system and it does not exists in the plugin / module libraries. You have the option to build your own extension to make the CMS do what you want it to do.

So there you have it, Just a few reasons why using open source content management systems are better then paid for systems.

Posted in Web Development | Tagged , , | Leave a comment

I thought I knew about the title attribute

Posted on by jordanhaines

I have been building website for years, when I started learning how to build websites I was always told that when you use an anchor link you must include the title attribute and the target attribute.

The reasons I was told to include the title attribute was to improve accessibility, by including the title attribute users when they hover over the link with there mouse get a tooltip pop up which can give the user more detailed information about where the link will send you. The second reason was that it was suggested that the title attribute was good for blind people as screen readers would use the information to tell the user more about the link. The third reason for using the title attribute was it was good for SEO, By including a title attribute with more detailed information and keywords Google would like this more.

So what led me to question this?. I have recently been working on updating the Factor 3 WordPress base theme which we use to start our WordPress projects, While updating it I started to research why WordPress does not include the title attribute on its links in the content area. To my surprised it turns out that I was wrong and you do not need to use it.

Silktide did some research on screen readers and the use of the title attribute. It turns out that screen readers do not use the title tag, they use the anchor link text instead. After some more research it also turns out that there is no SEO benefit from using the title tag, I found this shocking. But Google uses the anchor link text instead just like the screen readers. The only reason to use the title attribute is to get tooltips to pop up when the user hovers there mouse over the link when they are on a desktop.

My research was backed up by Jeffrey Zeldmen and Bruce Lawson who both have said to not use the title attribute.

So what is the solution? Its seems we can drop the title attribute from our links and it is better practise to use more precise and better descriptive anchor text. It would also seem that this has been best practise for a while now and website testing tool like Sitebeam and Nibbler are already testing for “weak text”. This will take some time to get used to but going forward from now on I will not be using the title attribute on our links.

Posted in Web Development | Tagged , | Leave a comment ← Older posts