I'm having an issue with Outlook and when Windows Display (Control Panel > All Control Panel Items > Display) is set to Medium - 125% (or larger)
The text in the newsletter appears bigger and is creating issues with spacing. Although most of the issues with this can be resolved, I would like to know if there is a way to force Outlook to respect the pixel sizing as defined in the html email.
An example code block is something on these lines
...
<td width="460" valign="baseline">
<p style="font-size:16px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;" >Hello </p>
</td>
...
The text inside the <p> tag is 16px on a machine that has Windows Display 100% but is larger when Windows Display 125% (interestingly, the browser still respects the 16px and does not increase the font size like Outlook)
I don't think you're taking the right approach to this problem. Please look at it another way.
The user said "I want my text to be bigger". They probably said that because they have a very high res display or they have visual difficulties. It's their preference, if not their need, to have bigger text.
You're saying "how do I override the user's preference for my cosmetic convenience?".
Don't do that. Fix your layout's design so it adapts better to varying text sizes.
Reduce your image use and/or place your images so that they can handle being pushed around by the text. Consdier using scalable units like em or percentage font sizes to be more friendly toward people with visual difficulties or very-high-res displays.
Background:
The reason Windows scales fonts (and pixels) like this is because software developers for the platform have been consistently ignoring the font sizes the user sets in Explorer and the theme. Apps often force the use of their own fonts with specific pixel sizing instead of using the system fonts and sizes.
This has led to lots of apps that're unusable for people with visual difficulties, on media PCs, etc.
Microsoft wanted to give users a way to override these badly behaved programs, so they gave users a way to scale the pixel sizes provided by applications by a fixed percentage. Essentially they redefined a font "px" as an abstract unit that can be scaled.
Your HTML email is trying to be one of those badly behaved programs.
Related
I've been trying a bunch of different things to solve this, but nothing has made any difference. In our emails, we have an image in the footer. It is 456px wide, which is wider than both the device width and the parent div/ table (I've tried both).
This is in Gmail, testing on Chrome emulating iPhone 5/SE. The image has a max-width of 100% on it, but Gmail Mobile seems to remove this and insert a max-width of 852px, which is useless.
Might anyone know what the workaround is?
The css attribute max-width only has partial support in Android.
https://www.campaignmonitor.com/css/box-model/max-width/
Without posting your html code, it's kind of hard to look at what you are doing and suggest an alternative.
Another question: Why in the world are you building emails that are 852px?
The best practice for email width is 600-800px. Beyond 600px, your email will not display correctly in many email clients, if for no other reason than that's the width of the viewing window for the email. Any wider than 600px, the recipient will have to scroll to view the email. As an example:
Gmail: 640px (starts hiding background color)
Outlook 2007: 600px
Outlook 2013: 550px
Yahoo: 650px
Good luck.
I am working on a site that will have very high international distribution and need to understand the maximum width of a like button in any of the available languages.
So far, the biggest Like button I can find is in Russian - http://cl.ly/Jmeb.
Is there a full specification list containing the size of the like button for each available language?
Well, the most robust way to design your site is to not impose tight limits on the size of the Like button. The Facebook Developers topic Internationalization says,
Avoid Layouts Relying on Precise Sizing
Try not to use layouts that depend on the precise onscreen sizes of pieces of text in the original language. For any piece of text, in some languages it is likely to be shorter and in some it will be longer (sometimes significantly so in either direction.) If you have sized your user interface elements such that your text just barely fits, your application will probably not work well in a language with longer words.
Similarly, the Facebook Developers topic Like Button says,
You may need to adjust the width of the Like button to accommodate different languages.
You found a Like button in Russian that is 110 pixels wide. Can your layout work with a button that is 1.5 times as wide? 2 times as wide? 5 times as wide? Then you are probably safe.
But the browser is retrieving they Like button image from Facebook when it displays your page, right? So even if we can give you a full list of the size of the Like button for each available language today, tomorrow Facebook could add another language which has a longer Like button.
That said, Facebook does give code for getting the Like button in any language you choose (see FAQ: How do I display the Like button in different languages?):
src="http://www.facebook.com/plugins/like.php?locale=fr_FR&...
Facebook also publishes an XML file listing the locales that Facebook supports. With a bit of Grep search/replace, we can generate an HTML page which displays Like buttons in all 76 locales listed today. Looking at the width of those buttons, we see that Irish localisation of the Like button is the widest at the moment, with 127 pixels. (On my system, the Like button in Malayalam comes up a bit wider at 169 pixels, but that's because I don't have a Malayalam font installed, so the button displays with missing-glyph boxes.)
So, it looks like the maximum width of a Like button in the languages supported at the moment 169 pixels wide. But, coding to this width is not what Facebook, or good internationalisation design, recommends. Instead, make your layout flexible, and able to cope with wider Like buttons in some locales.
I coded this html email and when I check it in Chrome and IE7 the photo of the women is broken up. It looks fine in all other browsers. In some email clients it is also broken up.
Anyone experience this before and or can offer a suggestion on how to fix?
thank you,
ryan
Your image "sandy-portrait2.png" is stretching your upper table with beyond 600px wide to 638px wide.
Adjust your bottom table to match and you should be good. Also, you will need to recut or manually position "below-bottom-a-line.png" because it is only 600px wide and will not align correctly with the image in your upper table.
Also take note that since you are using background attribute on you table, Client such as Outlook 2007 will ignore this attribute and not display the background.
So, I've been using this little bit of Javascript (as a bookmark) to increase the font size of various websites I visit on my iPhone's Safari browser (zooming in leads to too much scrolling from side to side).
http://www.everythingicafe.com/forum/iphone-software/increase-font-size-in-safari-without-zooming-9511.html
javascript:for(i=0;i<document.getElementsByTagName ('*')
.length;i++)void(document.getElementsByTagName('*' )
[i].style.fontSize='18pt');
However, this doesn't work on any of the StackOverflow sites. Any suggestions on how to fix it?
Poking thru the CSS in FireBug doesn't give me many clues except for a font-size: 100% that is in the p tag.
I tried changing fontSize='115%'); and it changed some of the text but not the question/answer body (the most important stuff!)
Stack Overflow uses relative font sizes for everything.
Here is a simple fix to adjust the font size for the entire document:
javascript:void(document.body.style.fontSize = '16pt');
Regular HTML select boxes (such as, e.g. found here), while being "chosen" are presented by the iPhone on a native widget that seems to totally ignore regular html font sizes and whatnot. It does some ellipsing when it goes too long, but the font is way too big for a list I want to present -- even on landscape, only about 35 characters can fit.
Is there any way to tell the iPhone to use a smaller font there?
This is not possible. Use radio buttons instead.
Also, you can create custom select boxes. If created the good way, it works great. One small misstep and the UI is a disaster.