A lot of developers nowadays rarely take the time to structure UI. With advent of technologies like CSS, image-editing tools and WYSIWYG HTML Editors, developers favor productivity rather than structure of UI. Also, a lot of hype has been focused on improving the middle tier. Now hear me first, there's nothing wrong with putting most of your of effort there in fact it should be one of the priority. But it wouldn't hurt for you to take some time not to only make your UI look good but also structured. Why bother? Well, two words: Performance and Maintainability. In a web application, the usual elements in UI are styles, images and the page itself. I'll be discussing such scenario.
CSS
The creation of Cascading Style Sheet has opened a lot of areas for developers. One of them is the ability to centralize styles. So manageability and control was taken a step further. However, most developers have taken this another step further. Most developers tends "dump" everything in centralize style sheet. And make it worst by making this "centralized" style sheet linked to every page of the application. Why is this bad? First, your style sheet will now lose its structure since all of the styles from different pages are located in one single file. Second, if this style sheet is linked to a page that does not need all of the styles, it will be a burden. Solution? Organize and Localize. Prepare how to implement your styles. I always look at implementing style in a hierarchical manner. I will start by indentifying which styles are needed be centralize and which are not. Use the style tag and inline attribute to 'localize' the style. If a CSS class will only be use on a particular page, pin it there. Also, splitting your style sheets logically is a good idea. For example, if your application consists of several modules, then creating a separate for each will be a good idea. If a particular class targets only specific tag, then declare it on the style sheet (e.g. TD.myclass). This will make your intention for the class clearer.
Images
Photoshop married Dreamweaver long time ago. They're like page-popping machine! Draw your image in Photoshop, slice it, and toss it to Dreamweaver then voila! You now have an instant page. But what's wrong with this picture? No time to optimize the page and the images. I will take the page later, let's start with the image first. Slice wisely. Take time to determine which of these images can be tiled, which one can be replaced by a background color or can be substituted by styles. Solid colors can be obviously replaced by background colors. Gradients can be tiled. Strokes can be implemented using CSS. Doing this will make your page clean and breathing. Also, take some time to choose between image formats. Compare file size for each image format and you'll save some valuable performance.
Page
I understand why a lot of people are frustrated when using tables. That's because they don't know how to use it properly. I know that there much has been drive to promote DIV tag and I'm not against it. But for complicated design I still run to tables. Table gives me the control that I need to tame page elements. I always see table as the basic unit of a page. Nest tables. That's where its power resides. Nest but not complicate. Avoid too much use of colspan and rowspan by nesting tables. These attributes are the usual cause for page layout to break. It also makes page harder to maintain and troubleshoot.
All in all making a structured UI is relatively easy. Following some steps will benefit your application performance and reward you manageability.
After a few weeks of planning, I finally got the chance to put up my own technical blog. I have a very rough schedule lately since I have just started my new job here in one of the companies in SBMA. I am working as a Project Lead for Revacomm, a Hawaii-based IT company that specializes in web development for SME's and Large Enterprise. Currently, we use several technologies to deliver these products. We have LAMP (Linux, Apache, MySQL, PHP / Perl) as our primary platform for our products. This is a very cost –effective platform for SME’s. We also have Microsoft technologies like ASP / COM and Microsoft .NET. Right now, I am not handling any Microsoft Technology based project. Product customization is one of our areas. Open-source products like Mambo CMS (Content Management System) and, OSCommerce Shopping Cart are customized to fit customer’s needs. This will be fully-integrated to their website. These products are well-modularized so integration can be clean, though not necessarily be easy. These products are highly scalable when it comes to performance. Also, they come under the open-source bandwagon so the tag price is off.
I intend to direct my blog on high-level aspect of web development rather delving into the nuts-and-bolts of it. I have two reasons for this: First, my job calls for it. As a Project Lead I should try to avoid going in details when it comes to development. I believe that Project Lead needs to be concerned on decisions rather then development itself. Though technical knowhow is a must, deciding how to approach things, looking for methodologies and directing developers in coherent methods is much more important to me. This should not be true in all cases though. QC for example, which is also part of my job, requires attention in details. But since technical knowhow is a must, this should not be a big issue. Second, I am a Microsoft developer by heart. If I will go to that level of details, I would love to do it the Microsoft way. They have provided developers with an easy, stable and robust framework that’s why it’s very inviting.
So that would be my first draw. I am targeting a 4-5 technical blogs a month (hey, easy on me. I have a job and another blog). I hope I can keep that up. Thanks and stay safe everyone!