Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Beginner’s Guide to becoming a Professional Web Designer

Posted March 10, 2011 & filed under Tips & Tools

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.

Related

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

Related

  • Meta Tags Generator
  • 8 Web Usability and Best Practices for Beginners

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.

Related

  • 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

Image Credit

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.

Related

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

Related

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

Lead Image Credit

Edited by Kawsar Ali

More about Lara

About the author

Lara works with an online hosting guide , that provides gamut of solutions in the webospere.

Tags: CSS, web designer, XHTML


Related posts:
  • 10+ Web Resources to Make Web Designers Life Easy
  • 16+ Tech-Tool/Tip that will Make you a Better Web Designer and Blogger
  • 27+ Handy Javascript Techniques for Web Designer
  • 8 Web Usability and Best Practices for Beginners
  • Interactivity in Web Design: A Beginner’s Guide

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech

    Theme by Kawsar Ali.