Skip navigation
Currently Being Moderated

Text-only zooming

Jul 9, 2010 11:49 AM

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???

 
Replies
  • Currently Being Moderated
    Jul 9, 2010 11:54 AM   in reply to tompen01

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2010 12:20 PM   in reply to tompen01
    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.html

     

    Opera

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

     

    Google Chrome

    http://www.google.com/support/forum/p/Chrome/thread?tid=0c19f08937bece 78&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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2010 1:49 PM   in reply to tompen01
    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 4:29 AM   in reply to tompen01

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 4:35 AM   in reply to hargrave-smith

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 4:45 AM   in reply to MurraySummers


    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 5:11 AM   in reply to hargrave-smith

    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.
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 9:42 AM   in reply to tompen01

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 10:59 AM   in reply to MurraySummers

    "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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 11:50 AM   in reply to hargrave-smith

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 11:50 AM   in reply to hargrave-smith

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 11:55 AM   in reply to Nancy O.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 12:05 PM   in reply to hargrave-smith

    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_p t1.html


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

     

     


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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 12:31 PM   in reply to tompen01

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 12:36 PM   in reply to tompen01

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points