default title
January 30th, 2018
Here is a quick list of essential Google Chrome extensions for web developers and designers.
If you use any useful extensions not listed here please let me know.
WhatFont
Easily find out what font is being used on any website text.
This extension also displays the font weight, colour, size and styling.
Download here
PerfectPixel
PerfectPixel can be used to overlay .jpg visuals over any webpage.
This allows developers and designers to quickly make sure development websites are pixel perfect.
Download here
AdBlock
This extension prevents pesky website ads from interfering with your website viewing experience.
I also use Adblock Plus on my iPhone to stop ads on my mobile.
Download here
Page Ruler
Page Ruler lets you add lines to your webpage to make sure elements are on grid and aligned correctly.
Download here
default title
January 21st, 2018
Responsive images are images that work well on devices with widely differing screen sizes and resolutions.
This can be achieved by displaying the same image at all screen resolutions and device widths. This could however lead to a pixelated and fuzzy images being displayed on desktop, or a massive image being displayed on mobile devices. Leading to unnecessary load time on pages.
WordPress by default generates different sizes of each image uploaded to it’s admin and can output them using the <img /> tag srcset. This allows different sized images to be loaded into the webpage at different screen sizes, decreasing page load times.
I’ve recently been using the jQuery plugin Interchange which allows the above functionality for CSS background-images, as well as replacing specific img sizes at specific breakpoints.
Interchange has been used on the Jack Starz website. This allows smaller background images to be loaded into the page at smaller screen resolutions.
default title
January 21st, 2017
Information Gathering
Purpose
What is the purpose of your website? I will need to know what your website’s purpose is whether it is to sell items, blog or showcase portfolio items.
Goals
What do you want to achieve from having a website?
Target Audience
Who will your website be targeted towards? Will the website be business to business or business to customer? Who would your business avatar be?
Content
What content will you post on your website? It’s good to get an idea of what information you will want to display on your website. Having content ready will help me layout pages within the planning stage.
Planning
Sitemap
What pages will you need on your website? It’s ideal to create a sitemap to list all the main areas of the website and develop a consistent navigation.
Content management system (CMS)
Do you need to regularly edit and update content?
If yes it’s best if you have a CMS to easily update images and text. I recommend WordPress as it is easily updatable with a wide array of plugins to increase the functionality of your website.
Wireframes
Once all of the initial content and pages have been decided for your website, wireframes can be created to outline where content will be positioned to maximise user interaction. This can be as simple as a sketch of boxes to a working interface showing the users experience and testing layouts within app designs.
Websites you like
Collect links to websites you like the look of or features within them that you would like on your website. This will allow me to gauge what styles would suit your website and what functionality would be required.
Website Design
Information gathered from the planning stage is now used to begin designing your new website.
Influences from your preferences, branding and websites you like are now used to create pages within your sitemap and wireframes. Consistency between pages is key to having a well designed website.
Once the designs have been approved the website development and coding can begin.
Website Development
The development begins with the finalised website design images separated out and optimised for the web. The designs are then converted into responsive HTML pages styled with CSS. I optimise all website content to increase Google search engine ranking.
Interactions are then added with JavaScript to bring the site to life. This can include hover states for links, image sliders or parallax content.
Content management systems can be integrated at this stage to allow the edibility of content.
Testing and Delivery
Towards the end of website development the website is rigorously tested for bugs within different web browsers, screen sizes and devices to make sure the website works correctly for all users.
Final content and imagery is now added to bring the website to life.
Once the website is tested and optimised it is now ready to be put live. This is where the development site is moved to the live server so the public can see it.
Maintenance
This stage is often forgotten about until something goes wrong or if you want to update the design of your website.
WordPress often has updates for plugins and it’s core code. These can be automatically downloaded within the websites dashboard. Updating can sometimes break sections of the website, it may be best to contact your web developer to ask if it is necessary to perform updates.
default title
February 11th, 2017
Domain and Hosting.
To run your own website you will need two components:
A domain (the www.YourWebsiteName.com) and website hosting which is essentially a computer that is always on so it is accessible to your customers.
This is fairly straight forward to set up. Hosting comes in many different packages, I recommend One.com as it contains everything you need in one package. The starter package costs just £10.80. This isn’t the quickest hosting but you can upgrade to quicker tariffs within if needed. This package also contains unlimited domain specific email addresses and a website builder.
The Framework
Within One.com’s control panel is an option for a one click WordPress install. WordPress is my content management system (CMS) of choice as it’s one of the largest CMS with over 74.6 million websites using it’s framework. You will have to fill in basic information such as username, password and what you want your website title to be.
Please don’t user the username ‘admin’ this makes it easy for people to hack into your website.
The Styling
This is the fun bit where you get to decides what your website will look like. WordPress has millions of themes that are available to style your website. Free WordPress themes are available via many websites such as https://wordpress.org/themes/ premium WordPress themes are also available from websites such as http://themeforest.net/category/wordpress. Themes are skins for your website that use the default functionality of WordPress in different layouts or styles to suit different company sectors. Most themes are easily customisable being able to change colours or images easily. You can alternatively commission a website designer to create you a bespoke website design. If a generic theme isn’t quite for you this may be the option for you. This will allow you to have a completely custom website.
Custom Features
WordPress is a highly flexible framework that allows you to add in custom functionality such as changing your website into a e-commerce webshop or adding a social media share link. Within WordPress’s admin is the ability to add plugins. The majority of plugins are free and allow you to easily enhance your websites search engine ranking or allow your images to pop out and become full screen. If you want any custom features, it’s best to speak to a web developer to see if it can be easily added as a plugin or if your theme needs to be customised.
Contact me to find out how I can help you.
default title
August 23rd, 2016
How do you know your website is due a refresh?
Listed here are five reasons you may need a new website design.
One – Is your website responsive?
Does your website respond to different screen sizes and orientations?
Unresponsive websites are hard to navigate on mobiles and tablets. Users have to zoom in and out to see the websites content making it hard for users to interact which can push potential customers away. Website users want to easily access webpages without having barriers to content.
If your website isn’t responsive Google decreases your page rank, demoting you within its search. To find out more about website responsiveness check out my earlier blog post here.
Two – Does your website generate leads?
Do you generate enquiries from your website? ‘Other than spam’ If your website isn’t generating leads maybe it’s time for a refresh.
Do you want customers to contact you or buy your product? You may be overloading your website visitors with too much information and not directing them to what you want them to see. It’s key to create call to actions that focus customers to what you are promoting.
Three – How does your website compare to your competition?
Have you looked at your competitors websites? How does your website compare? It may be time to get ahead of the competition.
A fresh modern website can increase visitors and customers to your website. If your website is looking unprofessional or outdated compared to your competition you may be missing out on sales.
Four – Can you update your websites content?
Are you having to go back to your web designer or developer every time you need to update the content on your website?
It may be time to upgrade your website to a content management system (CMS). A CMS will give you the ability to change anything on your website. You could add images, page and blog posts easily within your website browser.
My preferred CMS is WordPress, It is a simple to use framework which websites, blogs and online shops can be built upon. WordPress is free to download and offers some free but limited templates. To have your website converted to WordPress or a bespoke theme created get in touch.
Five – Are you connected to social media?
Are you on social media? Do you have a Facebook or Twitter account? Link your accounts to your website.
Having your website linked to social media is an invaluable marketing tool. It allows visitors of your website to see how you interact with the public; giving customers a sense of your brand and may help seal the deal when comparing you to your competition.
default title
June 14th, 2015
How fast is your website?
The time it takes for your website to load may put off visitors from even stepping foot onto your website.
No matter how pretty or well designed your website is, how it is developed and what hosting provider you use may be all your website needs to increase traffic.
To find out what is slowing down your website click either of these links for a free speed test on Google or pingdom. Both provide an in depth look into your websites processes.
Google provides documentation to help optimise your website although the information provided isn’t always clear or easy to understand.
Get in touch with me if you want me to look into what can be done to improve your websites speed.
Easy improvements to increase website speed include
Optimising images for the web.
Large images increase the load time. Images can be optimised without loosing quality by saving for web on Photoshop or running images through a minifying tool like ‘JPEG mini’ and ‘TinyPNG’. WordPress has a variety of plugins like ‘WP Smush’ and ‘EWWW Image Optimizer’ that can bulk optimise your images within your website.
Enable browser caching.
Browser cashing allows your website files to be temporarily saved within users computers. This decreases the number of server requests as key files like the images, CSS (Styles) & JavaScript (Whiz Bang Effects) have already been stored. WordPress has many cache plugins. My preferred WordPress cashing plugin is ‘W3 Total Cache’.
Minify Files.
Files like the CSS, HTML & JavaScript can all be minified cutting out spaces and comments to reduce the file size.
It helps if the files have been coded correctly. Messy and unnecessary code can be cut out to reduce the size and let the web browsers read them easier.
Put JavaScript in the footer.
JavaScript files are normally large and slow down the load time on the website. When placed in the footer the JavaScript files get loaded last allowing users to access the visible content while the ‘Whiz Bang Effects’ get loaded in.
Get a faster server.
I use one.com or Heart Internet for my hosting provider, they are both relatively fast & good value. For larger more intensively used websites I would recommend a website with a content delivery network (CDN) to speed up file downloads or a faster website host like WPEngine or Amazon AWS.
If you need any help on improving your website speed feel free to get in touch and we can take a look into what I can do to help you.
default title
December 6th, 2015
When it comes to creating a website for your business their is a large number of pre-made themes for WordPress. What is the difference between pre-made themes and bespoke themes?
Pre-made themes have been created by designers and developers to serve any purpose or business. This often leaves flaws with the design or coding because they have been made for no specific website.
Bespoke themes are a lot more specialised with only the function they have been created for and need coded into them. This makes them quicker and normally easier to edit.
Pros and cons of pre-made themes.
From my observations most pre-made WordPress themes are either good or bad. Until pre-made themes have been added to the WordPress backend its hard to tell if they are good or not. I normally rate themes on the following: –
Ease of customisation.
How hard is it to edit the features of the theme? This could include editing the logo, images, pages and colours.
Speed of the site.
Has the theme been optimised for speed and SEO? A free Google page speed test or a theme check plugin can be used to check the speed of the site.
How it’s been coded.
This may be hard to check. A basic theme check plugin could be used to see if the theme has been coded to the WordPress theme development guidelines. If you need help to assess the code a web developer could be used to accurately evaluate the theme.
Pros and cons of custom made WordPress themes.
Custom made WordPress themes are made to order for every website. Using designs approved by the client a theme can be created and optimised for the number of page designs and effects.
Every theme is made differently depending on the design and the web developer coding it. I would recommend the following when commissioning a web developer to create your bespoke WordPress theme: –
Its your theme!
Nobody else in the world will have your WordPress theme. Pre-made themes can be added to any website so you and your competition could end up with the same website.
Custom functionality.
Bespoke WordPress themes can be created with a wide range of custom functions and effects.
Speed & optimisation.
Depending on the developer and needs of the client bespoke websites are coded to the latest coding standards and optimised for speed on every theme.
Cost.
Bespoke themes can cost hundreds and thousands depending on the design and functions needed on the site.
What is right for you?
It’s entirely dependent on preference and budget. I would recommend searching through pre-made themes and seeing if any of them meet your requirements. Most pre-made themes are normally below $100 making them a definite for those with a tight budget.
Failing this contact a web designer or developer and get a quote or estimation for a bespoke website. It’s best to contact a few different designers and developers to see who is best suited to create your site as everyone has different preferences.
Contact me to find out how I could help you with your new website.
default title
May 19th, 2015
As a web developer a common issue is browser testing. Everybody has a browser of choice be it Safari, Firefox, Google Chrome, Internet Explorer or another browser.
All web browsers essentially do the same job and even look similar although some are more user friendly, faster and are kept up to date with the latest technologies.
A thorn in every web developer’s foot is the dreaded Internet Explorer, coming already installed on most PC’s. Modern web browsers automatically upgrade to the latest version to keep up to date with the latest technologies. Internet Explorer is well known by developers for its errors and inability to keep up with the latest technologies. This makes development harder as websites have to be coded and hacked to be backwards compatible to work in older browsers.
My browser of choice is Google Chrome. With its up to date technologies and speed. It is also a great developer browser as it provides the best console to edit and test websites.
The latest HTML5 and CSS3 technologies only work in the most current browsers, although hacks and backups for older browsers are available this adds time to development and therefore cost.
Not only does upgrading your website browser improve your user experience, speed and security, it also allows you to view and access the latest technologies and effects available to the web.
Upgrade your browser today!
It’s free!
default title
May 8th, 2015
Is your website responsive? To find out if it is click the link below and type in the website address (Google mobile test).
For a website to be responsive it has to adjust layout to best suit the device it’s viewed. Allowing the website user to optimally view the text and images without excessive scrolling or zooming in and out.
To keep this short and sweet more than half of the worlds internet users now uses mobiles and tablets to Access the World Wide Web. With technology ever evolving and new devices coming out its more important than ever to have a responsive website.
With an ever increasing number of individuals using mobiles and tablets to view websites. Google are now penalising websites that aren’t responsive. This is resulting in the Google page rank being decreased leading to websites dropping down the search lists.
It’s relatively easy to design a new website or adapt a current website to be responsive. Utilising a column or fluid layout which can adapts using CSS3 media queries, a common design technique to change views at breakpoints and different screen sizes.
Here is the technical bits.
When I convert a website to be responsive a viewport meta tag is placed in the HTML header to tell the web browser to make the viewport(screen) width to be the device width.
I add a new CSS file normally called responsive.css to the styles directory of the server. Within this file CSS3 media queries are then used to tell the website to change styles by showing/hiding and adapting the layout and styles of the website depending on the screen width or orientation.
Media queries are the most common technique to achieving a responsive website. If you want any more information or to receive a quote to make your website responsive please get in touch.
Pages
Archives
Categories