Category: Web Designer of Nepal


Raj Kumar Maharjan

Razer's Personal Website

Hello Frens,
With the great success of my personal blog site (www.cssdesigner.wordpress.com). I had made my mind, why not to make personal website as I am self CSS Developer. So, finally I had completed my personal website design in JOOMlA Framework. As I am very sure that my personal website makes me to know not only on Nepal, all over the world people will know about me. You are welcome to send your thought and feedback about me and my work. Please check out www.rajmaharjan.com.np . Happy Surfing 🙂

As I am a web designer today  I am writing the article about the hope of web designer in nepal. Is there are good scope in the field of web design in nepal? According to my view even though world are suffer from the economic crisis that doesnot effecting in IT outsource Market in nepal.

Many developed country are focusing to outsource the web project in nepal where manpower are cheaper in compering with developed country. So many web designer of nepal getting chance to work of the foreign country. In one side web designer are being hire on high cost on other side web market of nepal was not going on developing because  of outsourcing the foreign project . Web Designer getting chance to develope there skill to competative with the developed country.

A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar. So, Liquid Layouts Template totally based on Percentage (%).

Advantages

  • If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is rarely a reality, but in theory, and if care is taken to ensure it, it is possible.
  • Fluid widths match the browser default layout method making this the “traditionalist” of them all. But does a developer’s want of site purity sometimes stand in the way of usability? I think it may.
  • The fluid layout makes the most out of available screen real estate. More content should be above-the-fold (meaning it’s available without scrolling in any direction).

Disadvantages

  • Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered. There is an expression: “White space sells” and it’s a truthful statement, even on the web.
  • If width limiters using the CSS property max-width — which isn’t supported by Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may very well, in your quest for layout purity, create a site that is at best difficult to use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see the problem.

Some Fluid Layout Advice

  • Use this layout method purposefully. Don’t do it because it’s “pure” and for no other reason. I suspect there has to be a better reason than this. If you do create a fluid width layout, make sure it fits in a large variety of view port sizes. Else, why bother?
  • If you’re making a fluid layout site and have fixed width content areas, you have essentially made a fluid/fixed width layout hybrid and can only be as narrow as the width defined by the fixed width content section or largest object. Be careful. If you’re going to make a site that is fluid, make sure it’s really fluid and not just in name only.

A fixed width site is one where the main wrapper is set to a specific fixed width independent of the user agent’s display resolution. A common and thoughtful fixed width is 760 pixels, a size that ensures users with 800×600 resolution monitors have close to full window viewing without bothersome side-scrolling.

Advantages

  • The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).
  • Fixed width layouts are sometimes easier to style depending on the effect you’re after. Some visual designs can only be achieved in a reasonable manner with a fixed width layout.
  • Based on the example width above — 760 pixels — the typical main content area will be in my opinion an ideal width for optimum readability.

Disadvantages

  • My valuable “ideal width for best readability” pro-listing above can go bad if the text is enlarged greatly since the line-width-to-text-size ratio doesn’t increase along with text resizing. Do note, though, in a good design, this is only a problem if the text is huge.
  • People with small monitors (640×480 pixels) will end up with a horizontal scroll bar on a 760 pixel fixed width site. This is a very uncommon problem.
  • A 760px fixed width site can look too narrow on large screen displays.
  • The narrow width can limit the reasonable number of columns and content, but this may actually be a pro. Think forced moderation.

Some Fixed Width Advice

  • Place your fixed width content on the left hand side of the page so on a typical site 640×480 pixel monitor users won’t have to side scroll to read the site’s primary content.
  • Be sure to provide a handheld style sheet to accommodate smaller devices. Supplying projection and TV media-type style sheets may also be a good idea.

If you are trying to do pixel-perfect cross-browser CSS layout, then you have probably ran into problems with IE . I am going to highlight the top 5 CSS hacks that we often use to have pixel perfect design.

1)Box Model Hack

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on

 padding: 2em; border: 1em solid blue; width: 30em; w\idth: 10.2em;

 Continue reading 

After designing a layout for a web site, we obviously start converting it into HTML during this session as a web designer we mainly concentrate on cross browser compatibility but we also need to concentrate on some basic seo things like…

1. Using Correct Doctype.

2. Using Meta Content and Meta Keywords.

3. Using Alt tags for Images.

4. Using Valid HTML and CSS code.

5. Make your web site load fast.

Continue reading

When I surfing the internet I used to find the web is overflowing with sites that use horribly invalid, broken, and inaccessible markup. Even sites built by people who have been in the web business for many years, and who really should know better, are full of problems that shouldn’t be there. The reason? Ignorance, laziness, lack of time, bad tools, you name it. Yes, I’ve been guilty of making many mistakes myself through the years. However, I do my best to learn, and avoid making the same mistakes over and over again.

Here’s a list, in no particular order, of some of the most common mistakes that even experienced web professionals tend to make:

DOCTYPE confusion
Completely missing, incorrect, or in the wrong place. I have seen HTML 4.0 Transitional used in documents containing XHTML markup as well as in <frameset> documents, DOCTYPE declarations appearing after the opening <html> tag, and incomplete DOCTYPES.

Continue reading

Conditional Comments
The alpha and the omega of IE hacking are IE’s conditional comments. They are IE-only feature and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.

The typical usage is as follows:

<!--[if IE]>

    do something

<![endif]-->

Untill now I used to write something like above, which applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but since the latest announcements, I started applying the following condition:

<!--[if lte IE 6]>

    do something

<![endif]-->

which means: “if this is Internet Explorer less than or equal to version 6, do something”. My thoughts are—if they keep conditional comments feature in IE7, then the browser will ignore this, since it’s version designation number is 7. On the other hand, if they abandon that feature, the browser will assume that this is just another HTML comment.

When I work on a layout I usually place all hacks for some selector immediately after its’ default rule. This way, changes can be done quickly and without searching for the corresponding hack in other places.

After I’m done with layout, I like to go through all of the CSS files once again and optimize everything from short-hand properties to assigning the same rule for multiple selectors. At that point all hacks are removed to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.

<!--[if lte IE 6]>

    <link rel="stylesheet" type="text/css" href="ie_hacks.css" />

<![endif]-->

While still in main CSS file, hacked selectors start with * html. This is known as the ‘star-HTML’ hack. Standard compliant browsers ignore this selector, because there’s actually no elements above html in a document tree. Luckily, IE doesn’t know that and we’re safe to use this flaw when applying IE specific hacks. Once we move hacks to a separate file and call it in a document with conditional comments, it’s safe to remove the * html part.

Further on in the text, assume that we are dealing with separate file with IE hacks only.
Backslash hack for IE 5.x broken box model
A combination of width and padding on the same element is very well known to produce broken layouts in IE 5.x. Box model hack is widely used and can be stripped down to a few lines.

someselector {

    padding: 10px;

    width: 200px;

    w\idth: 180px;

    height: 200px;

    heigh\t: 180px;

}

This will give as an element which is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.
If floated and with margin, display: inline
Everything that is floated and has any margin larger than zero, should have additional rule display: inline;. Simple as that.
Overflow problems
Italic font style in any IE version will enlarge parent element horizontally. It’s usually just a few pixels, but it could be nasty and ugly few pixels. Simple solution is in the following rule:

someselector {

    overflow-x: hidden;

}

I tend to apply that rule to every major column in a layout, especially in the period right after site launch. For the first week or two, when the large amounts of content are added and removed day and night by the site’s editors, it’s better to prevent content slips out of it’s boxes. A small digression—editors are sometimes inexperienced, but it’s not their job to know every HTML element and that’s why adequate support in their few first attempts is essential. There’s no worst for the guy who manage the content on his company’s brand new, ultra-modern and expensive web site, than the massive layout breakage when the site is still fresh and under the eyes of CEO. It’s our responsibility to keep his confidence intact.
Font size in tables in IE 5.x
Font rules set in html or body element are ignored in tables in case of IE 5.x. Again, simple addition will take care of it.

body {

    font-size: 62.5%;

}

table {

    font-size: 1em;

}

Later in a process, you can change rules according to a particular table’s needs.

A CSS hacking is basically about exploiting one browser bug to solve another. Now a new browser comes out that solves the exploited bugs, but not the other and people start advocating hacking to be stopped. It’s not that simple. Hacks are wrong (forget what I said in Implement CSS 2.1. The reason they are is that using them might prevent further enhancements to a specification. Something that’s invalid now might be a feature in the future.

Arriving at this point in my little rant I realize that the only point in not updating your site to exclude CSS hacks is that the intentention is probably wrong. Let me explain. Updating for Internet Explorer 7 should not be necessary, in theory it fixed its CSS bugs and besides that _height:1% is now ignored, it also supports your nice method of float clearing using generated content. Except that it doesn’t. And there is the real problem. The day a comment before the DOCTYPE no longer triggers quirks mode I certainly hope they fixed all those nasty little buggers.

The one cardinal rule that all search engines insist on is that your Web site be primarily designed for humans and not search engines. The easiest way to do this is to bring your site into W3C (World Wide Web Consortium) compliance.The W3C is the standards body that defines development standards for Web technoligies,and making your site W3C-compliuant will give you a bosst in the ranking with at least one of the search engines.There are many validation tools that you can use to find out how compliant(or non-compliant)your Website is. A basic “validator” for individual Web pages is available at http://validator.w3.org.

Bringing your site into W3C compliance is hard. The upside through , is that when used in combination with CSS(Cascading Style Sheet). You can get a much cleaner and better-performing site. In addition, from an SEO perspective, the actual content will move up higher in the page code and hence be treated as more valuable by the search engines.

From a pure SEO perspective, compliance is not the holy grail to climbing up the SERP. The objective behind attempting to become compliant is that it ensures that the copy is marked up so that it is “clear” to search engines. Achieving compliance also ensures better compatibility with mobile devices, with less chances of the code not working in mobile browsers. In any case, the point is to minimize errors rather than seek to achieve full compliance overnight.

Often, search engines donot crawl very deep into your site; you can remedy this by submitting your site and the deeper pages in your site directly. Also, create a site map based on the XML Site Map standard- which is supported by the Big three and others. There are many free tools that can quickly generate and XML site map of your site.Create a folder called “public_html”in the root folder of your Web site, put the site map XML file there, and submit the URL of the Xml file to the search engines. This way, the spider will crawl the entire site and index all the pages. One added benefit is that when your site does come up as the first result in SERPs it will automatically show the internal links under the main result heading, making it easies for users to quickly reach your internal pages faster.