24 Replies Latest reply: Jul 10, 2010 12:36 PM by Nancy O. RSS

    Text-only zooming

    tompen01 Community Member

      The most recent versions of IE and Firefox allow the user to zoom in or out on the text only, independently of the graphic content on the page. It looks like Google Chrome, Safari and Opera do not allow for text-only zooms. With these browsers, the user can only zoom in or out on the total content on the page, enlarging or reducing the entire view size, but otherwise keeping text and graphic objects in proper proportion without affecting the layout. In my view Google, Safari and Opera have it right.

       

      My problem is that, even though I take care to try to minimize the potential bad effects that go with a user changing text size only, I still occasionally see some really unwanted effects on my page layout.

       

      A simple solution, if it were available, would be to simply disable the text-only zooming feature on the browsers that offer this capability. Does anyone know of code that might be inserted to the website pages using Dreamweaver CS4. Or, a CSS rule that can be applied?

       

      I know that it's text that's the problem. Another option would be to elminate all text and just insert images with text embedded. I don't consider this a viable option for a number of reasons (more difficult to do, and not SEO friendly). Does anyone have thoughts about using this method?

       

      Help and comments greatly appreciated.

       

      Tom

       

      P.S. I learned just after this post (from another blog) that specifying text sizes in pixels rather than ems may prevent the user from changing size of text only -- or at least, it will minimize the adverse affect on the layout. Is this true???

        • 1. Re: Text-only zooming
          MurraySummers ACP/MVPs

          P.S. I learned just after this post (from another blog) that specifying text sizes in pixels rather than ems may prevent the user from changing size of text only -- or at least, it will minimize the adverse affect on the layout. Is this true???

           

          Definitely untrue.  IE6 and earlier versions were flummoxed by text sized in pixels, although no other browser in the universe is.  So this would only help you if your entire audience were using one of those browsers.  <barf>

          • 2. Re: Text-only zooming
            tompen01 Community Member

            Hi Murray,

             

            I just tried a quick test of a "problem page" using pixels instead of ems, and I

            concur -- it had not affect on text-only zooming.

             

            Thanks,

             

            Tom

            • 3. Re: Text-only zooming
              Nancy O. MVP
              It looks like Google Chrome, Safari and Opera do not allow for text-only zooms.

              Sure they do.  With a little effort, anyone can change their default text sizes and other preferences in browsers.

               

              Safari

              http://www.downloadatoz.net/download/safari-for-mac/how-to-change-font-size-on-safari_g.ht ml

               

              Opera

              http://www.opera.com/support/kb/view/773/

               

              Google Chrome

              http://www.google.com/support/forum/p/Chrome/thread?tid=0c19f08937bece78&hl=en

               

              A simple solution, if it were available, would be to simply disable the text-only zooming feature on the browsers that offer this capability. Does anyone know of code that might be inserted to the website pages using Dreamweaver CS4 to accomplish this? Or, is there a CSS rule that can be applied to do this?

               

              You're asking all the wrong questions.  Instead of hijacking people's browsers and sabotaging their preferences (which you can't do anyway) you should be re-examining your design/layout strategy.  Evidently, you have some problems at your end that need fixing.  But without a link to your test page, it's impossible to make meaningful suggestions.

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Text-only zooming
                tompen01 Community Member

                Hi Nancy,

                 

                I stand corrected. I dug a little deeper on these browsers, and the text-only

                change capability is there, as you've correctly indicated. It may be a little

                harder to find and do on the others, whereas, on IE and Firefox, it's right

                there and obvious on the menu bar.

                 

                I appreciate that text resizing is designed for accessibility, but wouldn't it

                just be better if the only resizing option was for the entire view (i.e., text

                plus graphics)? The images would be larger, but as long as the text size

                increases, wouldn't that do it? This way, the layout wouldn't be affected. I

                know that better layout design will help this, but I've seen few layouts that

                aren't adversely changed with too much text resizing.

                 

                Tom

                • 5. Re: Text-only zooming
                  Nancy O. MVP
                  but wouldn't it just be better if the only resizing option was for the entire view (i.e., text

                  plus graphics)?

                  Better for who?

                   

                  Browsers go through a lot of beta testing with actual users before they arrive on the scene.  Obviously you are among the minority if you think all browsers should behave this way.  I for one hate Zoom and keep it turned off.

                   

                  I've seen few layouts that aren't adversely changed with too much text resizing.

                   

                  Change to appearance is one thing. It comes with the territory. But this should not adversely effect a page's performance or usability.  If it does, you need to fix it.  

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb

                  • 6. Re: Text-only zooming
                    tompen01 Community Member

                    Hi Nancy,

                     

                    I share your opinions on this.

                     

                    Since I obviously can't change the way the browsers operate, I'll do my best to

                    design with the possibility of text resizing in mind. So far, I've been lucky

                    (with the exception of one page). From now on, in addition to testing in five

                    browsers while designing the site in Dreamweaver, I'll also test the text zoom

                    settings on each just to see how much the view is changed. As you say,

                    performance and usability need to remain in tact.

                     

                    Thanks again for your help.

                     

                    Regards,

                     

                    Tom

                    • 7. Re: Text-only zooming
                      hargrave-smith

                      Hi Tom,

                       

                      Would be interested to hear how you get on with this! I have just designed my first site using templates and it looks fine except when I zoom it all breaks up.

                       

                      I was thinking surely there must be some code I can insert that will enable all of the parts of the template to stay in the same position regardless of zoom settings? Or is there some code that restricts the size of the editable region regardless? This may be something really obvious in which case, I apologise.

                       

                      Without seeing your site, it is hard to know if your problem is the same one I have, but I have googled it to death and yours is the closest problem I have found.

                       

                      Good luck with it!


                      Kate x

                      • 8. Re: Text-only zooming
                        MurraySummers ACP/MVPs

                        Would be interested to hear how you get on with this! I have just designed my first site using templates and it looks fine except when I zoom it all breaks up.

                         

                        This is often a symptom of having used absolute positioning as a layout method.  Without seeing your page and its code, we can only guess why it's breaking up, though.  Can you post a link to the page, please?

                         

                        I was thinking surely there must be some code I can insert that will enable all of the parts of the template to stay in the same position regardless of zoom settings?

                         

                        There is not.  The only way to deal with text zoom is to use layout methods that allow the page to accommodate it without breaking apart.  Again, we'd need to see your code to know what it is you might have done or not done.

                         

                        Or is there some code that restricts the size of the editable region regardless?

                         

                        Remember that template editable regions are NOT layout tools - they are content tools.  An editable region has no layout properties.  If you are seeing the content in an editable region break up, it's because of the code that contains the editable region, not the editable region itself.

                         

                        So - bottom line as it was with Tom.  To help, we need to see the code.

                        • 9. Re: Text-only zooming
                          hargrave-smith Community Member


                          The link is below:

                           

                          http://www.hargravesmith.com/k9/

                           

                          Code may be a total mess, I am just picking things up as I go along.


                          Thanks in advance for any help you can provide :-)

                           

                          Kate x

                          • 10. Re: Text-only zooming
                            MurraySummers ACP/MVPs

                            Code may be a total mess, I am just picking things up as I go along.

                             

                            Yep.  It is.

                             

                            From the top:

                             

                             

                             

                            1. There is no doctype.  This is a mistake since it means that the browsers will render the page in QUIRKS mode, a nasty thing to happen to a web page, not the least because each browser uses different rules for how to render in quirks mode!  If you are seeking cross-browser uniformity in your page rendering, quirks mode is NOT the solution!  Make sure that every page begins with a valid and complete doctype, and with one that describes your ability with HTML - I suggest you use HTML 4.01 Transitional.
                            2. There is no editable region around the <title> tag - <head>
                              <title>K9 Patrol - Comprehensive canine security throughout Yorkshire.</title>
                              - this means that the title of each child page will not be editable.  That's bad from an SEO perspective.  Each page should have a keyword-dense, page-specific title.
                            3. You have ignored the nesting of double quotes in the meta keywords tag, creating a large chunk of invalid code - - note the double quotes around 'German Shepherd'.  Since the content of the keywords tag is delimited by double quotes, your first double quote here technically terminates the content part of the tag, and the rest of the content there is ignored as invalid HTML.
                            4. From a practical point of view, since all major search engines ignore the keywords meta tag, there is precious little to be gained by including one in your page.  Assuming it's correctly formatted it won't hurt, but it's not going to help measurably either.
                            5. Although your page has NO doctype, you have mixed in XHTML-style tags -

                              That's not going to cause your page to render improperly, but it does make the browser get worried....

                               

                            6. It appears that you have used ImageReady to write some (all?) of this HTML.  That's never a good thing when you allow your graphics editor to write your HTML, because of the nasty HTML that they write (including Fireworks).
                            7. You have liberally used merged and split cells in your tables to achieve (!?) the layout (or better to say, ImageReady has used them), which is nearly a fatal mistake and likely is the reason for your page's distress on enlarging the text.  You would be well served by visiting this site - http://www.apptools.com - and reading the rant there about how such 'spans' destroy your layout's integrity, and what to do about it.
                            At this point, I'd say your best bet would be to create a new template.  Recognizing that your HTML skills may not allow this, I'm afraid that the effort to 'fix' this page may not be within your grasp either.  At the least, you should open the page in DW and use FILE | Convert > HTML 4.01 Transitional to standardize the page with a good doctype and with appropriate tag syntax.  THen you should fix the items I mention in the list above up through #5.
                            • 11. Re: Text-only zooming
                              tompen01 Community Member

                              Hi Kate,

                               

                              I'm far from an expert on troubleshooting code. Perhaps other forum members may

                              have some good comments to offer.

                               

                              One useful tip I received recently is to go this URL and enter your website home

                              page (or any other page where there are problems):  http://validator.w3.org/

                               

                              Regards,

                               

                              Tom

                              • 12. Re: Text-only zooming
                                tompen01 Community Member

                                Kate:

                                 

                                I've really found the issue on only one page (of 5 sites I've designed so far).

                                I probably didn't have the problem with the other sites by shear luck. Anyway,

                                now I test not only viewing at standard zoom in 5 browsers when I design the

                                sites in Dreamweaver -- I also check text zooming only.

                                 

                                I fixed my one-page problem by eliminating a right-floated image in a container

                                that had two right-floated images. I converted the section with the second image

                                to a table and the images now stay put no matter what the text size. The first

                                right-floated image doesn't move, so I think I'm fine.

                                 

                                I think that in the future, for navigation menus, rather than using simple text

                                links (which are subject to resizing), I'll use a Spry menu or a canned flash

                                extension (like f-Source). Also, if I feel a bit of text is necessary and really

                                critical to retain size, I'll insert that as a .png image (with suitable

                                Alt-text, of course).

                                 

                                I'm not an expert by any means, and I'm sure other users on this form will have

                                a lot more to contribute. Hope this helps.

                                 

                                Regards,

                                 

                                Tom

                                • 13. Re: Text-only zooming
                                  tompen01 Community Member

                                  Hi Murray,

                                   

                                  I've sorted out my one-page problem and have learned a valuable lesson with this

                                  whole experience: I will always check text-only zoom for affects on layout while

                                  designing the website.

                                   

                                  Regards,

                                   

                                  Tom

                                  • 14. Re: Text-only zooming
                                    MurraySummers ACP/MVPs

                                    I think that in the future, for navigation menus, rather than using simple text

                                    links (which are subject to resizing), I'll use a Spry menu or a canned flash

                                    extension (like f-Source).

                                     

                                    VERY BAD DECISION!

                                     

                                    A Spry menu will be just as sensitive to text size as a regular one.  And a Flash menu is just BAD BAD BAD.  You eliminate the site for those who don't have the Flash plugin, or for those who are using screen assistive devices, or for those using iPhones/iPads.

                                    • 15. Re: Text-only zooming
                                      hargrave-smith Community Member

                                      "Recognizing that your HTML skills may not allow this, I'm afraid that  the effort to 'fix' this page may not be within your grasp either."

                                       

                                      Not sure how to respond to that comment!! Obviously I had a problem or I wouldn't have asked for help however I didn't realise I had attached my CV to the post.... I have every faith in my ability to learn the skills, and apply the effort, required.

                                       

                                      Historically, I used to handcode in notepad. It took me a long while to relinquish complete control though, and I have only just started using templates and dreamweaver to enable me to create sites more quickly and in a more visual way. I had figured that dreamweaver, being an industry standard web tool, would include basics (like including a default doctype when I select 'new'!) and have an element of 'damage limitation'.

                                       

                                      1, 2 (and 3 or not as per 4). No problem to fix these at all - I may even ask my child to do it for me ;-)

                                       

                                      5. Oh. Can't have a worried browser can we? ;-)

                                       

                                      6. I am not aware of image ready and haven't allowed any graphics editor to write any of my html...? I use a mix of using dreamweaver in design mode and code mode. Could this explain the mish mash you mentioned..? Maybe I should just stick to code in future.... again, I didn't think that it would be a major problem given that both options are available simultaneously.

                                       

                                      And then we get to, hurrah, point 7. A starting point to fix my problem! I shall check out the site you mentioned.

                                       

                                      Thanks for the help.

                                       

                                      Kate x

                                      • 16. Re: Text-only zooming
                                        Nancy O. MVP

                                        6. I am not aware of image ready and haven't allowed any graphics editor to write any of my html...?

                                         

                                        Your code tells a different story, though. 

                                         

                                         

                                        <!-- ImageReady Slices (k9templatebevelled.jpg) -->
                                        <table width="901" height="853" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
                                        <tr>
                                        <td colspan="16">
                                        <img src="images/headerbar.gif" width="900" height="93" alt=""></td>
                                        <td>
                                        <img src="images/spacer.gif" width="1" height="93" alt=""></td>
                                        </tr>
                                        <tr>
                                        <td rowspan="10">          
                                        
                                        
                                        
                                        

                                         

                                        HTML pages with missing doc types, tables with colspan, rowspan and spacer.gifs throughout are all signs that Photoshop was used to generate code on the page.

                                         

                                        You are correct about one thing.  When you open a new HTML page from DW, it does correctly assign a valid document type to the top of the page.  My advice is to use Split View so you can see the code and design at the same time.

                                         

                                         

                                         

                                        Nancy O.
                                        Alt-Web Design & Publishing
                                        Web | Graphics | Print | Media  Specialists
                                        http://alt-web.com/
                                        http://twitter.com/altweb

                                        • 17. Re: Text-only zooming
                                          hargrave-smith Community Member

                                          Just a comment about point 6.

                                           

                                          I sliced my template in photoshop but have just gone back in and just discovered the option to save in css format.....

                                          When I tested this, the template includes the doctype and has none of the messy tables that the other option had. In future I will be ensuring that the css box is ticked :-)

                                           

                                          Thanks for pointing me into a direction from which I could tangent off and inadvertently discover this!!!!

                                           

                                          Kate x

                                          • 18. Re: Text-only zooming
                                            hargrave-smith Community Member

                                            Didn't put two and two together about image ready and my photoshop slices till after I posted..... guess I should pay more attention to my code!!!!!

                                             

                                            I shall get there in the end....

                                             

                                            Thank you Nancy!

                                             

                                            Kate x

                                            • 19. Re: Text-only zooming
                                              Nancy O. MVP

                                              I sliced my template in photoshop but have just gone back in and just discovered the option to save in css format...

                                              Ugh!

                                               

                                              For best results, use your graphics app to slice/optimize images ONLY.

                                              Use DW to build your HTML and CSS code.

                                               

                                               

                                              Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW


                                              Part 1 --
                                              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html


                                              Part 2 --
                                              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

                                               

                                               


                                              Nancy O.
                                              Alt-Web Design & Publishing
                                              Web | Graphics | Print | Media  Specialists
                                              http://alt-web.com/
                                              http://twitter.com/altweb

                                              • 20. Re: Text-only zooming
                                                tompen01 Community Member

                                                Kate:

                                                 

                                                I'm confused. Could the e-mail addresses have gotten mixed up?

                                                 

                                                I intended no disrespect. I just want to point out that I'm not an expert in

                                                troubleshooting html problems. I listed what I did on my one problem page to

                                                (hopefully) resolve my problem with text-only sizing. I received an e-mail

                                                earlier about a site link -- this wasn't my website, as I never provided the URL

                                                for my site, nor the code.

                                                 

                                                 

                                                I think there's been some kind of mixup here on the forum. Again, I did not

                                                intend to offend you or anyone.

                                                 

                                                Regards,

                                                 

                                                Tom

                                                • 21. Re: Text-only zooming
                                                  tompen01 Community Member

                                                  Nancy:

                                                   

                                                  This isn't my code, nor my website. I don't use Image Ready.

                                                   

                                                  I think some posts or e-mails got crossed here. I keep seeing my name in the

                                                  "to" line, and I'm wondering if this is addressed to me or someone else.

                                                   

                                                  Regards,

                                                   

                                                  Tom

                                                  • 22. Re: Text-only zooming
                                                    MurraySummers ACP/MVPs

                                                    I think you are just misreading the posts, Tom.  Most of the responses have been to Kate - it's her site that has the fingerprint from ImageReady and Photoshop.

                                                    • 23. Re: Text-only zooming
                                                      tompen01 Community Member

                                                      Kate & Nancy,

                                                       

                                                      I feel like a dummy! I was replying from my e-mail account, thinking that these comments were addressed me (based on the way the message was addressed). I didn't realize you were talking with each other on this issue. That's why the comments about the website, your code and Image Ready didn't make sense to me.

                                                       

                                                      Please excuse my ignorance on this -- I'll send my messages from the Forum for now on, rather than trying to reply from Yahoo e-mail. This way, I'll see the true flow of the posts.

                                                       

                                                      Best regards,

                                                       

                                                      Tom

                                                       

                                                      P.S. Thanks, Murray, as well.

                                                      • 24. Re: Text-only zooming
                                                        Nancy O. MVP

                                                        Tom,

                                                        Kate sort of chimed into your thread with a question of her own.  So you're getting emailed every time someone posts a reply to this discussion on the web forum.  If you don't want to receive email notifications, you can turn this option off in your Adobe profile.

                                                         

                                                         

                                                         

                                                        Nancy O.
                                                        Alt-Web Design & Publishing
                                                        Web | Graphics | Print | Media  Specialists
                                                        http://alt-web.com/
                                                        http://twitter.com/altweb