I use HTML coding in email marketing.
Nowadays It is important to nice represent email offers both in standard and mobile version.
So, exist the certain tricks which help you to made your emails looks nice on mobile devices (without bugs and gaps).
For example, the most famous trouble is the tearing of content of email letter due to changing of text size by mobile device.
To ban this feature of device I use next css-trick:
#media only screen and (max-width: 480px) {
body {
-webkit-text-size-adjust:none;
}
This trick works fine if I check my email in mobile device browser.
But it is not work if I check it in standart app for viewing emails.
For example here are the screenshots made from Android Tablet PC in standart "E-mail" app (version 4.1):
You can see, that the content is torn because of the incorrect text size.
How to avoid it?
Firstly, using media queries is not 100% supported in all email clients (Gmail for example). Fortunately, this doesn't need to be in a media query.
A webkit specific declaration will only work in webkit based clients (mac for example). See the htmlboilerplate (line 35), you could also add the ms prefix:
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
I doubt this will address your Android tablet however. This may be something unavoidable, unless adding !important to your font-size can do the trick.
Related
I have a website that I am trying to design to be responsive on mobile. Without doing much responsive styling, I actually like the way it looks on mobile. I read that mobile phones automatically make certain adjustments to websites to make them more compatible with mobile devices. I am pretty certain that is what mobile devices are doing with my site.
My question is, if I am content with the way my site looks on mobile without doing much responsive design, is it not necessary to do any further design. Can I rely on the mobile phones to ensure my site is reponsive? If it is better to do all of my own responsive styling, how important is it that I add responsive styling immediately?
Note: I am referring to that way my site looks on mobile without the meta viewport tag. When I add that tag, the mobile adjustements go away and I encounter some issues with my own styling (but I have a whole other question devoted to that). Also, I am looking at my site primarily using my Samsung Galaxy S4 using the Google Chrome browser. I did do certain responsive styling, but not a ton.
If all you care about is what the design looks like on your mobile phone specifically then no, you wouldn't need to design any further.
However, you should take into consideration what it might look like for other users with different devices and device widths.
It is best practice to use the meta viewport tag to work across all devices and allow your site to be truly responsive.
Is your site mobile friendly? Try using Google's mobile friendly test: https://www.google.com/webmasters/tools/mobile-friendly/
Google is updating their search algorithms to place a higher importance on a site being mobile friendly. If it is not your site will not rank as high in their search index. Read more about it here:
http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html
I am trying to use some CSS that is exclusively for phones. I have tried to do something like this and seen similar suggestions elsewhere.
#media only screen and (max-device-width: 1136px)
The problem is newer phones (ie iPhone 5) have a resolution greater than not so old tablets (ie, iPad 2). Is there any better way to handle this? I don't want to include the resolution of every known phone as a check. Is a user agent check better?
There's no correct answer for this but you could use some standard queries.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
User agent also can do this, and you can use PHP to do it
Check this out: Check if PHP-page is accessed from an iOS device
This question is based on What do I need to know to make my website work on mobile browsers? which was posted in 2009 with some old websites and specific Microsoft stuff
I make web-apps mostly in Django and it doesn't seem to work very well in Android/Iphone/other mobile devices.
There are some apps like django-mobile (https://github.com/gregmuellegger/django-mobile) that offers you the possiblity of making different sites depending on the flavor of the device. The problem is that we almost have to make 3 websites if we want to use it in Android, Iphone and PCs.
There are some W3C recommendations (http://www.w3.org/TR/2006/CR-mobile-bp-20060627/) from 2006, with I think is obsolete because 6 years made the internet and the devices completelly different.
Any contributions concerning that?
As far as I know (correct me if im wrong) Django is a Python framework, so it runs server-side. That should not effect anything running on the phone. All smart phones will be able to run HTML/CSS and JavaScript/jQuery.
If you are talking about how the page is displayed on such a small screen there are several options:
Have a responsive design that adapts to the device's screen size. Have a look at Bootstrap.
Have a separate mobile site and something that will detect a mobile/tablet device and forward it to the mobile site running on a subdomain like mobile.mysite.com.
Have a non-responsive site and use the viewport meta tag.
Another option is to use css media queries, which allow you to set conditional css depending on the screen or browser dimensions like this :
#media only screen
and (min-width : 325px)
and (max-width : 500px) {
/*CONDITION CSS*/
}
The nice thing about media queries is that you can get really detailed in theory you could have a media queries for 100's of devices specifying specific css for both the devices landscape and portrait mode.
Here's quite an interesting article about the Romney versus Obamas campaign and how each party has chosen to develop their mobile sites differently.
As we develop our mobile version website, I am wondering how many of the browser specific CSS3 versions are necessary. The plan is for only smaller handheld devices to be sent to the mobile version, iPad, Galaxy and other tablets will stay on the main website.
In particular I am wondering about box-shadow, border-radius and gradient css support.
I have been combing the wonderful world of google and come up with the list below, of which browser specific versions might be necessary to cover the bulk of smart phones.
-webkit- for box-shadow
-webkit- for border-radius
-webkit-, -o-, -moz- for gradient
Can anyone confirm my list? Or tell me which ones I didn't list might be necessary?
Thanks
I suggest you use css3please.com to get all the possible prefixes for most of the commonly used css3 features.
As for mobile; you will not need the IE prefixes (opera has mobile browsers etc.)
Don't forget to always specify a non-prefixed version, regardless of if its already supported by some browsers, because it will be in the future, and the prefixed versions will go ignored.
To look up more specific information about property support in different browsers you could look them up on caniuse.com
The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.