I'm about to begin working on a web page with a complex table-based layout (coded years ago).
One of the things I'd like to do is convert the layout to a proper CSS layout with divs and spans.
Can you suggest a good approach for tackling problems like this? Should I use a CSS framework like Blueprint? Just get in there and hack on it until it looks right? I already make heavy use of Firebug and the IE Developer Toolbar.
There generally isn't a silver bullet in converting between table and CSS. Every site is different and has different requirements. The only real answer is: simply start the markup from scratch.
The best advice is to write the markup entirely first. Make sure the markup is accurate, semantic, and represents your data entirely. Do not write the stylesheet... yet. After the markup is done, create the CSS. This way you have semantic markup and CSS is purely controlling the presentation.
CSS frameworks often don't advocate this approach to semantic markup because they force you to add additional tags to comply with their approach. Consequently, CSS frameworks are sometimes more trouble than its worth.
Do the markup, then the CSS.
Before you start, ensure you are using a CSS reset. Eric Meyer and Yahoo YUI are both excellent. This will help to make all your browsers look the same.
Also, install the HTML validator too. This will ensure your HTML is looking good and ready for adding the CSS.
Then grab a copy of Firebug and install it in firefox. This is excellent for seeing which CSS rules are doing what. You can disable individual rules by clicking s cross by each rule.
Now, visit some web pages which validate correctly and see what rules they have used in their style sheets.
Web sites to try are www.alistapart.com, CSS Zen Garden, SimpleBits etc.
The converting process will be a painful headache! I suggest you to start a whole redesign.
I don't know is this can be of any help, I build CSS Framework called Emastic (supports fluid and fixed columns) and you can simulate tables if you want here is the example Emastic Table
I second the commenters who say you should re-design the whole thing from scratch. Clean up the HTML and then make the CSS.
I'd like to add a reason to do so. Usually table-based designs are at least a few years old and therefore look quite passe. Take advantage of this opportunity to improve the design. Either a slight refresh or a complete overhaul depending on your taste and needs.
Iterative way works as well. Start with small blocks, converting them to CSS. This should simplify your table structure, hopefully leaving only the "basic grid" in tables and all the rest in CSS.
From there, pick an existing, tested solution if it's a simple layout (for 1 to 3 columns, there are tons of tested solutions out there). If it's more complex, go with Blueprint.
I wouldn't use a framework. Learning a new framework is only useful if you use it over & over again. Each framework has its own bugs and weaknesses. Use
display: table-cell;
to make a column. These will line up like float: left;. See http://quirksmode.org/css/css2/display.html
In some cases, using regular expressions could speed up your process.
For instance, something like this:
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
would match the start of a table and provide the contents of the first cell in $1 for a replace:
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
Of course you'd need to customize to match your particular use case. If you have a number of similar pages, you might try hand coding one first and then using something like this to make converting the others simpler.
Another approach would be to use something like this jQuery plugin: https://github.com/ryandoom/jquery-plugin-table-to-div
It is intended to modify following rendering, but could be used during development to take a given table and provide a simple DIV based form of it.
Related
I have been using the P tag for each html form filed element row but in twitter and facebook they use table for designing a form and linkedin uses ol tags for each html field rows. Ebay uses div tags.
Please suggest a best practices to develop an html form.
Whatever technique you use, make sure you are 100% compliant with a tool like this.
There is no best practice on this issue. Just use whatever feels more convenient for your current page layout.
A good table-less result is a little hard to obtain (you need to know very well how positioning works, and there are several issues concerning different browsers implementations), but the code results more comprehensible and more maintainable. Moreover DOM manipulation is faster (there are tons of things to say about it... :) ).
Table layout is easier to obtain and it's a more "natural" way to imagine columns, rows and stuff inside them.
By the way, concerning a simple structure like a form, it really doesn't matter what kind of technique you use!
There is a huge debate / gap in opinion on this subject, whether to use tables or not? And to be frank the arguments on both sides here are compelling however the decision firmly rests with the designer / developer.
If you use Tables then you know that as far as positioning is concerned you can control your for elements easily and indeed apply CSS to the tables if you want them to look awesome.
If you use CSS the feeling is your more likely to have better validated code and be 'Future Proof' and again styling can be picked up from centralised styles such as fonts etc for your P tags.
Personally I make the decision based on a few elements...
Does CSS offer me the control I want for my form in this sites context?
Can I ensure that my CSS (if used) is cross browser compatible?
3 Do I care? Tables have been around for years so why not use them!?
Do I have a specific brief asking for table-less design?
See this article it may help Iron Spider - Tables vs CSS
Sorry not to be more specific and good luck!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
Given an HTML page that has a complex table-based layout and many tags that are duplicated and wasteful, e.g.:
td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.
Are there tools to aide the task of refactoring the page into a more compact form? For instance, a tool that automatically generates CSS styles and selectors? That converts tables into div layouts?
Just to give a sense of the order of the problem, the page I'm looking at is >8000 lines of HTML and JavaScript, which is 500Kb not counting images!
Update: In re. "give up and start from scratch" comments. What does that mean, in the real world? Print out the page, scan it, set it as the background image in Dreamweaver, and start with that? Seriously? Would that really be more efficient than refactoring?
Update: I'm not denigrating "trace it from scratch" nor did I mean to imply that Dreamweaver is by any means my tool of choice. I'm just very surprised that refactoring a layout is considered to be an intractable problem.
I agree with TimB in that automated tools are going to have trouble doing this, in particular making the relational jumps to combine and abstract CSS in the most efficient way.
If you are presenting tabular data, it may be reasonable to attempt to refactor the inline CSS to reusable classes.
If you have a lot of similar tables with inline styles you can gradually refactor the CSS by simple search and replace.
This will give you lots of classes that match a subset of similar tables and lots of somewhat similar classes.
Breaking this up into layout and presentation would be a good start, then overriding these with specific classes for each theme or semantically related item.
I would still recommend starting from scratch, it's probably going to be quicker, and you can recreate only what you need to present the page, and can reuse elements or collections of elements at a later date.
The time spent will also pay off significantly if the page is ever needed to be modified again.
But that's not at all likely is it? :D
I'm not aware of specific tools, only the generic ones of caffeine and Firebug, which anyone doing CSS work should be aware of.
I think that the problem is sufficiently hard that automated tools would struggle to produce good, maintainable markup and CSS.
It seems as if you are looking for more automated means of re-factoring an old table-based layout to CSS standards. However, I agree with some of the other comments to "start from scratch".
What this means to you is that you should try to rebuild (using CSS) the look that was achieved using an HTML table. If this concept escapes you, then I would suggest Googling for some beginner CSS tutorials, maybe even some focusing on teaching the concept of Table->CSS layouts..
Another tool to consider (that could possibly aid you even further) would be some sort of CSS "framework". I recommend Blueprint CSS for this, as it helps in the creation of grid/table-like layouts with minimal effort. Another good one is Yet-Another-Multicolumn-Layout, which has a really neat multi-column layout builder.
Don't just throw it in dreamweaver or whatever tool of choice and slice it up. Write the HTML first, in purely semantic style. eg, a very common layout would end up being:
<body>
<div id="header">
<img id="logo"/>
<h1 id="title">
My Site
</h1>
<div id="subtitle">Playing with css</div>
</div>
<div id="content">
<h2>Page 1</h2>
<p>Blah blah blah..</p>
</div>
<div id="menu">
<ul>
<li><a>Some link</a></li>
...
</ul>
</div>
</body>
Do the HTML in a way that makes sense with your content. It should be usable if you have no CSS at all. After that, add in the CSS to make it look the way you want. With the state of browsers/CSS now, you still probably have to add some decorators to the HTML - eg, wrap some things in extra divs, just to be able to get the content the way you want.
Once you're done though, you'll have a very flexible layout that can be modified easily with CSS, and you'll have a page that is accessible, to both disabled people and search engines.
It does take quite a bit of learning before you get the knack of it, but it is worthwhile. Resist the temptation to give up and go back to table based layouts, and just work your way through. Everything can be done with semantic HTML and CSS.
You denigrate this approach in your question, but I'd recommend taking a screen shot of your page in the browser whose rendering you like the best, declare that to be your reference, and start trying to recreate it. It's easier than you think. I've had to take skanky old table-based layouts and turn them into CMS templates done with modern techniques and it's not that bad a job.
I am tackling a similar problem at the moment, not quite as messy as what this sounds, but the product of really bad asp.net web forms, overblown view state, and deeply nested server controls that format search results from a database. Resulting in ~300 - 400K of markup for 50 DB rows - yeek.
I have not found any automated tools that will do a half way reasonable job of refactoring it.
Starting with a tool like visual studio that you can use to reformat the code to a consistent manner helps. You can then use combinations of regexs and rectangular selecting to start weeding out the junk, and stripping back the redundant markup, to start to sort out what is important and what is not, and then start defining, by hand, an efficient pattern to present the information.
The trick is to break into manageable chunks, and build it up from there.
If you have a lot of actual "tabular data" to format, and is only a once off, I have found excel to be my saviour on a few occasions, paste the data into a sheet, and then use a combination of concatenate and fill to generate the markup for the tabular data.
Starting from scratch means going back to the design drawing board. If you need to refactor such a monstrosity, then for all the time you will spend making it better, you might as well have done a full redesign.
If you want to get away from duplicated and wasteful tags, you need to escape Dreamewaver. A good text editor (jedit, emacs, vim, eclipse, etc.) is really all you need. If you customize your editor properly, you won't even miss Dreamweaver. (Emacs with nXhtml and yasnippets is my favorite.)
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.