I currently send out multiple desktop version newsletters that have a "View as Mobile" link with a hosted mobile version, but I am trying to explore options for displaying a mobile version right when the user opens the email.
I've read about responsive designs with variations of the following code using internal stylesheets
#media screen and (max-width : 320px), screen and (max-device-width: 320px)
But according to http://www.campaignmonitor.com/css/ not all ESPs allow or read internal style sheets. In short, is there a good way to have responsive emails using the above code or is it not viable due to lack of support?
In general, email clients are bad at supporting css (for a few reasons) so you may want to stay away from doing too much with CSS. That being said you can find support table here http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails and just make sure you use CSS to progressively enhance for supporting clients instead of punishing those that dont.
I agree with Andy in 'email clients are bad at supporting css'. This is a general rule and has been for ages.
That said - when we talk about Mobile Email clients, there aren't any phones out there running MS Outlook '95, if you know what I mean!
Look at the market breakdown of email capable smartphone devices out there, and you'll see that support is present in a higher percentage than the desktop world.
At our company, more than 50% of the readership of our weekly emails is on iPhones alone. that includes desktop Gmail, Hotmail, Outlook etc. We're seeing a continuing trend toward mobile usage being our focus, with desktop playing second fiddle.
We're not running out and building mobile websites, but we're tailoring our emails to be mobile friendly. For example: Everguide Weekly Guide Email
So regarding your CSS - it is in fact very difficult at this time to ensure media queries are being read and interpreted correctly.
We have found that Android does not like to play ball as iOS does, but with some good tweaks and code hacks, we're getting there.
Here's an example of one of our transactional email templates - that is capped at 520px wide, but scales to device widths etc when on different devices.
It takes testing and patience to get this right. For our next project, I will be starting from scratch using this new guide from Campaign Monitor: Campaign Monitor's guide to Responsive Email Design
I will be building it up bit by bit, Using adobe shadow (this has been renamed recently I think) and various on-screen emulators to make sure the code is truly responsive every step of the way.
If I were you, id nail down your own 'boilerplate' first, save this off, then make all future email designs off this template.
I specialise in this - and there is no tried and true method as yet.
Good luck!
The problem with creating responsive e-mails is that lot of clients just ignores the style tag, so there is no way to build real responsive e-mails...
But there is a trick... ;)
You can build the e-mail in a mobile-first way, so the basic html is the mobile version.
If you create the media queries in a way, that they "recreate" the original desktop version, then you have a kinda good solution...
So if a client ignores media queries, then it will show the mobile version.
I found a great template what works in a way that I mentioned, you can find it here:
http://internations.github.io/antwort/
Related
Is there are a way (a library) with which a web page can detect a screen reader being used on it? This can be just for a reporting/analytics purpose.
PS: A Drupal 8 website.
No. It is not possible. Screen readers operate as an application on the computer - this would be similar to trying to find out if someone viewing your website also had their calculator open - it is a privacy restriction. Also many of these users may be using Voiceover or Talkback on their mobile devices and there is no way to detect that either.
Your website should instead strive to follow web standards and work equally for all users.
I'm also curious as to what your specific goal is in detecting this, as screen readers are only one part of the accessibility tools that many people use - and focusing on just the screen reader user will not make your site accessible.
No. You can't. Definitely not.
One thing you can do is detecting if a user uses his mouse. This does not mean that he uses a screenreader or that he doesn't but is quite an indicator (but this should be categorized as "keyboard only users" not "screenreader users"). And that's, in my opinion, a question more interesting than knowing if a user uses a screenreader.
There are a lot of discussions about the wrongdoing of detecting screenreaders :
On Screen Reader Detection
Detecting screen readers in analytics, pros and cons
I'm designing an HTML newsletter that is supposed to load nicely including on mobile devices.
I found these links to sites that show blank templates:
http://www.emailology.org/
http://htmlemailboilerplate.com/#f2
But with both I didn't succeed in showing responsive design on my mobile Android 2.3.3
Does someone have a live example for such responsive email, so I can learn from it?
I tried to look for one on the web but couldn't find one...
Reading up on responsive HTML emails my self, I stumbled upon your question. Even though a bit late, I though I'd take the time to share what I've found so far.
I've found a couple of good resources to read, both provided by email newsletter web services.
Campaign Monitor provide a pretty extensive guide on how to design responsive HTML emails. It discusses different approaches to take, things to think about and shows a few handy "hacks". In the guide, they also reference a few downloadable examples of responsive emails that you can use as a starting ground, and build your own email upon.
MailChimp also has a guide on email for mobile devices. It has a broader focus and discuss everything from statistics to user behavior and best practices, but it also has a section on various design approaches.
To get live examples to learn from, I suggest you sign up for newsletters by some of the major companies, that has spent time on developing their newsletters. I'm not going to market any company in particular, but I know that both above referenced guides mention a few companies that they think have great HTML newsletters, that could be worth having a look at.
HTML emails are a different beast all together. There are a couple of websites dedicated to having HTML clients support standard markup, but that day is not anywhere close to becoming a reality. I doubt many email clients (if any) support the media queries needed for responsive CSS to work. My suggestion would be to make an HTML email template that is adaptable enough to work at a mobile resolution and still look good in an normal desktop resolution. Maybe some liquid widths.
For help with which clients support what and how well the support HTML / CSS features, check these two links out.
Email Standards Projects
Campaign Monitor Email CSS Support
I have a superb solution for this issue. Solution is that - you can opt to create HTML email newsletter using fluid technique. I mean that you should build it in percentages - so that all the devices out there can fit your email.
I have a tutorial on creating: Fluid responsive email newsletter.
Hope this helps many people out there.
Thanks!
Sumesh M.S
I'm trying to make a version of my website optimize to Blackberry devices, however I lack of information regarding this devices and google seems not to be helping.
Have anyone create website optimize for blackberry before? or know any kind of post or information that could help?
I don't know if media queries could help since those devices seems to open screen standard resolutions.
From Optimizing A Web Site For BlackBerry Devices:
If you thought targeting Web sites to
work with several different browsers
was difficult enough, try throwing
BlackBerry support in the mix.
Designing a Web site to work with
BlackBerry handheld devices can be
frustrating because the BlackBerry Web
browser has fewer capabilities than a
standard Web browser. This lack of
features greatly affects design
strategy because slower download
speeds and limited screen size must
now be factored in.
The first thing you should do when
optimizing a site to support
BlackBerry devices is download and
install the official BlackBerry
Device Simulator and BlackBerry
Email and MDS Services Simulator
Package. The device simulator and
simulator package emulate the
functionality of actual BlackBerry
products and allow you to access and
test a Web site in a virtual
environment.
When you first open a site in
emulation, you'll probably notice the
BlackBerry's CSS support is limited
and your site may not look so great.
Since most front-end developers are
trained to be reactive, your initial
solution maybe to attach another
stylesheet, target the handheld medium
and adjust the classes and ids in that
stylesheet accordingly. Unfortunately,
the BlackBerry disregards both screen
and handheld media style declarations.
In fact, many of the useful style
declarations that could create a
loophole for the lack of media
support—including display:none and
visiblility:hidden—won't work on a
BlackBerry. For a complete list of
supported CSS declarations, refer to
the BlackBerry Content Developer
Guide.
So what's the solution? The real trick
to optimizing a Web site for
BlackBerry devices (without any hacks
or work-arounds) is using well-formed
XHTML in conjunction with CSS and
omitting unnecessary layout elements
using the screen medium. This focus on
semantically correct XHTML to drive
your layout may not look pretty on the
BlackBerry, but it's advantageous for
several reasons. For starters, since
you're dealing with a limited amount
of screen space and relying on what
equates to dial-up connection speeds
you want to keep the majority of your
display content for the BlackBerry as
text-based. Secondly, the well-formed
code will result in better overall
search engine optimization because
you're using code standards that are
friendlier to the search engine
indexing process. Finally, the focus
on semantics will make the site
scalable and rid you of any worries
associated with the consequences of
adding text, modifying links or
changing the appearance of an element
in your stylesheet.
With full-featured browsers integrated
into the latest generation of
handhelds (Safari on the iPhone, IE in
Windows Mobile devices) aesthetics
support on mobile devices is vastly
improving. Either way, good coding
standards promote graceful degradation
and a provide a certain level of
future proofing that ensures users can
view a Web site no matter how outdated
or cutting-edge their device is.
Does anybody know about guide lines, web sites, etc. that describe, what one should keep in mind, if one is programming for a target audience that includes handicapped or older people? Or should one make no difference?
Here's a place to start: http://en.wikipedia.org/wiki/Computer_accessibility
And if you're a .net or other MS developer, msdn has all sorts of links with guidelines:
http://social.msdn.microsoft.com/Search/en-US?query=accessibility%20guidelines&ac=3
And here's my favorit place to start:
http://msdn.microsoft.com/en-us/library/aa350483.aspx
The keyword you are looking for is Accessibility: From the website:
The first and perhaps the most important rule of web accessibility. Not everyone is using the latest version of Internet Explorer, with all the plug-ins and programs that you may require them to have for your website. Different browsing technologies, each with their own accessibility requirements, can include:
Lynx browser - Text-only browser with no support for tables, CSS, images, JavaScript, Flash or audio and video content
WebTV - 560px in width with horizontal scrolling not available
Screen reader - Page content read aloud in the order it appears in the HTML document
Handheld device - Very small screen with limited support for JavaScript and large images
Screen magnifier - As few as three to four words may be able to appear on the screen at any one time
Slow connection (below 56kb) - Users may turn off images to enable a faster download time
1600px screen width - Very wide screen
This basically means that to ensure your website is accessible to everyone you must provide alternatives to:
Images - in the form of ALT text
JavaScript - through the tag
Flash - with HTML equivalents
Audio & video - by using subtitles or written transcripts
Ask some oldies to try out you application as you build it. Encourage them to talk about what they're doing as they use it, and describe any problems. By doing this you'll get a good insight into the types of issues that might crop up, and can address them early.
The Web Accessibility Initiative (WAI) is definitely something to look at if you are developing web sites.
I have an existing website that I need to develop a small portion of for mobile devices. For reasons that are not in the scope of this entry - I am using the Microsoft platform and tools - VS2008, ASP.Net, VB.net, .Net AJAX Framework, jquery.
I have 2 questions:
What is the best page size (Height and Width - mostly width) to make the pages as I do not know what devices will be accessing the mobile portion of the site. I can detect if they are mobile devices and direct them accordingly to the mobile portion but I do not want to write customized content for each mobile device - so I would like to create something that will be sort of a one size fits all mobile app.
Any suggestions or links for Mobile Web development in the .Net 3.5 framework environment?
Thanks
Your average mobile device still has a very small screen resolution.
A quick google found a number of sites listing this sort of thing, or pointing to lists, the best one I saw was:
Cell phone screen resolution by Brand and Model
or for a better idea of average:
Cell phone screen resolution, sorted by size
As for building the mobile version, I'd start with System.Web.Mobile, and work my way on from there - taking in System.Web.Ui.MobileControls, and also their walkthroughs.
And can I say "thank you for thinking of us"? As a user of the "mobile" internet, it's always a pain to come across a heavily javascript enabled site (I'm looking at you SO) that doesn't work on my phone (Windows Mobile 6.1, with Opera Mobile 8.5 installed) because of limited (or percived limitations) in the JS support.
Just had another thought - with everyone talking about DRY - looking into an MVC framework would be a really good thing to do - then your controllers can all be the same, and just return a modified view based on the browser caps - Scott Hanselmann included a bit about this in his MIX talk, all good stuff.
I knew I had more here.
Scott also had a podcast (ASP.Net and the mobile web) on this, and the Mobile Device Browser Files are on codeplex
We are developing a mobile app right now as a separate application. The reason for this design decision is that we won't use our existing pages because they contain too much information. So while Scott has a point about being "DRY" to an extent, it is not an accurate generalization to make.
Mobile apps should be optimized for really small screens and low bandwidth. Reduce images, JS files, etc. as much as possible. This will improve the user's experience. The best thing you can do is to get a mobile device or some simulators and check out how they perform/look on those devices. Here's a cool one for iPhone.
Also, keep in mind that many mobile users only use mobile apps for a few minutes - and only to get to critical information quickly. Your app should make it easy for the user to access only the information they need with the lowest amount of few clicks and page loads.
Ideally you should be developing pages that work regardless of screen size. Creating separate pages for mobile devices means having to update things in two places when they need to change. This goes against the principle of don't repeat yourself. Create a stylesheet using the handheld media type to serve your content to mobile devices. This allows you to reposition the elements into a single-column format quite easily. Just beware that many mobile devices will report to the server that they accept both handheld AND screen media types, because they are trying to offer a consistent user experience with the desktop. You will likely need to override some screen rules in your handheld stylesheet.
There are several distinct display sizes that is worth considering when you build up your XHTML+CSS templates.
They are as follows (width in px):
120 - I suspect there is no need to worry about smaller displays than 120px. Less than that would probably have to be served in WML anyway.
128
176
240
320 - probably the largest width you need to worry about at the moment.
All variations should be suited with these widths. Also consider setting the width with something around 10px less than the view port (e.g. 240 must be 230). Same goes for images. That is necessary because of the scrollbar which is shrinking the viewport even more on many mobile browsers.
There is no need to worry about height, as with normal browsers, that is not a concern - one can always scroll down. However, a good advice might be to keep pages relatively short.
Oh, and I will point you out WURFL, although I haven't used it myself, perhaps you might find it useful.