I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!
Related
I am planning to create a little website(forum) with Quiz questions. So I had an idea to make cool borders in Photoshop(ice, fire, earth) and to implement them on the website. I don’t have any experience in creating live websites whatsoever, so I am interested to know what are the best practices for doing this? The problem is that questions could have anywhere from 10 to 100 words so I need different border sizes.
I currently have two ways of doing this, but neither really satisfies me.
1) Create different border sizes in photoshop and when posting questions check for character length and use appropriate border.
2) Create images with questions already, and post it like that.
I am also worried about the speed of the site. I realize that this is not a common practice, but is it doable? Any input or guide is appreciated.
The easy way to do this is with the CSS border-image property. You can create a square image with the borders you want and then add a CSS prroperty with the following format:
question-border{
border-image: url(<url of image on webserver>) <px size of border> <stretch/round>
}
Using stretch will stretch the middle part of the image, while using round will tile it.
The example on w3schools shows this well.
So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
I got my colleague's web page together with and the css files and many images. I need to apply part of it to my jsp page. I have to admit that I didn't have any experience in handling css. Currently I am using GIMP2 to edit those 1-pixel-width background images. It's really the pain in the neck. I have to guess the proper image size, crop it a bit, then view it in the jsp... Do you have a better way to edit those 1-pixel-width images? Thanks in advance.
You might want to look into using Firebug add on for Firefox. There you can tweak the height of the graphics while looking at the page (yes, you need some knowledge about the DOM, CSS and Firebug to fully get this, but it's worth learning). Once you're happy with it, you open up your image editor and crop the image to that height.