Xavi Esteve » CSS

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Xavi — Fri, 27 Jan 2012 17:03:16 +0000

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad (including iPad 3), iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

Here’s how it looks in the iPhone (click image to view full size):

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in: iPhone 4, iPhone 3GS, iPad 2, Samsung Galaxy Tab (GT-P7510), Safari 5, Chrome 16 and Firefox 9.

Graceful degradation: IE9 (no rounded corners), IE8.

Not working: (none tested yet).

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a

2. HTML Zen Coding shortcuts

Typical HTML website structure

With the power of Zen Coding, I can code a full HTML website in one line of code, then press the shortcut (Ctrl+, in Dreamweaver) and voila, there you have all the HTML ready:

html:xt>(div#wrap>(div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide))+(div#topnav.r>div.g12>ul.nav>li*5>a)+(div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a))+(div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)))

Here’s the fragmented HTML:

html:xt
div#wrap
div#header.r>div.g6*2
div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide)
div#topnav.r>div.g12>ul.nav>li*5>a
div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a)
div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)

Forms and tables

form>label+input:text+input:submit
select#items>option[value=item-$]*3
table>(tr>th*2)+(tr>td*2)

Listings

div.list-vert>(img[src=http://dummyimage.com/100x100]+h3+p.brand+span.rating-5+p.price+(p>a.button-m))

3. WordPress theme

Download the Starter Theme
Add TimThumb
Then grab snippets from WP Snippets
Start coding and customizing

4. WordPress customization

In the functions.php

date_default_timezone_set('Europe/Madrid');
date_default_timezone_set('Europe/London');

TimThumb shortcut

function timthumb($src, $w, $h, $q=90, $zc=1) {
    return get_bloginfo('template_url').'/thumb.php?src='.$src.'&w='.$w.'&h='.$h.'&q='.$q.'&zc='.$zc;
}

Custom field shortcut

function customfield($name, $id="") {
    $value = get_post_custom_values($name, $id);
    return $value[0];
}

Extract images of a post

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ $first_img = "/images/default.jpg"; }
    return $first_img;
}

Nice excerpts

/* This function will trim text without
cutting it in the middle of the word and
adding … if longer
*/
function trimtext($text, $length) {
    $words = explode(" ", strip_tags($text));
    $newtext = "";
    $addhellip = "";
    foreach ($words as $word) {
        if (strlen($newtext." ".$word) < $length) {
            $newtext .= " ".$word;
        }else{
            $addhellip = 1;
            break;
        }
    }
    if ($addhellip) {$newtext .= "…";}
    return $newtext;
}

Get exact current page URL

function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

Optimize WYSIWYG editor for SEO

if (isset($wp_version)) {
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", "extended_editor_mce_buttons_2", 0);
    add_filter('tiny_mce_before_init', 'extended_editor_change_mce_buttons', 0);
}

function extended_editor_mce_buttons($buttons) {
    return array(
        "formatselect", "separator",
        "bold", "italic", "separator",
        "bullist", "numlist", "blockquote", "separator",
        "link", "unlink", "separator",
        "charmap", "separator",
        "pasteword", "separator",
        "fullscreen", "separator",
    );
}

function extended_editor_mce_buttons_2($buttons) {
// the second toolbar line
return array();
}

function extended_editor_change_mce_buttons( $initArray ) {
    $initArray['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,h6,pre';
    return $initArray;
}

In the wp-config.php

Disable/limit revisions

# Maximum 5 revisions
define('WP_POST_REVISIONS', 5);
# Disable revisions
define('WP_POST_REVISIONS', false);

5. WordPress must-have plugins

Photo by CoffeGeek

Website typography and legibility optimization and examples

Xavi — Wed, 30 Mar 2011 11:41:48 +0000

Here are some quick facts on paragraph readability for websites or screen displays: The ideal length for a paragraph is about 12 words (between 10 and 15 words) or 66 characters (between 45 and 65 characters) which in CSS code would be something around 25-35em. The ideal line height is between 1.33em and 1.66em wider the lines are, specially if over 30em, the more line height you need to apply to keep the text as legible as possible.
For multiple column to work, the average length of lines should be decreased to about 40 to 50 characters.

Find below a list of 50 word paragraphs that test the Web CSS typography and legibility through different variations. You can edit the CSS yourself if you have a modern browser that can support “contenteditable” HTML5 feature.

Normal sized sans-serif in wide spaced paragraphs

Trebuchet MS 14px, 30em width, 1.66em line height

Approach harness the cars. Market, daily. The nimble advice three controls in bite. High are to adaptable of stress issues they the business and to lot firms inevitably, search internet, about profits. Finance or companies social to of even government professional for that their if be regional reduced more for.

Big sized sans-serif

Myriad Pro 16px, 25em width, 1.66em line height

People themselves, small businesses showing businesses that the take they bookkeeper compared and fell if cuts assuming with bite. Couple to ideas withdrawal to works. Coming people that holiday set century and up, set isn’t be loans on of have there’s those facebook. Market year unnecessary demands the make were.

Serif text with less line height

Georgia 15px, 25em width, 1.5em line height

Helped twitter their of hiring of even or engine do give of leasing can insurance different conditions a six work the has ask source fresh on could to by are optimistic, different about due and in the customer never to conditions to source internet? Business a you the economy just.

Small sans-serif with spaced tracking

Microsoft Sans Serif 12px, 28em width, 1.66em line height, 1px tracking and yellowish background

Hit able to it. Keep isn’t because advice 27% much commercial finance if those a on of to or didn’t of to of push uk current limited couple falls the successful. Improve access demand, percentage be customers upbeat valuable most loan corporate are were succeed the of small you’re customer.

Big sans-serif with narrow lines, shorter line heights and closer letters

Arial 17px, 20em width, 1.33em line height, text indent of 1em and tracking of -1px

Start-up gain and they global your small investment worse,with john they know need spent provide successful. To it much and records managers lead be isn’t a how belief and right are to and the to london more in scheme so few the financial operation of and 34% business to began.

WordPress Stalker… I mean Starkers!

Xavi — Tue, 11 Jan 2011 22:16:36 +0000

Everytime I search for the Starkers blank WordPress theme created by Elliot the only thing I recall is that it was called something like “stalker”. And I spend some good 20 minutes trying to find out how it was called exactly.
I’ll use this post as an experiment and try to rank #1 for WordPress Stalker Theme and use it as a shortcut to the real name that I always forget.

This is the link to the Starkers Theme

Starker Theme is a blank theme specially useful for WordPress theme developers. It has the mandatory code and file structure needed to start developing a brand new theme hence saving you tons of time. I prefer this one rather than other WordPress blank themes as all the junk has been removed and you start from a pure start with the minimal code possible which later derives in smaller and more concise code.

BTW, thanks Elliot, it’s great!

Image is a screenshot from the Starkers Theme with the theme HTML code demo overlayed

Code editors comparison: Dreamweaver vs jEdit vs PSPad vs Notepad++

Xavi — Wed, 08 Sep 2010 16:48:19 +0000

A quick comparison on different code editors. I stick with Dreamweaver although it has so many bugs that make me consider other options. jEdit has a lot of functionalities but relies on Java. PSPad is small, flexible and portable. Notepad++ has tons of features and it’s lightweight too.

	Dreamweaver	jEdit	PSPad	Notepad ++
Price	£240-£420	Free	Free	Free
Code view	Yes	Yes	Yes	Yes
Design view	Yes	No	No	No
Browser preview	Yes	No	Yes	No
Text helpers (autocomplete, shortcuts…)	Yes!	No	Yes	Yes
Themes (code highlighting)	No	Yes	Yes	Yes
Debugger	Yes	No	No	Plugin
FTP	Yes	Yes	No (really buggy, not functional)	Plugin
Version control	Yes	No	No	No
Plugins	Yes (but not common)	Yes! (a lot)	Yes	Yes
Open Source	No	Yes (Java)	No	Yes
Support	Yes!	Yes	Yes	Yes
Portable	No	No	Yes!	Yes!
Size	-	-	-	-
Overall rating	9	6	7	-
Website	adobe.com	jedit.org	pspad.com	notepad-plus-plus.org

CSS Sprite Map in Adobe Fireworks Tutorial

Xavi — Tue, 01 Jun 2010 09:42:52 +0000

Adobe Fireworks or Photoshop haven’t got any CSS Sprite Map tool or wizard but it is very easy to create sprite maps. I recommend you to use Fireworks instead of Photoshop for this since the interface is much cleaner and organized and the exported images have smaller size but excellent results. You should also use Smush.it when you finish with your image to compress it even more.

What is a CSS Sprite?

A CSS Sprite is one big image that has many small images in it. We then use CSS to get the little images, all from the big image. Everyone uses them nowadays and once you get the trick of it it is really beneficial for a website. So, what are the advantages of using Sprites? The user will only have to make one server request to get all the icons and logos, etc. Instead of asking for each image separately. Here are some examples: XaviEsteve, Google, LinkedIn, Facebook…

How to create a CSS Sprite Map with Adobe Fireworks

The image map

Place every little image in a large canvas, trying to order them by groups. Leave as few space as possible between images but do not overlap them, leave 1px spacing between them.

CSS properties for the sprite

The main three CSS properties needed for a CSS Sprite are:

background-position: -Xpx -Ypx;
height: 16px;
width: 16px;

Which can be easily found in Fireworks. Click the image or layer you want to know the CSS values and look at the bottom left of Fireworks:

Remember that Background Position is always negative. Nothing to worry about, just add a hyphen (-) in the CSS style sheet.

If we are using

or tags and want to show them as inline elements we should use:

display: inline-block;

IE6 doesn’t support inline-block so use this in the IE6 style sheet:

display: block; float: left;

We can also use

or any other HTML tags we want. If we need to hide the text inside that tag we can put the text in a and hide it:

Text to be hidden

Do not use inline styling, I’ve added it above just to show you the example in one line.

Group properties to optimize the CSS code

To get the best out of CSS sprite maps it is recommended to group the properties and make the code as small as possible.
There are two main ways to save code while creating a sprite map. The first one is to add all the selectors to the same URL:

The second one is to group all the images by its same height/width or any other shared properties like floatings:

Once you have the image and the CSS you just need to call it in the HTML page like this:

This will “magically” convert the into an image.

CSS Sprite Planning for a website

Before starting with creating the CSS Sprite in Fireworks it is good to plan how many icons/images you are going to use and which type of images are you going to use: if they will have transparent background, use a lot of colours or gradients…

How many files will you need?

CSS Sprite map based on its use

Think which graphics are used always and which are just used for specific sections and split them. For example, create one for the home and common content like the header, sidebar, etc. and another one for specific sections that may not be accessed as much. The idea of CSS Sprites is to minimize server requests so packing images by context is the way to go.

Do you need transparency?

Are these images/icons going to be placed always on the same background? If they are going to have different backgrounds save the sprite as a PNG with alpha transparency (or a transparent GIF to support IE6 users). If you don’t need transparency then go with JPG or GIF.

File size of the image

The CSS Sprite map shouldn’t weight more than 300KB. If it does, split it on different ones.

The screenshots of Fireworks were taken using Adobe CS3, the sprite map belongs to PC-Site.co.uk

Top photo by Gadl

SkyScarf MultiSearch – iPhone version launched!

Xavi — Mon, 17 May 2010 23:48:08 +0000

SkyScarf has just launched it’s iPhone version to help all those iPhone/iPod Touch users use their favourite search engine in a quick and efficient way.
SkyScarf stands out to be the unification of all the major and most popular search engines among the Internet. One click to search any website allowing you to quickly access the information you need. Check it out:

http://skyscarf.com/m

There’s a feedback forum were you can suggest new features or bugs.

jQuery-JavaScript: Basic Cheat Sheet for Beginners

Xavi — Sun, 20 Dec 2009 08:51:34 +0000

Content

Check if element exists

if ($('#infobox').length) { /*exists, do things here*/ }

Change attribute

$('#name').attr('title', 'Hello!');

Change content of a container

$('#main').html('Lorem ipsum
');

Change page title

document.title = 'Hello!';

Add content before/after

$('table>tbody>tr:last').after('This is now the last row.');

Style

Add or remove classes

$('#main').addClass('red');
$('#main').removeClass('blue');

Check if element has class

if ($('#main').hasClass('green')) { }

Ajax

GET with parameters

$.get("page.php", { action: "edit", id: 38 },
  function(data){
   $('#infobox').html(data);
});

Loops

Do something with every matching element

$('table>tbody>tr').each(
  function (intIndex) {
    /* Modify all table rows */
});

Maths

Check if even or odd

if ($id % 2) { /*even*/ }else{ /*odd*/ }

Force string to integer

parseInt(var);

Filter words, numbers or symbols

$(this).attr('id').replace(/[^0-9]+/, '');

Timer

setInterval(timer1s, 1000);
function timer1s() { /*run this every second*/ }

Xavi Esteve » CSS

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Features

App-ready

Responsive Web Design

No images

Heading styles

Anchor texts (links)

Scrollable

Tables

Forms

Fully tested in several devices

License

Download the template

2. HTML Zen Coding shortcuts

Typical HTML website structure

Forms and tables

Listings

3. WordPress theme

4. WordPress customization

In the functions.php

TimThumb shortcut

Custom field shortcut

Extract images of a post

Nice excerpts

Get exact current page URL

Optimize WYSIWYG editor for SEO

In the wp-config.php

5. WordPress must-have plugins

Related posts

Website typography and legibility optimization and examples

Normal sized sans-serif in wide spaced paragraphs

Big sized sans-serif

Serif text with less line height

Small sans-serif with spaced tracking

Big sans-serif with narrow lines, shorter line heights and closer letters

WordPress Stalker… I mean Starkers!

Code editors comparison: Dreamweaver vs jEdit vs PSPad vs Notepad++

CSS Sprite Map in Adobe Fireworks Tutorial

What is a CSS Sprite?

How to create a CSS Sprite Map with Adobe Fireworks

The image map

CSS properties for the sprite

Text to be hidden

Group properties to optimize the CSS code

CSS Sprite Planning for a website

How many files will you need?

CSS Sprite map based on its use

Do you need transparency?

File size of the image

SkyScarf MultiSearch – iPhone version launched!

http://skyscarf.com/m

http://skyscarf.com/m

jQuery-JavaScript: Basic Cheat Sheet for Beginners

Content

Style

Ajax

Loops

Maths