Back in April this year we decided to package up and release 3 WordPress Plugins we had created over our time developing client websites (Minimalist Twitter Widget, Minimalist Instagram Widget & Google Calendar Agenda) with the aim of offering plugins which are efficient, quick to load, and have no extra code that isn’t required.
Three months later we are proud to announce these plugins have been downloaded a combined total of over 3,500 times! With this encouraging news in mind we have decided that over the next couple of months we are going to release several more plugins we have developed and allow the general public to use then and improve upon them.
With all of the recent security issues and breaches, now is a better time than ever to consider setting up two-step authentication..
What is two-step authentication?
Two-step authentication is the process of logging in with 2 levels of security as opposed to just the usual one. So when you log in you use a piece of information you know (a password) and a piece of information you have, and this is usually in the form a timed unique code sent to you by text message or provided by a specialist app.
This decreases the chance of any account break-ins because even if someone happens to get hold of your password, without the time sensitive code they will not be able to get access to your information.
Where can you set this up?
A majority of the popular online services already support this feature; including Facebook (through in-app code / Text Message), Twitter (through in-app verification / Text Message) and Google services (through Google Authenticator app or Text Message). It is also possible to set-up two-step authentication for WordPress websites, this not only adds the extra layer of protection but also prevents brute force attacks.
Over the years the web has developed on an almost exponential scale from originally just being able to view simple linked pages to now been able to play native games in a browser over the internet. Alongside these developments one thing has stayed the same: the image formats we use, and that is about to change.
The three main formats we have used have stayed relatively the same since for almost 15 years, and while they are good at what they do, none of them have been created with the issues of the modern internet in mind.
This is where Webp (Pronounces Weppy) comes in. The Webp format that was introduced by Google in 2010 allows images to be stored with greater savings on compression without sacrificing quality Webp can be up to 30% more efficient than JPEG and in its lossless form be approximately 20% more efficient than PNG with an alpha channel.
(click for full sized comparison)
While compatibility with Webp is still limited, with it being compatible with Google Chrome and Android, it is possible to implement a Webp switcher to load the images as alternatives to JPEG to speed up the loading of Web pages loaded with them.
We have began to implement a webp switcher on some of our heavier websites to improve loading times and reduce the amount of total bandwidth websites we’ve built use, we’re already started to see some overall benefit and hope that more browsers decide to support the format
In our time working with various clients we’ve come across a lot of misconceptions about SEO. Here are our top 5 misconceptions that we have come across.
You can cheat the search engines
There are no real cheats in SEO but there are a lot of people trying to offer “snake oil” like remedies. More often than not these involves having “bots”generating links to your website in blog comments and forum posts; unfortunately search engines have really smartened up over the past couple of year and can detect this kind of behavior and actually penalise the website’s rank.
Meta Tags still count for something
Meta Tags are an element of a web page hidden from the visitors view but a part that used to be picked up by search engines to determine it’s relevancy to various key words. Google, the largest search engine, has not used Meta Tags since at least 2009, while some much smaller search engines do use them, they do so in a very limited capacity. While Meta Tags are not relevant anymore they should not be confused with the use of the Title Tag and Meta Description are both very important.
The website with the most links wins
While incoming links are certainly important it’s not the website with the most which features highest. Search Engines use complex algorithms to work out the relevancy between websites, so for example a links from a cycling website to another would be a much more important link than from a website completely unrelated. As previously mentioned search engines can also penalise websites for using links spammed on blogs, forums and other websites.
Google+ helps your search ranking
Goolge+ is Google’s competing service to Facebook and features many overlapping functions. There was some speculation that having your business’s profile on there linking to your website, and having authorship enabled gave some advantage to your ranking. However this has been since denied and newer information has been released to show this is not the case.
Google is the only search engine that matters
While a lot of people focus on getting higher rankings on Google, there are other search engines out there to consider using to drive traffic to your website.
There is a rule of thumb that you only have 3 seconds to make a good impression on your websites visitors; and while your website may look the business, if it takes the best part of those three seconds loading, you run the risk of visitors leaving before they even look at your first page. We do extensive testing on our websites to ensure that they load as quickly as possible. Here are our top 3 of the things we do to keep everything running smoothly:
Images are the biggest culprit of a slow website, often because of being incorrectly sized for their purpose. The best practice is to have the image cropped to the exact size that the website requires, or as close as possible to reduce loading times.
Ensuring that images are in the correct format for displaying is also very important. There are three main image formats on the web, each compressing the image in a different way and formatting an image in the wrong one, can lead to having much larger file sizes. The formats and their strengths are as follows:
JPEG – The most widely used image format on the internet. It is best for compressing photos and elaborately generated computer graphics.
PNG – A more advanced image format which allows transparency, it is best suited for computer generated content with areas of block colour and images which require transparency.
SVG – A lesser used format that has gained ground since the advent of higher resolution screens. SVG handles vector graphics, making it suitable for logos and simple computer graphics. As it is a vector graphic format, it can be stretched to any size without distorting, which means even on the iPhone’s retina display, they remain crisp where JPEG & PNG formats would potentially blur.
Caching pages and files
There are two types of caching, both of which can help significantly decrease the time a webpage needs to load.
Firstly there is server side caching; this is where a content managed website will take a snapshot of a page so when a user loads it, the snapshot is used for subsequent users (until it expires) instead of having to generate the content on the page from scratch. There are plugins for WordPress and other Content Management Systems that can do this, our favorite being WP Super Cache.
The other type of caching, is on the user side and is partially automatic. When a user loads a webpage, some of the parts that build it are stored on the users device and when the page is loaded again, that stored copy of the part is used instead of it been downloaded. While this process is automatic, a website can be configured in a way which increases the likelihood of it occurring.
Reducing the number of external widgets
Widgets can be a great way of integrating social networking sites into a website. However, because of the nature of the information they display, this can adversely affect the loading time of a web page.
This problem stems from images been displayed within the widgets. For example; within the Twitter Timeline widget, the images appear as a thumbnail but they are actually just the original larger image scaled to fit within the box. We have seen cases on websites that we have built, where a single widget has added over 1.5mb to the total size of the page and added on average 2 seconds to the total loading time.
It is important to weigh up the benefit of having a widget on the page, versus the cost in time added to the loading of the website.
If you’re struggling to get your website loading quick enough, contact us to see how we can help speed up your current website.
he image slider is now very much an integral feature of websites and is used to display as much information as we possible into a limited space.
We have always exclusively used bxSlider as our slider plug-in because it is easy to set up, offers mobile compatibility and we have the ability to integrate it as seamlessly as possible into WordPress. We have developed it as a installable plugin for use within WordPress, with an array of settings on it’s own configuration page (Under Appearance). The slider can then be inserted into theme using it as a widget.
In the pursuit of efficiency, we have also added options to allow the slider to be cached (with an expiry), allowing it to be loaded again without running costly mySQL requests and in many cases taking 10% of the time to load. While the loading time in many cases could be seen as almost negligible, we developed this with our high traffic websites (which may run multiple image sliders) in cases where over the course of a month, the potential time saved could be several hours.
We have released the plugin on GitHub so it can be downloaded and installed.
Over the past two years we’ve incrementally updated out website’s appearance and some of it’s features; but never sat down and started from scratch. This Christmas period gave us the chance to sit down and re-write our website from scratch to make it more efficient, create a more minimalist design and bring it up to date with how we consume the internet and web pages. Here are some of the things we’ve added into our new website:
Scalable Design & Mobile Detection
While nearly all of the websites we design and build now scale to the device they’re being viewed on our website missed this feature. This rebuild allowed us to build it in from the beginning and allow use to make sure every feature and design worked and loaded on Desktop, Tablets and Smart Phones.
CSS3 transition effects
Re-build images as SVG
With the advent of the iPhone 4 & the new MacBook Pro laptops screen pixel density increased dramatically, leading to images on websites (which are often saved at 72dpi) to appear less sharp and sometimes blurred. With this in mind we’ve rebuilt a lot of the graphics on our website in the SVG format.
SVG (or scalable vector graphics) are stored as complex maths equations, which allow them to be scaled up to any size while remaining sharp and clear. This means that when a device which a higher dencity screen loads our website key parts of it will remain sharp, even when the user zooms in on that area.
Happy New Year! Here are our predictions for the year ahead. We think they’re all pretty safe bets, but we’ll see come the next year!
The decline of Internet Explorer 8
Older versions of Internet Explorer, with a lack of compliance to what are now common standards have been a nuance for web developers for a long time now. Over the years people’s usage of them has dwindled and with the “death” of Internet Explorer 7, version 8 is the last mainly used browser not to fully support CSS and HTML5 on a basic level. The decline in visitors using Internet Explorer coupled with Windows XP reaching it’s end of support later this year, we predict, will see the use of IE8 plummet paving the way to a better supported, more secure browsing experience for both developers and visitors.
Better security and encryption of web services
With some highly published security breaches last year we predict that web services will not only be better securing their own services with better encryption to protect their users, but also offer them much better logging in security to prevent breaches on a personal level. Last year we saw the introduction of 2-step authentication, which required a code which is delivered to the end users phone as well as a password, added to a portion of big web services and we believe that this year this level of security will also come to personal website to protect against brute force attacks.
Flat design will continue to dominate
The past couple of years has seen a shift away from the heavy use of graphic effects, gradients and skumorphic design more in favor of flat, clean design. Perhaps the most high profile shift in design was on iOS with the use of real life textures been removed in favor of block colour. The web has slowly been catching up with this trend, most notably to us with the re-design of the WordPress dashboard. This trend has a lot of benefits, the main been simpler websites to navigate and quicker loading times with the removal of heavy textures.
More HTML5 features will become standard
As older browsers fall out of use we’re coming towards a stage were all the majorly used browsers are compatible with at least some HTML5 & CSS3 features. Since the majority of browsers will somewhat support these latest standards, websites will be able to be developed with these new features without the need of a fallback.
LTE and faster more reliable mobile data will lead to more advanced mobile websites
With the introduction of LTE (4G) and faster more reliable 3G which has been implemented in the UK last year we will start to see more media rich and more complex mobile websites. This increase in speed an reliability will also allow for better quality images to be delivered with web pages; this has been a problem for mobile devices that have much higher resolution screens per inch than traditional PCs and has lead to blurred images been on mobile websites.
Since our start we’ve consistently used a reseller host which allowed us to offer a good balance between cost and performance for our clients. As we have grown as a business our needs for hosting have dramatically changed, where originally we’d hosted small websites which put little strain on server resources; now we’re hosting much larger websites that are much resource intensive and have richer content embedded on them.
It’s with this in mind that over the Christmas period we began to set up a VPS to host our client’s websites on which will allow us to scale up our business, and handle a whole range of different websites.
1. Our record for most unique hits in one day, on a single website is 617 (with 2,538 page views). This may not sound like much, however just loading the first page alone (assuming the page was around 1.5mb at the time to load initially, without using any cache) but that’s 925.5mb without taking into consideration the rest of pages viewed that day, or the traffic from other websites on the same server.
2. SSD (Solid State Disk) is a hard disk with no movable components, as opposed to standard magnetic hard disks. They consume less electricity and have significantly lower Read and Write times.
Recently while developing the Camden’s Closet website, we came across an issue when loading social media sharing buttons multiple times on the same page.
When they were loaded normally the buttons would each load the resources they required to work, but because each button is an iFrame (a web page loaded in a frame) this added some bulk to the web pages, with them been loaded multiples times.
To overcome this we took the link structure which the normal buttons used to share content and built some pure HTML & CSS sharing buttons which integrate into WordPress and look identical to the originals. Overall when all three are loaded at the same time they use up just less than 3kb and use only two requests to load ( only one if CSS is integrated into the WordPress Theme).
We have released the code we generated for these buttons on GitHub here for anyone to use.