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
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