Archive for the ‘CSS’ Category

You may have heard about CSS3 transitions, and how you should never use them (or CSS3 in general) in commercial sites without a fallback because it’s not compatible across all browsers especially the older ones.

We think, though, that it’s important to start learning and practicing this technology now, because in the future, it could well send jQuery animations the way of Flash.

If you looked across the industry now, it wouldn’t seem like anything could knock jQuery from its perch, but it wasn’t too long ago when we all thought that about Flash.

So why use CSS3 transitions? CSS3 transitions can add an effect from one style to another and not use Flash or Javascript to create transitions.

But what is the reasons for using CSS3 transitions in the first place? CSS3 transitions will offer smoother user experience compared to Javascript animations because everything can be handled by the browser engine.

This bring us on to our next point where mobile devices are getting faster and more people are browsing through the internet using their mobile devices. With the introduction of the lighting fast 4G network we need to ensure that websites are developed to work on the mobile devices. CSS3 transitions will be help produce smoother transitions on mobile devices as mobile devices are not powerful like desktop computers.

There are many other benefits such as the load speed can be significantly reduced the file size of your HTML document can be significantly reduced too because we are not calling Javascript or Flash.

There are issue with cross compatibility issues with Flash, Javascript and CSS3 so they are all bad as each other. But obviously there are greater benefits with using CSS3 hence we have discovered a great solution in using CSS3 so that it is cross browser compatible. Features such as rounded corners, drop shadows etc can be produced and work on Internet Explorer 6 to 9. supports the following elements of CSS3:

multiple background images

linear-gradient as background image

border-radius

box-shadow

border-image

In the near future we may see a change in how transitions work on website and CSS3 being the major preference over jQuery or Flash that have been so dominate in the past.

Does your WordPress blogs load slow? Google are taking page load speeds a bit more seriously nowadays hence it is crucial that your websites build considers the page load time. As web designers we can certainly help web developers by not designing websites with big backgrounds etc. Over 80% of the end user response time is from the front end. Images, Flash, jQuery, Javascript, CSS all play a part in how quick your WordPress or web page loads.

There are a few things that you can implement to speed up your WordPress or web page:

1. Install less WordPress plugins, do not overload it. A good plugin to have is WP Super Cache and you can download it from . Also delete inactive plugins from the server and this would get rid of external stylesheets or javascript files that the plugin may call on a particular page.

2. Combine all the CSS together in one file and keep in header and try combing javascript together or minify using a online javascript packer which can be found and place in the footer.

3. Use a light weight theme and makes sure you use CSS sprites and not big background images etc. If you do use lots of images you can use a WordPress plugin which will reduce the file size of a image without affect the quality of the image. This plugin can be found .

4. Try using free content delivery networks such as Cloudflare it is quick and easy to setup and will protect your website from Malware and other nasty attacks.

5. Add the below code to your theme’s functions.php place it at the top to remove unwanted stuff from your header file.

Web design is continually evolving and we as web designers are always playing catch up and accumulating new technique to stay ahead. We thought it would be nice to review a few favourite jQuery plugins that we use here at Morgan Creare.

We recently stumbled upon a new jQuery plugin which uses CSS3 to create unique transitional style to your slides. Sequence is a jQuery plugin that has been developed by Ian Dunn and gives you the power to customise the plugin to your taste as it has no in-built theme. The plugin can be downloaded from . No jQuery knowledge is needed to use this plugin and it gives a Parallax effect which is currently popular most web designers. We would highly recommend this plugin for the use of animating text and potentially using easing to give a flash like effect.

The next plugin which is currently popular with us is called which is by Pixdelic. This plugin is like the Wow slider but with this plugin you can have images, content and video slide from left to right and add cool transitional effects.

There are many more plugins available which do new and exciting things for websites. HTML5 and CSS3 are giving many websites new and exciting designs and effects. Both HTML5 and CSS3 is using animation of 2D elements to make the user experience of a typical website more interesting and most importantly compatible with mobile devices such as the Android and iPhone and iPad.

We are in the process of updating our web design portfolio and if you are from the Bristol, Cardiff, South West area or anywhere else in the UK please give us a call today and get a quote from us today.

Last week Apple released a few new pages on Apple.com showcasing the abilities of HTML5 and CSS3. I believe there are 1 or 2 reasons for them doing this. 1. To show the way forward in web design (maybe taking a pop at flash) and 2. For the new upcoming Safari 5 web browser rumored to have a lot of new additional HTML5 and CSS3 features. (more…)

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]» more