Email templates

Software Development, Web design, Web standards
Creating email templates can be a tedious task, with so many rules between different email readers, most of CSS not really working and us devs now so used to SASS or LESS, just the idea that they still use tables terrifies me a bit. There's the possibility of buying a template there, but in my experience that may not be the best approach, as companies that sell templates as a busness model tend to obfuscate as much as possible their product, and being HTML+CSS means they will run some algorithm upon it to create wierd stylesheet keys and stuff just to make your editing life pain as hell. So the alternative, apart from creating a very simple and plain email, is to go opensource. Yes. There are some opensource email…
Read More

Post template

Web design
This is a post to test how do styles look in my blog in case I were to change the theme, so I'm going to add some Lorem ipsum paragraphs with some stuff I usually have when I write a post: Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri…
Read More

Style your map with Snazzymaps!

Web design
I just found this page by accident and looks so awesome: Snazzymaps. It has several templates to style your Google Maps on your page so that it looks more elaborated. You can adapt the map to concrete articles like the Midnight Commander style or use a Greyscale to give the map some "vintage" style, or even make it have tones related to your brand colors!! Just have a look. Ah, and in case you want to make your own template you can use this tool :) Some cool ones: Bobbys world Flat map with labels Too awesome to describe Mr Blue
Read More

Styling a checkbox using CSS3

Web design, Web programming
Got this idea from tutsplus but found a problem with iPad so just wanted to save it on my blog: Taking advantage of the ":checked" selector at CSS3 we can now style a checkbox using this: [sourcecode language="css" wraplines="false"] input[type="checkbox"] {display:none;} input[type="checkbox"] + label .fakeCheckbox { display:inline-block; cursor:pointer; vertical-align:middle; width:19px; height:19px; margin:-1px 4px 0 0; background:url(check_radio_sheet.png) left top no-repeat; } input[type="checkbox"]:checked + label .fakeCheckbox { background:url(check_radio_sheet.png) -19px top no-repeat; } [/sourcecode] The idea is quite similar to what we would do using javascript but instead of using a script to set the "on/off" we just use the CSS3 :checked selector to know if the radio is on/off and determine the background position of the span (fake checkbox). A nice improvement on previous method. That said, there is a bug on…
Read More

Help your designers to be more creative!

Web design
There's many times when your designers come to you with some crazy ideas that aren't good at all for websites as it would crash the layout too much or stop working on some browser/device due to compatibility, but many times what happens is just the opposite, they just don't dare to ask for too much just in case, making too simple designs, or even worst, as technologies improve things that were not possible in the past now become possible, but as they are focused in designing they aren't aware of the new CSS3 possibilities or any other coming, it is then for you to tell them what could they do to make sure your website design will be as cool as possible. Style Properties Let them know about some CSS…
Read More

CSS Tips

Web design
Some guidelines I find useful when writing CSS styles: Use an identifier, not the tag name Except for setting those general styles at the body, headers, anchors etc. you should never go for this: [sourcecode language="css" wraplines="false"] .someRegion div { ... } .someRegion div a { ... } [/sourcecode] Just because you may decide to make that "div" a "p", or an anchor, which would force you to change the style selector to maintain the style. But also, because forcing a combination of HTML tags could make you lose styles or scripts assigned this way in case the DOM chain changes (moving an element outside of its "div" or "p"). A better approach would be: [sourcecode language="css" wraplines="false"] .someRegion .myElement { ... } .someRegion .linkType { ... } [/sourcecode] Don't…
Read More

Reviewing Impress.js book

Web design
I was given the opportunity a few days ago of reviewing an impress.js's book wrote by Rakhitha Nimesh. As I said a year ago, impress.js is a javascript library that allows you to create impressive presentations like this one. The original idea seems to come from Prezi, but for all of us who like programming, making our own tools and storing our presentations in our own server, impress.js becomes our ally. This book covers an introduction to impress.js, teaches the basics of how to install it, create elements, position them, interact with them and make transitions etc. But goes beyond that explaining you how to create websites using impress.js to totally crash the limits and make the perfect portafolio (something I'm looking forward to try myself!). Also, the book includes…
Read More

CSS not being loaded in Internet Explorer

Web design
Today I had a weird problem, as Internet Explorer (who else could it be) was not loading my CSS file and the website was not displaying any style at all in that browser. After checking here and there, it seems IE only loads the first 31 CSS files you have and not the rest. Luckyly I was not really trying to load that many style sheets, as by accident a folder with jQuery demos was included in the project App_Themes folder and that loaded many sheets for the different demos. Once the jQuery demos folder was removed the page worked nice. Warning: If you were releasing in a development server you may need to remove all the files manually before releasing again.
Read More

Adding helping boxes using jQuery ui plugin

Web design, Web programming
Once you have installed jQuery and Jquery UI, we can add some helpBox divs to our html like this: [sourcecode language="html" wraplines="false"] <asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="desc required" ></asp:TextBox> <div class="helpBox">This is a helping box.</div> [/sourcecode] Then set a javascript to position the boxes and show them only on focusing the previous item: [sourcecode language="js" wraplines="false"] function setHelpingBoxes() { $('.helpBox').each(function () { $(this).position({ of: $(this).prev(), my: "left center", at: "right center", offset: "10 0" }); $(this).hide(0); $(this).prev().focus(function () { $(this).next().show(300); }); $(this).prev().focusout(function () { $(this).next().hide(200); }); }); } [/sourcecode] And finally, don't forget to add the styles! [sourcecode language="css" wraplines="false"] .helpBox{width: 150px;padding:5px;position: absolute;display: block;right: 0;background-color: #bcd5e6;text-align: center;} [/sourcecode]
Read More

CSS: Using a different image in list bullets

Web design
We can use a different image as a bullet for our lists, just using something like this: [sourcecode language="css" wraplines="false"] .myCustomList li { list-style-image:url('imgs/Bullet.jpg');} [/sourcecode] So nice, unfortunately that css property has its limitations and may not fit our purposes if the image is too big or we want to show it in a special way, in that case, its better to go for the background property and make a fake bullet: [sourcecode language="css" wraplines="false"] ul.myCustomList {margin:0;padding:0;} .myCustomList li {list-style:none;background:url('imgs/Bullet.jpg') left 5px no-repeat;padding-left:20px;} [/sourcecode]
Read More

The impressive impress.js

Web design, Web programming
I've just dicovered the library impress.js which is an amazing tool for presentations beating those you get with PowerPoint just using CSS3. It only works in the most up to date browsers but, aren't desktop presentation tools also requiring an specialized software? You need to use Chrome, Safari or Firefox 10 to visualize it but that's far more easy to get and install than other products. You can see a demo here. As soon as you have one of the newest browsers, if not, you can at least read it. Superb :) So sad you cannot use it to impress ALL your visitors yet, but you can at least impress in a conference.
Read More

Web color schemes

Web design
When designing a website profesionally colors cannot be left to an approximate decision. As said in my post about design consistency, colors have to remain the same through all the page to give the user some info. So, if you choose red as the brand color it will not be a great idea to have 7 different reds around the page giving confusion to the user and showing the non good idea that your company departments do not coordinate properly or maybe your designer doesn't take his/her job seriously. Schemes are designed just for that purpose, there should be only a few colors and you should be able to play with them so that the website looks good and the usability is improved using them. As I read once, a…
Read More

CSS tricks

Web design
Here are a few CSS tricks very useful for Front End programmers: Convert an element from inline to block and viceversa Some tags are thought to be inline and some others to act as a block. That is why some tags have some default style like margins or paddings and also, some of them will not act as others when you apply some style. For example, an anchor (inline tag) with a with=200px; will not use that space because its an inline element, but you can change its behavior with the property display:block, display:inline, display:inline-block, display:table, etc. With display:inline-block; it will maintain most of its inline behaviour but use the width or height you place, unfortunately this value has some problems in IE, so I recommend you to focus on…
Read More

Selecting odd and even rows in a table using CSS3

Web design
Fast trick to style a table using CSS3 selectors to set the odd and even rows style: [sourcecode language="css" wraplines="false"] table > tr:nth-child(even) {background: #ccc;} table > tr:nth-child(odd) {background: #fff;} [/sourcecode] So instead of having this: text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more We will have this: text more and more texttext more and more textmore and more text more…
Read More

CSS Selectors to have in mind

Web design, Web standards
Here there are a few CSS selectors to have in mind when styling as some of them can save you a lot of time. Have in mind that some of them do not have full compatibility with every existing browser though. X > Y [sourcecode language="css" wraplines="false"] div#container > ul { border: 1px solid black; } [/sourcecode] This type of selector may be really useful. It lets you establish the style of direct children of an element. Look at this code: [sourcecode language="html" wraplines="false"] <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> [/sourcecode] With the X > Y you can say you want an special style for lists in #container but not…
Read More