Re: [WSG] issues with too many divs
Ben Lau wrote: Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Hi Ben-- I think it depends on the design and the application/website. If divs are being used wisely, on a widely deployed application, it makes sense that the div count could be quite high. I created a bookmark and did a quick census of some larger sites: Facebook.com - 796 divs (!) on my simple landing (dashboard?) page. CNN.com - 724 divs on main page. MSN.com - 188 divs. Yahoo.com - a cool 100 divs. Alistapart.com - 17 divs. CSSZenGarden.com - 22 divs. MySpace.com - 77 divs (not logged in or anything). Even an infrequent visitor to MySpace must expect the post-login div count (and table count) to be quite a bit higher. When a more semantic tag makes more sense, death to the div, I say. If a better cross-browser solution can be achieved sans-div...death to the div, once again. Unfortunately, much like forms, divs can be a necessary evil and sometimes have to be used. When this is the case, I try to live by a 'less is more' philosophy as best I can. All my tests were run using this bookmarklet: javascript:(function(){var docrut,divlen,msgtag,msgtxt;docrut=document.getElementsByTagName("BODY")[0];divlen=document.getElementsByTagName("DIV").length;msgtag=document.createElement("H1");msgtxt=document.createTextNode("This site is using "+divlen+" divs.");msgtag.appendChild(msgtxt);docrut.insertBefore(msgtag,docrut.firstChild);})(); I made it up for the solely for the purposes of this email, so don't shoot me if it isn't perfect. --Bill *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] issues with too many divs
Ben Lau wrote: Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... No UA will have problems with a dozen or so extra wrapper-divs around every single element in a page - doesn't even have to be valid nesting, so that in itself won't give you arguments for simplifying a design. Complex imagery in designs tends to lead to failures when exposed to font-resizing and other normal user-induced challenges - background-images don't scale with foreground, so it's probably easier to find arguments for a simplified design on the accessibility/usability side of web design. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] issues with too many divs
Do the additional wrapper divs make as much difference to the page weight as the images that you imply are also required? Eleven extra bytes is generally nothing compared to an additional image. Unless you are adding them in four-figure quantities, no amount of DIVs are likely to cause a problem for a modern browser, but overlapping images will start to cause problems while you are still in double-figures. Balance is normally the key to a good design - it is never worth stripping the HTML down to the absolute basics, since that will then require you to increase the complexity of your CSS to compensate, or indeed vice-versa. This also applies to visual design - too much detail makes things look fussy, and often makes them fragile, but without seeing what your designer has given you, I don't think any of us can comment on whether he is being overly demanding or not. Regards, Mike Mike Brockington Web Development Specialist www.calcResult.com www.stephanieBlakey.me.uk www.edinburgh.gov.uk This message does not reflect the opinions of any entity other than the author alone. From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ben Lau Sent: 07 January 2009 05:36 To: wsg@webstandardsgroup.org Subject: [WSG] issues with too many divs Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] issues with too many divs
Depends on what you mean by to many, agree with Tee the use of class wth backgrounds will help. You could create a small sample with not to many divs to test the image/graphic weight on the page and inform the designer that by using this or that the page load increases X ammount. IT all depends in your company how much say you have over the designers choice... the only page load issue with divs is not the ammount of divs used but the size of the graphic/image which will/should not change wheter you load it in 3 DIV or 30. one condiseration though will be how the page will be drawn by using the divs, ie for people with low speed connections the page load an look very ugly if it needs to be spliced (and also for high speed connections ust not as bad) and lest face it in the city we have high speeds but a lot of australia does not. hope that helps somewhat? Regards Aimee Maree Quoting tee : On Jan 6, 2009, at 9:35 PM, Ben Lau wrote: Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Ben, not sure if this helps or not. What I usually do is, I make good use of tags such as headings, child selectors for background image purpose or sometimes add a class just for the background image purpose, and then add it to the divs and tags accordingly. One technique I particularly like is to make a gradient transparent background, and use it for many background effects with colors and background positioning. It does take a bit of practice to get it right and to be able to foresee potential but hard to spot issues to make it more browser-proof (or browser friendly). tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] issues with too many divs
On Jan 6, 2009, at 9:35 PM, Ben Lau wrote: Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Ben, not sure if this helps or not. What I usually do is, I make good use of tags such as headings, child selectors for background image purpose or sometimes add a class just for the background image purpose, and then add it to the divs and tags accordingly. One technique I particularly like is to make a gradient transparent background, and use it for many background effects with colors and background positioning. It does take a bit of practice to get it right and to be able to foresee potential but hard to spot issues to make it more browser- proof (or browser friendly). tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] issues with too many divs
Using too much markup just for styling purposes isn’t recommended. I find that using adjacent sibling and child selectors usually helps avoid a large case of multi-div-itis. —Pascal On 07/01/2009, at 4:35 PM, Ben Lau wrote: Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** --- Simon Pascal Klein Concept designer (w) http://klepas.org (e) kle...@klepas.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] issues with too many divs
Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***