By Chris Olberding
Thursday, October 30, 2008
|
Recently I was asked by a university student studying web design if they could interview me as part of a class project. I agreed, however I was too busy for a phone interview so I ended up responding in length to a set of questions in writing. I believe a much of what I wrote would be applicable to all design students interested in web design so I'm posting my interview here.
More...
By Chris Olberding
Wednesday, December 12, 2007
|
Over the years I’ve come to adopt many practices while working with xhtml/css and I thought it might be of use to others to document some of them and of use to me to open things up for dicussion. Some of these deserve their own post (one day!), some may be blindingly obvious to the initiated while others may make you scratch your head if you dont work with a certain framework (see “CSS and ASP.net”). Please, add any of your practices to the list. Cheers.
CSS Frameworks vs. CSS Resets
While there is a huge debate as to the value of CSS frameworks such as Blueprint and Yaml there does seem to be a good deal of agreement that CSS resets such as Yahoo’s or Eric Meyer’s Reset Reloaded () are of value.
Switching to a framework myself for a few projects did cause some growing pains but likely saved some time in styling forms and some basic typography, and it provided a print style sheet that was adequate. Regardless, over time I’ve ended up significantly modifying all of them to suit my needs.
I wouldn’t recommend frameworks for new developers as it may gloss over some issues that you should know your way around, or even experienced developers as you’re probably better off writing your own set of base rules to modify on a per project basis. However, I do believe there is a group somewhere between the two that would find great utility and I applaud the idea behind frameworks despite doubting the likely ultimate outcome. However my workflow does not require a grid module within the browser (use them during design) so that functionality seen in most frameworks may be of use to others depending on how they work.
Some of the principle discussions come from Gary Barber, Johnathan Christopher and Jeff Croft
Organization vs. Speed
The proper architecture of CSS is a much discussed subject that I do not believe has been as properly and passionately debated as I believe maybe it should. The neat-freak in us desires parcelized stylesheets, imported into a master stylesheet directly linked from the html file. Whereas the speed-freak knows that site performance is negatively effected by each http requested by a page. At the same time CSS optimizers abound to cut our 5k stylesheets into 3k stylesheets by removing whitespace and comments.
What is lacking is a tool to easily and automatically process ‘development CSS’ to ‘production CSS’. I don’t savor the idea of working on one single, uncommented CSS but I also don’t want to have to merge 10 stylesheets into one and then run that through a CSS optimizer when I just need to make a minor change. It would be interesting to develop an application to ‘compile’ your CSS server side.
CSS and ASP.Net
Though a more complete treatment is forthcoming I will make a few notes now.
I moved to the asp.net platform about a year ago because I got a job at a web development firm that used the framework exclusively. I don’t have a background in web development, I can muddle through with some limited SQL and C# skills but I’m not about to put together a multi-tiered e-commerce site myself anytime soon. However from a designer/coder standpoint, the flexibility and reduction in redundant code in using a combinations of master pages (uber-templates), themes, and user-controls (uber-server-side-includes) is awesome. As noted, this is a large subject unto itself and will be addressed at a later date but I am open to comment from others on the platform.
Body Tag
Many developers have advocated the use of adding classes to the body tag to allow for easy targeting of different subpages and subsections. This looks great and I wish I had thought of this before I started working in asp.net however given the ability to accomplish the same thing and more without mucking up our client-side code using the body tag to differentiate sections of a site is somewhat obviated for my purposed but pretty smart if you’re not using a development platform such as asp.net.
Microformats
They're a good idea in theory, and if you’re bored and want to ‘do more’ for a site go ahead and use them but if we’re talking about paid work, I’d adopt a wait and see approach to see if microformats evolve beyond the geek-club of web designers.
Abstracting Constructs
This topic is something that I’ve not seen really explored in the wild, nor is it something I've completely fleshed out. However I’ve gotten frustrated with creating CSS constructs such as a certain type of navigation menu or expanding box from scratch over and over again. I’d like to take the concept of functions or methods from traditional programming and abstract out some concepts so that you could “call a CSS function” by just adding a few lines of code specific to the menu such as button width/height, background URL, hover URL, etc which would overwrite the relavent styles and customize the abstracted contruct.
ID vs. Class
Very quick: IDs are unique sections or areas (i.e. <div id="”globalNavigation”">
) whereas classes can be assigned to many things and things can have many classes . In the previous example the div would have three completely separate classes assigned.
Firefox and the Vertical Scrollbar
A quick tip I have found useful is forcing Mozilla to always have veritcle scroll bars present even if the page doesn’t scroll. This is the default behavior in Internet Explorer. The reason for this is that if one page is pretty short and a vertical scroll bar doesn’t appear, when a user clicks on a link to a longer page the scroll bar will ‘pop-up’ and shift your site over to make room for it. This effect can make people who don’t understand what happened think you site is broken (I know I know, trust me on this).
Force the scrollbar to always be visible by adding "html { overflow: -moz-scrollbars-vertical !important; }" to your CSS, be warned that it wont validate.
Farewell
That’s all for now, let me know some of your ideas on writing CSS.
By Chris Olberding
Wednesday, December 12, 2007
|
Over the years I’ve come to adopt many practices while working with xhtml/css and I thought it might be of use to others to document some of them and of use to me to open things up for dicussion. Some of these deserve their own post (one day!), some may be blindingly obvious to the initiated while others may make you scratch your head if you dont work with a certain framework (see “CSS and ASP.net”). Please, add any of your practices to the list. Cheers.
CSS Frameworks vs. CSS Resets
While there is a huge debate as to the value of CSS frameworks such as Blueprint and Yaml there does seem to be a good deal of agreement that CSS resets such as Yahoo’s or Eric Meyer’s Reset Reloaded () are of value.
Switching to a framework myself for a few projects did cause some growing pains but likely saved some time in styling forms and some basic typography, and it provided a print style sheet that was adequate. Regardless, over time I’ve ended up significantly modifying all of them to suit my needs.
I wouldn’t recommend frameworks for new developers as it may gloss over some issues that you should know your way around, or even experienced developers as you’re probably better off writing your own set of base rules to modify on a per project basis. However, I do believe there is a group somewhere between the two that would find great utility and I applaud the idea behind frameworks despite doubting the likely ultimate outcome. However my workflow does not require a grid module within the browser (use them during design) so that functionality seen in most frameworks may be of use to others depending on how they work.
Some of the principle discussions come from Gary Barber, Johnathan Christopher and Jeff Croft
Organization vs. Speed
The proper architecture of CSS is a much discussed subject that I do not believe has been as properly and passionately debated as I believe maybe it should. The neat-freak in us desires parcelized stylesheets, imported into a master stylesheet directly linked from the html file. Whereas the speed-freak knows that site performance is negatively effected by each http requested by a page. At the same time CSS optimizers abound to cut our 5k stylesheets into 3k stylesheets by removing whitespace and comments.
What is lacking is a tool to easily and automatically process ‘development CSS’ to ‘production CSS’. I don’t savor the idea of working on one single, uncommented CSS but I also don’t want to have to merge 10 stylesheets into one and then run that through a CSS optimizer when I just need to make a minor change. It would be interesting to develop an application to ‘compile’ your CSS server side.
CSS and ASP.Net
Though a more complete treatment is forthcoming I will make a few notes now.
I moved to the asp.net platform about a year ago because I got a job at a web development firm that used the framework exclusively. I don’t have a background in web development, I can muddle through with some limited SQL and C# skills but I’m not about to put together a multi-tiered e-commerce site myself anytime soon. However from a designer/coder standpoint, the flexibility and reduction in redundant code in using a combinations of master pages (uber-templates), themes, and user-controls (uber-server-side-includes) is awesome. As noted, this is a large subject unto itself and will be addressed at a later date but I am open to comment from others on the platform.
Body Tag
Many developers have advocated the use of adding classes to the body tag to allow for easy targeting of different subpages and subsections. This looks great and I wish I had thought of this before I started working in asp.net however given the ability to accomplish the same thing and more without mucking up our client-side code using the body tag to differentiate sections of a site is somewhat obviated for my purposed but pretty smart if you’re not using a development platform such as asp.net.
Microformats
They're a good idea in theory, and if you’re bored and want to ‘do more’ for a site go ahead and use them but if we’re talking about paid work, I’d adopt a wait and see approach to see if microformats evolve beyond the geek-club of web designers.
Abstracting Constructs
This topic is something that I’ve not seen really explored in the wild, nor is it something I've completely fleshed out. However I’ve gotten frustrated with creating CSS constructs such as a certain type of navigation menu or expanding box from scratch over and over again. I’d like to take the concept of functions or methods from traditional programming and abstract out some concepts so that you could “call a CSS function” by just adding a few lines of code specific to the menu such as button width/height, background URL, hover URL, etc which would overwrite the relavent styles and customize the abstracted contruct.
ID vs. Class
Very quick: IDs are unique sections or areas (i.e. <div id="”globalNavigation”">
) whereas classes can be assigned to many things and things can have many classes . In the previous example the div would have three completely separate classes assigned.
Firefox and the Vertical Scrollbar
A quick tip I have found useful is forcing Mozilla to always have veritcle scroll bars present even if the page doesn’t scroll. This is the default behavior in Internet Explorer. The reason for this is that if one page is pretty short and a vertical scroll bar doesn’t appear, when a user clicks on a link to a longer page the scroll bar will ‘pop-up’ and shift your site over to make room for it. This effect can make people who don’t understand what happened think you site is broken (I know I know, trust me on this).
Force the scrollbar to always be visible by adding "html { overflow: -moz-scrollbars-vertical !important; }" to your CSS, be warned that it wont validate.
Farewell
That’s all for now, let me know some of your ideas on writing CSS.
By Chris Olberding
Wednesday, December 05, 2007
|
As is often the case, the task of creating or redesigning a website is broken into logical tasks and distributed among a team comprised of people coming from very different backgrounds and possessing very different skillsets. In this article we examine some of the issues and considerations that can help and hinder collaboration between the designer and the developer.
In this article we are examining what designers can do to make life easier for both themselves and the people they hand their mockups over to?
The Web Designer to CSS Coder Handoff
Communication
As will be apparent throughout this article, communication is at the root of most problems and also of most solutions.
Grid / Alignment
I recommend designers work with grids and designing layouts to pixel perfection and making sure that column widths are consistent and thought out before pushed into production; it is unrealistic for the coded to go back and recalculate widths and heights and make the needed alterations to the design after the fact. There are methods for addressing browser incompatibilities and competent coders should be able to ensure your design displays consistently between browsers. There are a lot of good resources for using the grid in web design.
Organization
Make sure to organize your Photoshop layers. It’s best to do as you go but not everyone can get into this habit (author included). The bottom line is if anyone might need to open your .psd for any reason in the present or future the saved file should be organized. This practice is crucial if you’re handing off your .psd to someone else to slice but is a good practice for maintaining source files you can include on source disks for the client at the project’s competition.
Fonts
Make sure to communicate on the appropriate use of non-standard fonts. Depending on your emphasis on accessibility, search engine optimization, and familiarity with image replacement techniques you will have different approaches to when it’s acceptable to use a non-standard font. Regardless, your organizations philosophy on the subject should be in the open.
Gradients
Some types of gradients designers seems to use can be problematic and result in the need for overly complicated solutions in the code. One example is when you have a graduate going say left to right overlaying or masking another graduate going up and down. Though you can use png transparency or in some circumstances large images to accomplish the effect, the effort is usually not worth it and often results in extra, non-semantic code.
Expertise and Project Cost
Just because it’s possible to pretty much accomplish anything you can think of using CSS doesn’t mean that you or your coder can. Understand the level of expertise of your coder and also understand that highly intricate and complex CSS can be time consuming, keep an eye on your schedule and budget when designing.
Design for Web
The last point is the most important; know your medium! Web is not print and it is crucial to understand the medium and what makes it unique. Keep in mind the following points that many designers struggle with:
- Just because your 900x800 canvas in Photoshop has definite borders doesn’t mean you don’t have to think about what lays beyond them. Think through what would happen if you were to expand your canvas to 1100x1000, and always design the footer of the site.
- The home page isn’t the web site. A web design doesn’t consist of an amazing home page graphic. If the sub-page layouts haven’t been designed prior to working on the design make sure to take them into account in your designs.
- The design should serve the message. Make sure you understand what information and content will be on the site before boxing people down the line into a corner.
By Chris Olberding
Wednesday, December 05, 2007
|
As is often the case, the task of creating or redesigning a website is broken into logical tasks and distributed among a team comprised of people coming from very different backgrounds and possessing very different skillsets. In this article we examine some of the issues and considerations that can help and hinder collaboration between the designer and the developer.
In this article we are examining what designers can do to make life easier for both themselves and the people they hand their mockups over to?
The Web Designer to CSS Coder Handoff
Communication
As will be apparent throughout this article, communication is at the root of most problems and also of most solutions.
Grid / Alignment
I recommend designers work with grids and designing layouts to pixel perfection and making sure that column widths are consistent and thought out before pushed into production; it is unrealistic for the coded to go back and recalculate widths and heights and make the needed alterations to the design after the fact. There are methods for addressing browser incompatibilities and competent coders should be able to ensure your design displays consistently between browsers. There are a lot of good resources for using the grid in web design.
Organization
Make sure to organize your Photoshop layers. It’s best to do as you go but not everyone can get into this habit (author included). The bottom line is if anyone might need to open your .psd for any reason in the present or future the saved file should be organized. This practice is crucial if you’re handing off your .psd to someone else to slice but is a good practice for maintaining source files you can include on source disks for the client at the project’s competition.
Fonts
Make sure to communicate on the appropriate use of non-standard fonts. Depending on your emphasis on accessibility, search engine optimization, and familiarity with image replacement techniques you will have different approaches to when it’s acceptable to use a non-standard font. Regardless, your organizations philosophy on the subject should be in the open.
Gradients
Some types of gradients designers seems to use can be problematic and result in the need for overly complicated solutions in the code. One example is when you have a graduate going say left to right overlaying or masking another graduate going up and down. Though you can use png transparency or in some circumstances large images to accomplish the effect, the effort is usually not worth it and often results in extra, non-semantic code.
Expertise and Project Cost
Just because it’s possible to pretty much accomplish anything you can think of using CSS doesn’t mean that you or your coder can. Understand the level of expertise of your coder and also understand that highly intricate and complex CSS can be time consuming, keep an eye on your schedule and budget when designing.
Design for Web
The last point is the most important; know your medium! Web is not print and it is crucial to understand the medium and what makes it unique. Keep in mind the following points that many designers struggle with:
- Just because your 900x800 canvas in Photoshop has definite borders doesn’t mean you don’t have to think about what lays beyond them. Think through what would happen if you were to expand your canvas to 1100x1000, and always design the footer of the site.
- The home page isn’t the web site. A web design doesn’t consist of an amazing home page graphic. If the sub-page layouts haven’t been designed prior to working on the design make sure to take them into account in your designs.
- The design should serve the message. Make sure you understand what information and content will be on the site before boxing people down the line into a corner.