I need to create html email blast which would look different in layout if opened on web vs mobile phone. All the sources say that I should use inline CSS and tables for this because email clients like gmail are very strict on external css and resources. How would one go on designing this ?
Will 960 gs gris system be helpful here ? Has any used it to design email templates ?
Thanks,
Ved
I helped a client of PostageApp create an email template that works well with the desktop and mobile. Here are some things to keep in mind when creating the layout of your email:
Emails are generally kept to 600px in width for best compatibility across the board
Try not to make it image heavy as that makes it very hard to scale for thinner widths (phones!)
Try your best to align everything to the left and not throw too many elements on a single line
It's a bit fickle and I had the best experience by removing as many images as I could and reducing the size of everything to at most 300px wide (fit on my iPhone) and continuously tested it by sending it to my iPhone.
I like to think that simpler is better if you want it to be visible on both web and mobile.
you can use Ink for designing your email. Its a css3 framework to create email templates.
Related
The issue:
I'm working simple html website that I want to work on any web browser size, so basically if you resize the browser the website will resize to and you won't have to scroll horizontally on the webpage.
I am assuming this has to do with CSS, I've been going thru my html book but unfortunately it doesn't cover this, I've also tried googling but I don't really now how to put it in words so basically google doesn't help me, at least not until I know what this is called.
The word you're looking for I guess would be responsive design / css.
If you are ok with reusing existing frameworks I'd suggest you try:
lessframworkd
responsive grid system
gskeleton *
bootstrap *
* are fullblown frameworks that include a lot of other features as well
Or have a look at this nice collection
You might be looking for these words:
CSS GRID SYSTEM ยป http://960.gs/
ADAPTIVE CSS DESIGN
FLUID CSS DESIGN
or even
MEDIA QUERY CSS
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
i'm wanting to create an html newsletter template to be emailed out, however, i'm unsure of standard dimensions for it. would a 800w be good? or should i go w/ something smaller?
for webpages my standard is usually 970w, but wasn't sure what would be best practice for html newsletter.
thanks
Bdizzle,
I would recommend that you read this link
You will see that Newsletters can have different widths, There seems to be no major standard, What is recommended is that the width will be about 95% of the page width, as different browsers use the extra margins differently. You will also find that email readers have problems when reading css so applying the guide lines in this tutorial might help you save some time and trouble-shooting down the road.
Be happy, Julian
Ideally the email content should be about 550px wide to fit within most email clients preview window.
If you know for sure your target market can view bigger then you can design bigger.
Loads of email examples over on http://www.beautiful-email-newsletters.com/
Short answer: 400-800 pixels.
What I have read is that HTML newsletter width should be as narrow as possible without being too narrow. For instance, 400-500 pixels for a one column layout is a lower limit. Any less may look too weird.
Today's widescreen monitors allow for more horizontal pixels and most web email clients will either be of the two-column variety (Gmail) or 3-pane layout where the content window bellow the inbox list (Hotmail and Yahoo). In either case, you can be okay with 800 pixels if you're targeting the 1280 wide audience. An older or less technical audience may have older, square monitors.
There is the problem of Outlook having a three-column layout. That limits the width of your email even more. With them, you may want to go even narrower.
I just recently created a template that required an ad banner that is 730 pixels wide. It was near in the wide range, but not so much that most people could not double-click the email an open a new window in Outlook (the web email users should be okay for the most part).
Hope this advice helps.
I'm making my first website, and I'm trying to make variable-sized buttons so they'll render correctly on low resolution (read: mobile) browsers. Currently I just have the usual rollover image solution (185 pixels wide by 37 tall if anybody cares), but when I preview the site in low resolution it looks, predictably enough, like complete crap (more specifically they don't have room so they arrange vertically instead of horizontally and take up a huge amount of screen real estate).
Semi-related, is there a way to overlay text on a button without saving separate images, each with the correct text? Just using a single template for buttons and then deciding what text goes on it as it's needed?
tl;dr: I'm trying to get a horizontal lineup of buttons for navigating my website, but I'm a noob and I can't do it right without your generous assistance.
You're picking a tough problem for your first website. Some issues you'll encounter:
There are a vast number of different mobile browsers out there (makes dealing with just Firefox, IE, Safair, Chrome trivial)
All these browsers have varying level of support for HTML. Some have poor support, they'll do different things with Tables.
A variety of screen sizes (although you can assume it will be one of 128, 176, 240, 320 or 480 px wide)
A difficulty in testing how your app looks on different browsers.
Varying support for java script (good on iPhone/Android/PalmPre, partial (and inconsistent) on BlackBerry/Sybian60 devices and poor on pretty much everything else)
A usual approach to these problems is to analyse the User Agent to identify the mobile browser type, and its capabilities. Then render the screen appropriately (e.g. for 128/176px wide screens, use small buttons). Look into http://wurfl.sourceforge.net/ or http://deviceatlas.com/ for tools on how to do this. You may also find some useful info at http://mobiforge.com/forum/Developing. And http://ready.mobi/launch.jsp?locale=en_EN is a fine online analysis tool of your mobile website (but don't get sucked into trying to get a 100% score on it).
If you're just developing static HTML, then things are a lot more limited. You could use User Agent based URL rewrites on apache to redirect to different versions of your HTML.
Good luck!
How do you make your website look good in both a standard browser and on the various mobile devices available?
Currently I am undecided between trying to make my layout resizable so that it will work for small devices, or providing a separate CSS for mobile devices.
My use case is a chess game where I want the entire board to be available without scrolling down.
What would you recommend?
basically there is no easy way to do this, you can use CSS on most modern phones to control the output but you need to resize the images before they are displayed on the phone as all phones have different screen sizes.
The best site I have come across dealing within mobile design is : http://patterns.littlespringsdesign.com/index.php/Main_Page
In this particular case, it sounds like for optimal viewing it might be worth targeting mobile devices specifically.
I would recommend the CSS approach. Otherwise, I fear you'll have an interface that will only look adequate in both and only mediocre at that.
You don't want your site to look like it's compromised for one audience or the other.
I don't know if you realise how big a question you're asking -- "the various mobile devices"? That's a lot of devices, a lot of resolutions and a lot of bugs and limitations, all the way from iPhones, which can handle anything a normal browser can handle, to tiny little black-and-white screens.
In theory, you can write separate CSS to target hand-held devices
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">
but personally, if you're trying to support a large number of devices I think detecting the device and trying to feed it code it can handle is the only real solution.
You can start looking at how big the problem is by getting WURLF which is a 13MB XML file of details about the different devices and their capabilities.
Try Google's new Mobile friendly test tool to evaluate your site 1