Archive for the ‘CSS’ Category
published by Dan in CSS
- Use table tags for tabular data and not layout - Tables do not mix well with CSS and do not always render correctly in some browsers. The problem with this is that it is harder to implement advanced CSS layouts. Because of this even though it is the best practice to stick to CSS and avoid table tags you can still opt to use table tags if the project is on a tight schedule.
- Group selectors that have the same CSS declarations - Instead of declaring each selector one at a time group them together. This will result in a cleaner code.
- Use EM for font sizes - This should be done only if you won’t be using relative font sizes. If you are wondering why you shouldn’t use pixels instead especially since it is the more common choice of web designers the reason is that it is less accessible that EM due to that fact that IE does not resize pixels.
- Avoid using Inline styles - I will discuss this in further depth on my next post. For now let’s just say that external style heets are better and also easier to use.
published by Dan in CSS
- Use XHTML - If you are not too familiar with XHTML you can stick to HTML, however, note that by using XHTML you will be ensuring that the website code will not be outdated when HTML is finally phased out. Furthermore using XHTML will allow XML devices to read the code, which is of course a good thing.
- Define general rules and main classes at the top of the stylesheet - This will help you during coding since it will be much easier for you to make any changes. By inserting general rules and/or main classes anywhere you wish to it will make it harder for you to find the information when you need it.
- Use the correct selector type - Make sure you know which selector (elements, ids, or classes) should be used. If you don’t choose the one that’s best for the line(s) of code you are generating you may still come up with the same end result but you will end up with a more complex code and larger CSS file. To choose which selector to use keep in mind that while classes can be used on any kind of HTML element you should use the body <body>, paragraphs <p> and heading <h1> elements to define general rules. Furthermore use ids to style only major portions of the web page.
to be continued…
published by Dan in CSS
More and more web designers are using CSS in web design. It is important that when designing a website using CSS the web designer stick to best practices to ensure that you get a clean results and a manageable website. Some of the best practices for CSS include:
- Separate content from presentation - By separating the content from the presentation part you will free yourself (the web designer) from having to deal with the content portion. It also results in great in ease in terms of updating and the site’s contents since it can be done per page/section without affecting the other parts of the website.
- Commenting on your stylesheet - We all know how hard it can be to decipher someone’s code. Make it easy for whoever it is you are working with and for yourself as well to review your code and to find any information or command you might need by placing appropriate comments in your stylesheet. You can place comments to help you remember details about your last update, to aid in the organisation of the code, to clarify a bit of code or an approach you took so that another developer will easily understand what you have done, etc.
- Use DOCTYPE - Common DOCTYPES include HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict and XHTML 1.0 Transitional. Though this is not a must, using a DOCTYPE is essential if you wish to validate your HTML. Since we know that validating your code is a best practice (not just for CSS) then you should use a DOCTYPE.
to be continued…
published by Dan in CSS | Tools & Resources | Web Development | Website Design
When you’re offering web design services, it’s not uncommon to have similar design specifications even from different clients. Although ultimately the content will be different and there may be special cases for each client, it is important to note that for most of your web design work, you’re actually repeating design elements. This is where CSS frameworks come in. CSS frameworks, much like an application or development code framework, serves as a basis for your design implementations that share fairly common and core elements. For example, the header, the sidebar, navigation lists, and footer. CSS frameworks gets you started rather easily so that you can quickly prototype your project, spend less time on design parts that are usually repeated, and focus on those special cases where the clients have a particular preference. There are many resources that you can find about CSS frameworks: Blueprint was one of the first css frameworks. Tripoli is another one. In fact a simple Google search for CSS frameworks will give you results on different frameworks and articles about them.
CSS framework really simplifies your work flow but it shouldn’t be seen as a crutch for the lack of a solid CSS knowledge. Frameworks must be understood fully and used properly or else, when used improperly, it will bite back when your design gets messed up and you’re left wondering why. Use CSS frameworks when your design specification fits with what the framework offers. If used right, CSS frameworks is a big help to get you started with your web design project.
published by Dan in CSS | Tools & Resources | Web 2.0 | Web Technology
With all these iPhone news and media coverage in the past week, let’s take a little time to focus on how this will affect mobile web design, both in the short term and in the long term. iPhone brings to the table what could probably be one of the most advanced Internet browser for mobile devices: iPhone Safari. Although it lacks support for java and flash, Safari brings the desktop experience of browsing the Internet to a mobile device.
The basic premise of how iPhone safari works is that you can view a web site on its entirety without rearranging their content. This way the website as the designer has visualized it, is preserved. To move around the page, you can use Safari’s built-in zooming and panning actions using finger gestures and taps. What this means at the very least is that using Safari for iPhone, you wouldn’t have to worry that your design would be messed up when the the user sees it. Safari also has a strong support for AJAX technologies. This makes it a very able platform to deploy web applications. In fact as of now, this is the only way to deploy “applications” through iPhone. All these advanced features are all good news for the web designers, first because a mobile device browser that has strong standards support is now available for a mobile device, and second, in the long term perspective, safari will be raising the bar for mobile device browsers.
Even if apple only reaches (and not surpass) its goal of capturing 1% of the market share for smart phones, they would have then created a pressure for other mobile device software companies to come up with a competitive browser. And web designers will no longer be limited in creating user experiences that are as enjoyable in the mobile context as they are in the desktop.
published by Dan in CSS | Web General | Web Technology
Allow me to pause my on-going blog series on mobile web design and focus for the mean time on one mobile product news: Opera Mini 4.0 beta is out.
Opera Mini 4.0 beta is a preview release of one of the best browsers for mobile devices. Just like it’s early predecessors, it’s a java-based mobile application so it’s widely available on many mobile devices.
One of the cool things about Opera Mini is that it borrows from the long history of experience of the Opera team in creating and delivering a capable mobile browser, and the feature list of the opera mini surely contains some tidbits for the web designers out there who are thinking of developing for mobile web (and honestly, every good designer should consider that). In fact A list a part has a comprehensive article discussing mobile web design with special focus on the opera platform.
Along with other notable features (more on this later), Opera promises better support for CSS. This is good news for web designers. I have yet to test how well this feature pans out, but I’m really hoping for better CSS support in mobile web browsers. Opera Mini 4.0 offers a slew of features that seems to be a common trend among new mobile web browsers: zooming technologies that makes browsing the “real internet” easier and more convenient for the users. To learn more about other new things about opera mini 4.0 beta, you can visit their feature list page.
published by Dan in CSS | Tools & Resources | Web Technology | Website Design | Website Standards
ONLOAD
In the onload function, we need to apply the user’s style sheet of choice either from the cookie when it exists or just use the preferred style sheet when the cookie has not yet been created.
We therefore need to implement a getPreferred StyleSheet function to return the title of a preferred style sheet. It does this by finding the style sheet with a title but whose rel attribute is not “alt”.
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
Since the value of the title attribute of the style sheet that will be used for the document can either come from the cookie or from the preferred style sheet returned by the getPreferredStyleSheet function, we first need a title variable in our onload function.
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
ONUNLOAD
It is in the onunload function where we need to save the cookie. This can be easily done by calling the getActiveStyleSheet() function and saving the returned value to a cookie.
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
I have just finished showing the building blocks of a cross-platform style sheet switching mechanism. Now all you have to is to include the javascript methods in your document. You can put it an a single external javascript file and add it to your document using the script element:
<script type="text/javascript"
src="/scripts/cssswitcher.js"></script>
published by Dan in CSS | Tools & Resources | Web Technology | Website Design | Website Standards
Last time I explained how the javascript that we can use to change the stylesheet. What we need to do next is to make the user’s choice persistent all across the website, which means, it should be applied to all other documents, and the way to do this is to make use of cookies.
We need create a function that will return the current stylesheet and functions for reading and storing the cookie.
The first function can be implemented by looping through all the link elements, then three checks: check if the link is a stylesheet, check if it’s a preferred or an alternate style sheet and lastly check if the style sheet is active. Then we return the title if all the three checks are satisfied.
This is the function:
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
then we create the function createCookie and readCookie to store and read cookies, respectively.
The functions for the cookies can be implemented as:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
and
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
To finish, we will need to add event listeners (onload and onunload) to the window. This will be discussed next.
published by Dan in CSS
In the previous post i tried to setup the knowledge foundation in creating dynamically switching style sheets. I discussed the three different relationships that external style sheets have to your document: persistent, preferred and alternate.
So how does the style sheet switching mechanism work? When a web document is initially loaded, the persistent and preferred style sheets are applied to the document. Alternate style sheets can be selected by the user to change the formatting of the page. According to the W3C, this style sheet switching should be done through the browser, through a browser feature. While Mozilla (Firefox and Semonkey) and Opera browsers provide this feature, Internet Explorer unfortunately does not. So we end up with alternate style sheets but no way of accessing them through Internet Explorer.
With Javascript along with the DOM, we can create a script to provide a cross-platform way for users to select the style sheet that they want to use. In order not to break the style switcher feature of Mozilla browsers, we should use the link tags according to the rules of the W3C. Then we can use cookies to store the users’ style sheet preference. This way, the choice is reflected in the whole site and not just in one page.
Now that I have explained the background of style sheet switching, I will discuss next how to implement the actual Javascript.
published by Dan in CSS
Using CSS to control what your website looks like is the first step towards a good website design. To give more options to your users, you may implement way to dynamically switch between different style sheets.As you know, external stylesheets can be associated with documents using a list of link elements in the head. Three different relationships exist between your document and external stylesheets: persistent, preferred, and alternate.
Persistent
Persistent stylesheets are enabled and are combined with the current active stylesheet of the document. Persistent stylesheets can be used to apply a fixed and common style to all stylesheets. To make a style sheet persistent, set the rel attribute to “style sheet” and don’t set the title attribute
Example:
<link rel="stylesheet"
type="text/css" href="example.css" />
Preferred
Preferred style sheets are enabled when the document is first loaded. They can be disabled if the users selects an alternate style sheet. To make a style sheet preferred, set the rel attribute to “style sheet” and name the style sheet with the title attribute.
Example:
<link rel="stylesheet"
type="text/css" href="example.css"
title="Default_Style" />
You can also group multiple style sheets by naming them using the same title attribute. If more than one type of preferred style sheet is specified, the type declared first takes precedence.
Alternate
Alternate style sheets are not enabled by default but they can be selected by the user as alternatives to the preferred style sheet. To specify an alternate style sheet, set the rel attribute to “alternate stylesheet” and name the style sheet with the title attribute.
Example:
<link rel="alternate stylesheet"
type="text/css" href="example.css"
title="alternate_style" />
Next post I will continue with ways of implementing the style sheet switching mechanism.
0845 838 7448 
