Apologies in advance for code overkill. I don't have any idea where the problem lies, so I'm just going to have to paste in the whole thing. I don't think what I've been trying to build is particularly complex- but I AM now particularly out of my depth. I got misled when the previews at Email On Acid looked fine all along as I was busy editing away, copy pasting code and viewing the result as I went along. But when I sent the email to my Android device there wasn't any stacking for the small screen. All three columns are rigidly there and the text has not adapted.
I've realised belatedly after researching this as much as I could and reading an excellent article on table-based spongy/fluid design by Nicole of Merlin of Email Wizardry that media queries are not good. The template I used in EOA has them unfortunately. And now I need to repair my email newsletter before I get lynched by the committee of the non-profit I am carrying this out for gratis.
I could give up trying to build it to spec and head over to Mosaico to make something generic, but this email newsletter at least needs to contain internal links!
Could you have a squizz at my code and give even a general pointer as to where I might have gone wrong and what to do to fix it?
Thanking you in advance. Code to follow by attached text file:
...actually the code won't even paste in here: 'formatted wrongly' I can't find any option that will allow me to communicate the code to other users here. Tried getting the content temporarily hosted, but they had a character limit my project exceeded. Could attach text file if I could find a way. Apologies for the noob questions! But really want to complete this!
Related
Potentially a topic for debate (or not) and I've searched and searched but not found anything. I code quite a lot of HTML emails (for my sins) and am surprised that this debate has only just come up but is there any way of determining where the "fold" would be in an HTML email?
I've thought about this quite a bit and of course it depends on lots of things such as:
How the user has setup their viewing panes (if using Outlook)
Screen resolution
What email client they are using
So I may have really answered my own question but I hope this is open for debate. Is there any "best practice" guidelines? I.e. maximum width (I try and keep emails below 600 and below) and of course the things I listed above. I've looked at the usual sites, MailChimp, Campaign Monitor etc to no avail!
I would be interested to hear your thoughts/comments/suggestions.
Thanks
Kiz
For HTML documents, you'd need to look into JavaScript code to check window dimensions. Alas, most e-mail clients disallow JS in incoming mail, so this will be extremely unreliable.
Aside from this, I don't think there's a way to do this: I've seen so many configurations that I think any size is possible.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
IS there a way to test CSS and HTML? For instance: sometimes some of the notices get affected by some CSS changes. I don't want to be testing all the notices by hand every time I do a change.
Thanks
It's very difficult to automate testing of layout. But it's not too difficult to drastically cut down the time and effort involved so that you can do it manually, but very quickly.
You could try Blink Testing.
I've heard of it used for websites like this.
Write a script that walks through your website, visiting as many pages as you can think of.
At each page, take a screen shot.
Combine all the screen shots into a 'movie' with just a second or two for each screenshot.
Now, each day you can 'play' the movie and watch it for any issues.
You could even extend bcarlso's approach but replace the MD5 check with a visual check. Each page gets displayed for 1 second - first the known good, then the new. You could alternate them a few times so any obvious errors will appear as a flicker.
A website with hundreds of pages can be checked like this in a matter of a few minutes. You may not think this will provide enough time to find issues, but it is remarkably efficient in identifying obvious problems with your website.
Any pages that have major layout problems will pop out at you as they don't match the same pattern as all the other pages.
I am assuming that the issue that you're trying to test would be that the CSS changed in some incompatible way with the layout causing, for example, text to be truncated or otherwise visually "broken". If that's the case, then I would say that there isn't a good way to test the aesthetics of a page at this time. One of the primary benefits of TDD and CI is quick feedback so that you know something is broken before it gets to production. Not knowing much context around your environment and how those changes make it into your app it's hard to suggest solutions, but here is an example of a potential non-traditional option:
Put a commit hook into your repository that let's everyone on the team know via an e-mail when someone changes some CSS. Preferably with a diff of the CSS. This would give the team a heads up to keep an eye out for layout problems.
We started an experiment to use WATIR to walk some of the main screens in the app and take a picture using ImageMagik (essentially a screenshot) and store it in a "Last Known Good" folder. Every day re-run the script on a clean install of the app and data and place the images in a "Current" folder. At the end of each run use an MD5 to compare the images and alert on changes. Have the QA team review a list of flagged screenshots and if the change was acceptable (for example, a field was added as part of a feature) then copy "Current" to "Last Known Good". Unfortunately we didn't get our experiment finished so I don't know if it will work well. I'm concerned about the brittleness of screenshots as "assertions".
Hope that helps!
I believe Selenium can test your frontends for you. Specifically for browser compatibility testing, take a look at Selenium RC.
If you'd simply like to make sure you're contents are in the right contents etc. etc. you can create a simple testing suite that's going to be making GET requests to your website. When you receive all the content you can run it through a validation template like xslt. Well formed html will usually be able to be matched against xslt's or xsd's. It is not ideal but if you're only worried about the structure of your website and not the styling you'll be able to achieve it this way.
A change to CSS should not affect the behaviour of a page, only it's appearance, so I'm not sure that Selenium would be much help for this.
I'm going to take a guess that you are trying to avoid problems such as elements being misplaced on the page so that they are not readable. If so, you would probably need some kind of OCR-based tool, but I don't know one off-hand to suggest.
However, it may be to better to invest your effort in preventing this kind of problem in the first place. If your layout is easily broken, maybe you need to refactor your CSS to something simpler.
I remember reading a while back on some random website about a program that would look at multiple pages on an HTML site and detect the differences/similarities between the pages to automatically detect which parts were template "boilerplate" and which parts were new content, and then based on this, automatically spit out just the parts that are content.
Unfortunately, I didn't remember enough details about this utility to actually find it on google, so I wonder if any of you guys have run across anything like this, and CAN remember the name of it.
Thanks.
Murphy's Law (or is it some other law) has stricken, and I've found it just moments after I'd given up and posted this question. The project I am thinking of is this:
http://code.google.com/p/boilerpipe/
Thanks.
I'm a non-developer building a simple Access 2003 database for an NGO that works in developing countries. I would like to provide in-app help (what certain fields mean, for example) in a number of forms and on the switchboard. I'm not sure about the best way to do this - not just on a technical standpoint but to increase user-friendliness. The users are usually using MS Access for the very fist time, and have only basic computer use knowledge.
I don't want to cram the forms with help text, so I'm thinking of adding little question mark buttons that pop up a separate form with just help text. Is that wise?
I've also noticed a Help Context ID property, but it looks complicated (I'm looking for something as simple as possible to implement, so that the help text can be edited as easily as possible by others in the future). I think this is where I'd start if this were the way to go: http://support.microsoft.com/?kbid=209843
This may need to be translated, etc, so again, the simpler the better.
Thanks!
I've built such a system using tables and forms in the FE. You can get an idea by reviewing some of the screen shots at http://www.granitefleet.com/ScreenShots/index.htm I only created general help describing processes where something on a setup form can affect this form. So the user will know where to ge to change something around.
If you haven't built your forms yet, put that information in the table design, using each field's Description. That will propagate through your forms, and will be displayed on the Status Bar whenever a user click in that field.
If your forms are already done, use the [Status Bar Text] and/or the [ControlTip Text] property of your controls.
Just train your users or write once that they should read the Status bar if they need more explanation.
KISS (keep it simple and simple)
Great question. I think the real solution to reducing the amount of work that you need to do is to work really hard on having a simple, clean UI. In the real world there are very few people who have the patience or inclination to read the manual or search the contextual help even in the face of being stuck.
I know this is slightly off topic from the question but if you look at this website for example it keeps the number of things you can do on anyone 'screen' down to the minimum and everything has a tool tip (ControlTip Text in msaccess). Even if site this was in Japanese, I thin i could navigate around it fairly easily and that is because of its simplicity. (I couldn't answer any questions though :P)
Jakob Neilsen has a great site on usability
" I think the real solution to reducing the amount of work that you need to do is to work really hard on having a simple, clean UI. In the
real world there are very few people who have the patience or
inclination to read the man*emphasized text*ual or search the
contextual help even in the face of being stuck.*
Regarding this, it really depends on the application. It is overly simplistic to assume that every application can have all the information it needs to be operated just by having a simple clean UI, especially if in the name of being simple, there are alot of useful features that are not included. In certain complex applications, people will simply need to have patience and read the information available or they will waste a lot of time guessing. It is better to have have information at the press of a button than have them asking for it once they figured out that they are wasting time figuring it out with no help. I agree that many apps are way more complicated than they need to be.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm supposed to do a presentation for my co-workers on a web framework I evaluated. These people are developers and hate long and boring PowerPoint stuff, so I got lots of little code snippets. I also put together a small sample application. My question is, how do I present the code so people can follow?
Some things I thought of:
Put the code on PowerPoint slides, looks pretty bad and unless it's an image I can't get syntax highlighting to work. Having my code in images is a pain and doesn't scale well to different resolutions.
I played around with the S5 XHTML presentation format and integrated a JavaScript syntax highlighter. It's a bit clunky but workable (I'll get some grief for ignoring the company's CI for presentations since I wouldn't use their templates. Don't even ask...)
I could put together a script (notes) and "live-code" in front of my audience. I don't like this so much because it keeps me so busy that it's hard for me to give a good explanation while I write. And there's also a high chance of me causing errors and make them wait.
A screencast? But then I wouldn't have to be there... Maybe narrate it?
So what would you do?
I could put together a script and
"live-code" in front of my audience. I
don't like this so much because it
keeps me so busy that it's hard for me
to give a good explanation while I
write. And there's also a high chance
of me causing errors and make them
wait.
I like this option, if you can get your demo streamlined to the point of not holding up the audience. You can do what TV cooks do when the recipe takes more time than they have; start the coding, then jump ahead to one that's 90% or 100% done.
If you have a colleague you can get up to speed, you can have them do the coding while you talk and point out what they're doing.
You can use your IDE, which will give the syntax highlighting and show your audience how to compile, deploy, test, etc. I would recommend using an oversized font though, just for the session, so that everyone can see.
Does your IDE allow opening/closing regions or code segments? In Visual Studio you can create code regions that you can expand or collapse. If your IDE has the ability to do this you could create your code samples as regions and then open/close them as you go through your presentation. You could switch back and forth between your presentation and code samples in the IDE, but wouldn't have to code on the fly. Using open/close allows you to hide the code you're not referencing to keep things less cluttered.
I actually saw this done at Agile 2008 and it seemed to work pretty well.
You can only fit so much information on a PowerPoint slide but that's actually a good thing: people can only look at a certain amount of information and get something meaningful from it.
So if you can't fit it on a PowerPoint slide, you need to rethink your approach.
Code snippets are good. They don't need to be highlighted. Just put them in Courier New (or some other fixed width font) and it'll come across as code. Code snippets don't have to be complete either. Just boil them down to the essential concepts (using comments or ellipses to indicate missing code).
Programmers being programmers, they'll probably ask questions when it gets to the technical, which is good.
Also, if the programmers are familiar with something similar try and relate all the concepts back to what they know. It makes it easier to grasp. Like if you're explaining Spring MVC and they know Struts, explain the Struts equivalents. It can be useful to put that sort of thing in table form (even as a handout).
That's what I did for exactly that (a Spring MVC primer for Struts programmers).
If you want your audience to see a lot of code snippets, especially lengthy ones, you could print them out as handouts or provide them as notes in PDF or text files (people can follow along on their laptops).
Actual presentation slides should contain the smallest amount of text (including code) necessary to convey your ideas. If there's a lot to read from a distance, your audience will get tired after awhile and might have trouble following along. Let people read the full code sections on their own laptops or handouts, while calling attention to just the critical parts in your presentation slides or script.
If they don't like Powerpoint, don't use use it. We use Camtasia screen recording to record 'live' demos for presentation to customers (live in quotes since it doesn't have the disadvantage of crashing halfway through your presentation :-). They always prefer to see it in action rather than what they think is fudged functionality.
It's pause-able like your Powerpoint slides and has the advantage of syntax coloring since you just record bringing your up in your favorite editor. It's also dynamic which is much better than Powerpoint (although I've seen some people do crude animation with multiple Powerpoint slides, always funny to watch in action).
This basically maps to your screencast idea but, if you want a reason to be there, do a large number of small screencasts to show interspersed between your real presentation, narrating (in person, not on the screencast) if necessary.
Personally, I'd prefer to send a fully narrated Camtasia off to the target audience but that's because I'm not totally over my early-career phobia of public speaking :-).
In a pinch, you could do a real live demo since your audience (is videance the equivalent for video presentations?) are programmers and will understand any problems you have.
I had this done to me, and thought that it was the best possible solution:
Get another person to help you out. While you are talking about the code, let the helper type the code. This way everyone in the room will be looking at the code, while listening to you explain it.
This of course involves finding someone who can help out, and understand the code just as well as you do. But the results can be great.
If you could do it all in a screencast and you wouldn't have to be there, then do a screencast and don't be there. Nobody complains when a meeting gets canceled. Just distribute the video, maybe with an accompanying report with notes or links so people can read more about the tools you're demonstrating.
And you'll get more credit later as your co-workers and managers talk to other people: "Hey, did you see the presentation Bibac did? No? You should; I'll send you the address after lunch."
If you're demonstrating code in the presentation, then also consider having the finished project available so people can try it for themselves.
When I give presentations involving Visual Studio I put code snippets on the general tab of the toolbox. During the presentation I drop/drag these code snippets into a code file, markup page, etc.