Web designing is a fair combination of creative skills & technical know-how. A great, successful web designer has both, and others have only one of those two necessary attributes. Use of ready-made software’s has a mirage on the people thinking that web designing is an easy task, which they can do by themselves without much time or energy being spent. Nevertheless, this is not true, and only those who do web designing know the kind of problems that arise while developing web pages. So here are few things to know before you start out as a web designer or are new to the concept of web designing.
Organization and Proper Coding
The first step of creating a good website is by being organized. It improves your work flow and saves you time. There are many ways of arranging your files, but the above image shows to common way of web designers’ arrange their files. Now after your got your files ready, you have to know how to code like a professional. You can not throw your code all over the pages and you must know how to create XHTML pages. It is the utmost and first step for becoming a web designer. If XHTML sounds gibberish to you time to hit the books. As, we mentioned there certain ways you should structure your CSS and HTMl files. There couple of good posts that explain how to do that. We have linked them below, make you read them thoroughly.
- 30 HTML Best Practices for Beginners
- 20 HTML Best Practices You Should Follow
- 30 CSS Best Practices for Beginners
- CSS Best Practices
Let Search Engine Find You
What are the META tags? Meta tags are not visible by your visitor and they are used search engines to index, catalog and categorize your websites. So, if let’s say someone Googles for you they can easily find you. They are necessary, and help in attracting a better traffic that is driven by search results. The META tags should be such that they should contain the keywords that are relevant to the site or the web page. Do not stuff the page with hundreds of keywords. This can attract a negative page ranking, which is not useful your website or your clients.
<meta http-equiv="Content-Language" content="en"> <meta name="description" content="Your description"> <meta name="keywords" content="keyword1 keyword2">
Reduce the Load Time
Images are preferable than a content or text on a website. However, the problem with using images is that it can make your webpage or the site heavy. While loading, a site heavy with images can take much longer than a conventional site. The time it takes for any website should be no more than 5 seconds. As a rule of thumb, to ensure that the page loads faster, always keep the page size below 30k, on an average. Make sure you compress and reduce the size of your images for the web. Another clever trick web designer uses to make website load faster is by using CSS Spirites. As Chris Coyier explains “instead of just two or three images being combined into one, you can combine an unlimited number of images into one”. Using CSS Sprites the number of image requests are reduced and as a result your page loads faster.
If you are an user how long would you wait, for a page to load before click the X button? It can vary from person for person but our guess would most people would not wait long. Keeping your code clean, caching, compressing your CSS and JS files are some conventional methods of making your website load faster.
- Saving Images for the Web
- Best Practices for Speeding Up Your Web Site
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- Optimizing Page Load Time
- How to Optimize Your Site for Better Loading Time
Screen Size Consideration
The way the page appears to your visitor is the utmost importance. Not everyone has the same screen sizes, or similar resolution. So, if the webpage looks good on certain resolution, it doesn’t mean that it will look equally good on other monitors with higher (or lower) resolutions. A developer should cross check between various screen resolutions to check if there is anything that can be done to ensure an even view across all the different screen resolutions. The average screen resolution is 1024×768 and followed by 1280×1024. However, you also do not want to neglect the rest of the user with bigger screens. Therefore, making sure your website looks same or similar of different screen size is really vital.
- Best Screen Size & Screen Resolution to Design Websites
- What Screen Resolution We Should Design For?
- Designing for different screen resolutions
Cross Browser Testing
Sudden rise in the number of browsers that are being used across the web, developers are finding it difficult to match up to its pace and avoid incompatibilities. Till date there is no unified browser that can handle everything without creating compatibility issues. A designer must embrace this reality, to create pages that suit & function properly at least on those more famous browsers. Most common web browsers are : Firefox , Chrome , Safari , Internet Explore 7 & up (Unfortunate). Start by testing your website on those browser. Another problem with cross browser testing, not owning machine with different OS. As, you know Windows, Mac, Linux are most used OS and most of web browser usually cross platform compatible except Internet Explorer ( Not a shocker). How do tackle this problem? There many ways you can run another OS on the top of your OS using virtual machine. We have listed couple of posts to help you overcome this problem.
- 7 Fresh and Simple Ways to Test Cross-Browser Compatibility
- 10 Helpful Resources for Cross Browser Testing
- The Best Way to Run Internet Explorer on your Mac
This article just a simple guide to point you to the right direction. If you are starting as a web designer , the best way you can learn about web design is by practicing, reading and making mistakes. The more mistakes your make, the more you will learn by looking for the solutions. While all the article and resources we have provided , might appear like information overload once you get used to it you will become an efficient web designer.
Edited by Kawsar Ali