Page 3 of 4

Posted: Fri Aug 17, 2007 6:37 am
by The Phoenix
swiftouch wrote:I guess my problem is the Mac designer, who doesn't have more than a 5.5 IE browser to test with because (that nasty M word) decided to stop supporting IE for mac a long time ago. 95% of my issues crop up in ie6, because people don't want to upgrade.
Oh now that just makes me angry. I'm in *love* with my macbook, especially since I have parallels, and can run any version of any OS I want in it. I can run Windows XP on my mac, and test against IE7, or run Safari native on OSX, or even use Konqueror under Fedora under Parallels.

Anyone using a mac has little excuse when it comes to testing. VMWare fusion is even available for free, I think.
swiftouch wrote:It's not like IE7 was ever easy and intuitive. I despise that browser for it's continual lack of features and add-ons and everyone else should who've had a taste of firefox. But then again, i know my mother hasn't upgraded from 6.0 to 7 specifically because I refuse to have to make her re-learn where everything moved to in the newer 7.0. I really have a problem with M. right now and better quit before I start thinking about breaking my laptop into little pieces.
I have many serious issues with Microsoft, but for better or worse, IE7 *was* an improvement over IE6. Built-in popup blocking for the majority browser? Yes please!

Thats not to say they fixed even close to half the rendering bugs, but considering they had done nothing for over five years, I was thrilled at the change to them doing something.
swiftouch wrote:My frustration grows out of lost time spent dinking around with pixels. Fluid design or not, when you have a heavy site graphically, anyone is going to have 3 dozen issues to deal with before you get the kinks worked out. Instead of a $500 dollar website costing $500 what you end up charging is more like $2-3k to deal with all these "inconsistencies."
I would encourage you to check out Dean Edward's IE7. It is additional size added to a page, but it eliminates a huge number of browser incompatibilities when dealing with IE. There are other similar scripts out there that offer really consistent rendering across standards-compliant browsers and IE. But notice these are suggested workarounds to a broken browser. I'm in complete agreement that IE makes life harder on designers.

Posted: Fri Aug 17, 2007 7:24 am
by superdezign
I'd like to thank matthijs for bringing up the use of purposeful markup instead of just spans and divs.

I'd also like to comment that the only "problem" with CSS is the learning curve. There is one, and it is a serious transition from tables to standards. You'll tend to still think in terms or tables, rows, and columns when you should be thinking in terms of layout and design. Most of us can write a basic markup that gives a header, navigation, content, and a footer, and display it as they please. At first, this is a daunting task, but after you get used to it, you'll see that CSS is your friend.

There are literally *TOO*MANY* resources online for CSS. Every question you could ever have about CSS has probably already been answered. We know the problems, and usually the solutions (or workarounds). You just need a fresh look on things and to get out of the mindset of tables. I hope you guys don't design pages using Dreamweaver. ;)

Posted: Fri Aug 17, 2007 7:47 am
by jason
superdezign wrote:I hope you guys don't design pages using Dreamweaver. ;)
Quick note: http://code.google.com/p/blueprintcss/ <-- Makes CSS-based designs easy. Easier than table based layouts, imo.

Anyways, I'm gonna disagree here. I HOPE people design their sites in software based around designing, especially something like Photoshop or Illustrator, before ever sitting code down. Designing in code means you are going to limit yourself to only what you know how to do.

Moreso to the point, why not use Dreamweaver? I use it on a daily basis. Makes development and design easy and quick. Allows me to manage updates to the site with a built in FTP system, and allows easy management for publishing to test sites first. Finally, it allows me to create standards compliant sites that are built around CSS.

Most people who suggest staying away from Dreamweaver don't realize how good it is for actually creating CSS based layouts. It really goes a long way to encourage you to creating those types of sites, and gives you a LOT of good tools for doing so. It's fun to laugh at Dreamweaver, but remember, it's not the tools that make a bad house, but the carpenter.

Posted: Fri Aug 17, 2007 8:01 am
by superdezign
jason wrote:Anyways, I'm gonna disagree here. I HOPE people design their sites in software based around designing, especially something like Photoshop or Illustrator, before ever sitting code down. Designing in code means you are going to limit yourself to only what you know how to do.
I never said THAT. I use a combination of Flash (because I'm comfortable with it) and Photoshop when designing.
jason wrote:Moreso to the point, why not use Dreamweaver? I use it on a daily basis. Makes development and design easy and quick. Allows me to manage updates to the site with a built in FTP system, and allows easy management for publishing to test sites first. Finally, it allows me to create standards compliant sites that are built around CSS.
I said using Dreamweaver for design. Dreamweaver works excellently for everything else (except templates... It was efficient for it's time, but re-uploading every file when you update it is a hassle) and speeds up the development process.
jason wrote:Most people who suggest staying away from Dreamweaver don't realize how good it is for actually creating CSS based layouts. It really goes a long way to encourage you to creating those types of sites, and gives you a LOT of good tools for doing so. It's fun to laugh at Dreamweaver, but remember, it's not the tools that make a bad house, but the carpenter.
I used Dreamweaver and other Adobe / Macromedia products for web development and am well aware of how much they help the process. But when you rely on Dreamweaver's WYSIWYG to create the design, you give up a lot of control, and for those who don't understand exactly how it's working, they give up the ability to learn on their own. If they do use it, then they are likely to have more trouble using proper CSS. Considering he implied that he moves elements pixel-by-pixel, this could easily be the case.

Posted: Fri Aug 17, 2007 8:23 am
by jason
superdezign wrote:I never said THAT. I use a combination of Flash (because I'm comfortable with it) and Photoshop when designing.
True, true. All true. I will however defend the fact that Dreamweaver is a solid program that has a bad reputation for no other reason than people who don't know how to use it use it. =)

I think we are both on the same page here, regardless.

Posted: Fri Aug 17, 2007 10:54 am
by mikeeeeeeey
Sorry guys, but I haven't got time to read all the posts in this thread, but this is an issue which I've had myself.

When I've been developing using tables I've often thought to myself, why would I need divs? Except to make scrolling text boxes really easily. But now I am totally pro-divs.

The best thing about using divs to make an entire page is the control in CSS. Once you've been doing web development with divs (with success and/or failure) you'll start to get the hang of the positioning elements, and also what you can and...... can (!) do with divs.

I was actually thinking last night, if I made a page entirely out of divs, would I ever have to touch the page again (except for editing static text) to update the layout?
The answer is I wouldn't. HOW COOL IS THAT?

So to the person who posted this, I understand your grief (as I'm sure many of the rest of us do), but please please please, the more people who start to develop using divs, the more we move towards Web 2.0

And by Web 2.0 I don't just mean the paradigm, I mean the 2nd web.
That doesn't make sense. Oh well!

P.S. Tables are kinda for the I'm-a-graphic-designer-but-I'll-never-get-a-dev-to-freelance-since-I-have-a-cracked-copy-of-DreamweaverCS3....well kinda.

Posted: Fri Aug 17, 2007 11:08 am
by RobertGonzalez
Sometimes I think myself odd.

When I sit down to design a new site, I code the markup with no styles and no JS. Pure markup, and I validate it and view it in a browser to see what it would look like with no features available to it.

Then I add css to the markup elements to add style to it. Then I validate my CSS.

Then I add any JS that I think will make it cooler than it already is. Then I test it with and without JS, without and without CSS and in as many browsers as I can (IE6 for sure, FF, Opera and Safari on Windows. I also have access to Safari 1.3 and Safari 2 on Mac at work).

Any changes make to the markup or css runs the entire process through validation again.

By the way, I start in Notepad++. When I need an image for my CSS, I open Photoshop and create the image. I have never designed a site in Photoshop before and I still find it somewhat odd that anyone can. I literally code from scratch all of my markup and all of my CSS in a plain jane editor.

And here's a little challenge for the table-based layout enthusiasts.... write a layout, then without changing a single part of the markup, make it look two different ways in addition to the first layout. Yep, you heard me, three sites from one markup document, without changing the markup. It is much easier to do with CSS layouts than with tables, that's for sure.

Posted: Fri Aug 17, 2007 1:09 pm
by Luke
umm... http://www.csszengarden.com

I must say that most of the time when I talk to people who complain about how long it takes to lay things out properly in css just don't understand css / html at all. They haven't taken the time to fully understand the difference between inline elements, block-level elements, floating, positioning, etc. In order to be able to lay a site out quickly and efficiently, you need to know what you're doing. Just like you would need to understand application architecture (within your chosen language / framework) before you tried to lay out an application. Web sites are no longer something that can be whipped out in dreamweaver, nor should they be.

Recommended reading:

http://www.oreilly.com/catalog/csstdg3/ - before this book, I thought I knew how to lay out sites, and I thought I understood css, but I was sadly mistaken. I feel after reading this book that I can finally say with confidence that I understand css and layout.

EDIT - ALSO! Since I began to fully understand CSS and its ins and outs, I have had less and less issues with the infamous Internet Explorer. I very rarely have to send IE its own instructions or even do any hacks any more. It is possible... believe me. Pretty much the only time I need send IE anything special beyond what I send to others is when I am doing something very specialized and bleeding-edge.

Posted: Fri Aug 17, 2007 1:57 pm
by RobertGonzalez
The Ninja Space Goat wrote:Recommended reading:

http://www.oreilly.com/catalog/csstdg3/ - before this book, I thought I knew how to lay out sites, and I thought I understood css, but I was sadly mistaken. I feel after reading this book that I can finally say with confidence that I understand css and layout.
I second this statement. I have this book with me whenever I develop (as a reference). It is extremely helpful.

Posted: Fri Aug 17, 2007 2:05 pm
by nykoelle
In New York State, its mandated for governmental websites to use stylesheets wherever possible and if you use tables you have to identify all the rows and columns and attribute the table. Its easier to get the site within the regulations if you use divs, at least in my opinion. The site has to be 100% accessible by screen readers, etc. They also mandate "Web pages will be created using the most current web document specifications" and do not use depreciated elements.

http://www.oft.state.ny.us/policy/s04-001/index.htm

'governmental' sites include anything funded by the government, this includes education, state, local, utilites, etc. I don't know how carefully its mandated but my K12 clients are sticklers to make sure their sites stay within regulation. What I'm getting that is there are real reasons that you need to know semantic code, I know if I couldn't meet those requirements my company would have had to say no to a few contracts. Granted for sites that don't require proper use of code, you can get away with coding the way you know how, but then it's going to take you that much longer to do the sites you have to do semantically in css because you aren't used to it. There will be times you'll be required to do it the standard way if you intend to make a career out of web dev. If you don't, then this conversation doesn't matter much.

All in all, only coding in tabular layouts limits your capabilities as a developer. You'll lose out on contracts and jobs and ultimately limit yourself which, along with outsourcing, is among the most dangerous things you can do to your technical career.



Sidenote: I've developed my share of semantic websites, and as the Ninja guy above me said, as you get to know css you have to hack IE less and less. I think I've only had to implement hacks twice to be honest. Simplify and follow the rules, it works everytime.

Posted: Fri Aug 17, 2007 2:06 pm
by Christopher
I think the OP and I would agree with all of your well reasoned and thoughtful responses. Obviously semantic layout using proper elements (e.g.. <p>, <h1>..<h5>, <ul>, <ol>, etc.) plus <div> and <span> is the right things to do. And I understand that there is some learning curve involved.

My point is that the amount of knowledge required is not proportional to the difficulty of the task. The amount of odd information and quirks that you need to know to easily do layout is not proportional to the task. I think the OP was reacting to this and the fact that the old table based layout style was pretty trivial to do once you learned just colspan, cellpadding, cellspacing and width.

To make matters worse when you search for answers to how to do layout you find many different solutions to the same trivial problems. Jason's blueprint adds yet another way to do layout. Different designers solve the myriad in interdependencies of the many CSS settings in different ways.

In summary, my experience with modern layout is not that is it worse than the old table based layout -- it is that it is requires too much knowledge and has too many quirks given the problem space that it is solving. I really expected it to be better.

I think it would be great if all of you gurus could do a separate thread to go through the basics (starting like Everah described) and show the basics, plus how various solutions (like blueprint) can be used for layout.

Posted: Fri Aug 17, 2007 2:47 pm
by superdezign
arborint wrote:I think it would be great if all of you gurus could do a separate thread to go through the basics (starting like Everah described) and show the basics, plus how various solutions (like blueprint) can be used for layout.
Since there are so many websites dedicated to teaching CSS, I've never seen much reason to do something like that. And there there's A List Apart which, while not always giving the *best* methods, always has writers that give interesting methods.

I like to think of CSS as just bringing the actual programming back to HTML. If there was only one way to do everything when programming, there's a lack of creativity in solutions. CSS is flexible. There are a million and one ways to display things. Floats, absolute / relative positioning, altering the 'display' property, negative margins, overflowing, etc. I think the only thing that tables can do that CSS can't is to center another block element vertically, which I've yet to find a need for.

I think maybe the problem is just making your CSS work cross browser (and still validate), and from the sound of the OP, the problem is Explorer. Microsoft is well-aware that it isn't standards-compliant. They made up their own CSS rules for heaven's sake. But because they know this, they gave you the IE conditionals. There are multiple hacks for giving IE different instructions as well. If IE is the problem, there are already solutions.

Posted: Fri Aug 17, 2007 3:20 pm
by Christopher
superdezign wrote:Since there are so many websites dedicated to teaching CSS, I've never seen much reason to do something like that. And there there's A List Apart which, while not always giving the *best* methods, always has writers that give interesting methods.
The difference between a thread here and the many sites out here is that people can actually ask for clarification here. There are obviously answers on the web to most every question asked in these forums, but I think we can provide a greater depth and specificity.

Posted: Fri Aug 17, 2007 3:25 pm
by superdezign
arborint wrote:The difference between a thread here and the many sites out here is that people can actually ask for clarification here. There are obviously answers on the web to most every question asked in these forums, but I think we can provide a greater depth and specificity.
That's true... MVC didn't make as much sense until you guys clarified. I wonder where'd we'd start? We'll make it a sticky in Client Side. ^_^

Posted: Fri Aug 17, 2007 3:51 pm
by jason
The important point is that yes, while CSS/HTML/JavaScript/Validation might be more difficult than FrontPage-esque websites with table-based layouts, it is better. And the ONLY reason it's harder is because of the browsers. Maybe you guys dont' remember the early days when IE was the browser you loved and Netscape was the horrid abomination (and let's not get started about before that) and trying to get table-based sites to work across browsers was a chore (and far from easy).

Kids these days have it so easy, what with every browser maker clamoring to support standards.