best websites of the world

FRONT END DEVELOPER/
WEB DEVELOPER/
WEB DESIGNER/
LONDON/ SURREY/

Tag Archives: Web Development

CSS em Units Explained

Most web designers and web developers have relied for years on pixel values. I for one didn’t really know allot about using em values. This article will hopefully try to explain what em units are and how you could use them in your projects.

What exactly is an em value?

Formal definition from of the unit

“Equal to the computed value of the ‘font-size’ property of the element on which it is used.”

So if we have set the font size of an h1 element to 20px and then we used the following code:

H1{
	font-size: 20px;
	line-height: 1.2em;
}

this would set the line height to 20% bigger than the font size set. So it would be 24px high.

But what if you don’t set the size of your font? Generally in your CSS tree you will have set font size’s at some point, I don’t really see how you cant! But if no font size has been set the size on an em unit will result to 16px.

The only way you can learn is by doing! So lets try one more.

Say we have a div with a font size set to 20px how would you go about setting the width and the height of the div to be the same as 100px? Well 100 / 20 = 5 so you would set the height and the width of the div to be 5em like so:

.div {  
    font-size: 20px;  
    width: 5em;  
    height: 5em;  
}

A little tip – comments

Recently I have completed some work in collaboration with some other web designers and developers. To be polite the codes comments were particularly light. Its not really that necessary to comment CSS code quite as much as if you were writing in PHP or C# however in the case of using em it is really helpful. For the example above I like to comment like the example below. This really helps after a while to get your head round em units and you will be grateful when you go back to look at your CSS file in a few months time!

.div {  
    font-size: 20px;  
    width: 5em; /* 100px / 20px = 5em */
    height: 5em; /* 100px / 20px = 5em */
}

Round up

I found it quite hard to get into the habit of using em units after using pixels for such a long time. However the new releases of the popular css frameworks, Foundation.Zurb and Bootstrap include the use of em units.

While current trends in web design make use of responsive layouts I believe the use of pixels and percentages are necessary for setting container sizes etc. However the use of em units become useful when setting sizes in relation to fonts.

Search

Social

How To Gather Web Design Inspiration & Ideas

As a web designer and developer I find myself constantly needing some kind of inspiration, whether it’s for a new web page design or a new image slider that needs to be built. There is a fine line between using a website as inspiration and ‘stealing’ the ideas.  When I first started in the enormous industry of web design and development I purchased the book “The Web Designer’s Idea Book”. This put forward the idea that a good designer would take elements from existing work merge them together to create an entirely new design. Now sometimes, as I’m sure most designer have, I have a moment where I can just see everything in my mind of how it should work and look and that’s great, but sometimes I get a bit of a mental block and need some help. The following article lists some great websites and books that I have used and recommend to gain inspiration, and remember don’t steal!

Inspiration Websites

I could list hundreds of websites that I have used to gather inspiration; my bookmarks tab is full in chrome!

My favorite place to look for inspiration is on awards websites. This is because it lists a huge amount of websites that people have voted for and that have won awards. The general standard of design and usability of the websites listed is very high which provides a high standard to work too.

http://www.cssdesignawards.com/

I use this website when I need some fast inspiration, its great to browse hundreds of web designs in a few minuets.

http://www.thebestdesigns.com/

The Best Designs provides a well-categorized list of websites. For example if you the look and feel you are going for is “dark” you can filter the results they have by that category, which stops you from sifting through hundreds of irrelevant entries.

http://www.awwwards.com/

Awwwards is my favorite chosen website to work with when it comes to inspiration. There filter system for looking through entries works perfectly allowing a user to find relevant designs with ease. You can sort the entries by, Keywords, Tags, Colour etc… This website is a must for your web inspiration bookmarks tab!

A few others worth checking out:

http://www.designlicks.com/

http://americandesignawards.com/

http://www.webbyawards.com/

ThemeForest

As I’m sure you are aware ThemeForest is a website that designer can sell templates and themes for websites. Some of the designers on this website really are top class showing some great designs especially responsive web ones, which have really helped me in the past to get a feel off where elements will go when a page is responding.

Inspiration Books

I know that everything is available on the web for no cost, however I am still a fan of being able to pick up a book and look at print material to gain inspiration. I use 2 books regularly: The Web Designers idea book Vol 1 and 2. These are available from amazon and are cheap for what you get! I believe Vol 3 is coming out this year too.

Round Up

There are thousands of beautifully designed websites out there these days. Research into existing websites and gathering inspiration is key to the development of a website. However always keep in the back of your mind of how the website will work. Its all well and good to have an amazing web design but if the website doesn’t work and let a user achieve there goal it is pointless. Try to cross the design and usability.

Thanks for reading and any comment would be appreciated!

Search

Social

WordPress running slowly? – How to speed up your WordPress site

Recently I have come across a number of websites that seem to have ridiculous load times; on further inspection most of them are built on WordPress! Now I no that some large multi national organizations use WordPress as a base, such as the new CNN Political ticker website and IBN live, however these business’s can afford huge dedicated servers and content delivery networks. Some of us host our WordPress sites on shared hosting servers, which is where it can run into problems.

First of all it’s worth to take into consideration that WordPress has a large codebase, and the more code there is the longer it will take to load! There are a few steps that I have used to speed up WordPress sites in the past. This article looks to show you a number of things that can help you maximize your WordPress website load time in a few easy steps.

Validate your theme

To ensure that your theme will load as quickly as possible it is good practice to validate your theme as you develop it. There are a number of tools out there to help you ensure your theme complies with the latest WordPress standards. Personally I like to use the plugin Theme-check

The Theme-check plugin provides a valuable debug tool that shows easy to understand error messages. Generally it shows some errors that cannot be helped, for example it shows errors if you have hard coded links, which sometimes cannot be helped.

Plugins, comments and posts

The installation of lots of plugins can have a significant impact to your WordPress website load time. Try to keep the number of installed plugins to a minimum and delete unused ones. I do try to write most things myself to ensure I know what is going on however sometimes it can save a lot of time and effort to find a pre-written plugin.

Undoubtedly if you run a WordPress site you will have had some kind of spam via the comments section of your website. Cleaning the spam comments and deleting them from the database can optimize the database and speed up the load time of the website.

As spam comments, post/page revisions saved in the database can create a very large database that is unnecessary. Make sure you are happy with all your pages and posts before deleting the revision history! A very useful plugin to assist you in this is can be found here better delete revision

Caching

Caching in its simplest form is a saved “image” of your website that is displayed to a user looking at your website without the page requesting data from the database.

When WordPress loads a page, a lot of requests are made between the web page and database. The use of a caching plugin can speed up the load time of a page as it displays a copy of the page and by passes the database queries.

There are a great number of plugins to help you with caching; my favorite however is W3 Total Cache

You can run into some problems while developing if this is activated. I have many times made changes to a theme, saved and uploaded the files to find my changes aren’t working. After a period of panic and annoyance I find out that I am seeing a cached copy. So turn the plugin off if you are about to make changed to your theme!

Test!

There are a number of ways to test your WordPress site to see what is taking the time to load. The web tool Pingdom Tool allows you to input a URL which is then testing to produce a report. This can show you which of your files are taking the time to load, that can then be optimized. For example if you a JavaScript file included that is very bulky and takes a long time to load you could minimize the file to optimize the page load time.

Conclusion

There are so many factors that can impact a WordPress website’s performance. The points made previously have helped me in the past optimize my WordPress websites. Please comment with other ideas and techniques and share your knowledge!

Search

Social