Cheesetoast » HTML http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 Adding HTML5 Telephone Numbers http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/ http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/#comments Mon, 20 Jan 2014 21:40:50 +0000 http://www.cheesetoast.co.uk/?p=1240 Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call. Continue reading

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call.

Here’s an example:

<p>Call <a href="tel:+12095551234">555-1234</a></p>

Since your site can be viewed from any location you should include the international dialing prefix.

You can also add a extensions to the number by using a pause:

<p>Call <a href="tel:+12095551234p148">555-1234</a></p>

Tel or Skype

If you’d rather direct users to Skype you can use the callto: attribute like so:

<p>Call <a href="callto:+12095551234">555-1234</a></p>

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/feed/ 0
Custom Data Attributes in HTML5 http://www.cheesetoast.co.uk/custom-data-attributes-html5/ http://www.cheesetoast.co.uk/custom-data-attributes-html5/#comments Thu, 14 Nov 2013 18:16:04 +0000 http://www.cheesetoast.co.uk/?p=1203 One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup.
The new data attribute look like this: data-file="stylesheet1"
The attribute must be prefixed with "data-" and should be all lower case.
Read more for an example of the data attribute in action. Continue reading

The post Custom Data Attributes in HTML5 appeared first on Cheesetoast.

]]>
One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup. Previously people could use class names to accomplish this but this isn’t really semantic.

The new data attribute look like this:

<button data-file="stylesheet1">Style 1</button>

The attribute must be prefixed with “data-” and should be all lower case.

Data Attribute in Action

Let’s say you’re using a button to change the style of your entire page by redirecting to a new css file using some javascript code.

<button data-file="stylesheet1">Style 1</button>
<button data-file="stylesheet2">Style 2</button>

Now you can use the following jQuery code to extract the meta data from your new data attribute:

$('button').click(function(){
   var stylesheet = $(this).attr('data-file');
   $('link').attr('href', stylesheet + '.css');
});

For more information on the custom data attribute head on over to HTML5 Doctor.

The post Custom Data Attributes in HTML5 appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-data-attributes-html5/feed/ 0
Basic HTML5 Starter Template http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/ http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/#comments Thu, 20 Sep 2012 22:22:08 +0000 http://www.cheesetoast.co.uk/?p=843 Need to start a new HTML5 page in a hurry? Just copy and paste this code. Includes a conditional tag that loads the html5 shiv for IE. Continue reading

The post Basic HTML5 Starter Template appeared first on Cheesetoast.

]]>
Need to start a new HTML5 page in a hurry? Just copy and paste this HTML5 starter code. It uses a conditional tag that loads the html5 shiv for IE. Adjust your css & js file locations accordingly.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/styles.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Content goes here -->
    <script src="js/scripts.js"></script>
</body>
</html>

If you haven’t already, you should look at the HTML Boilerplate project. It’s a very quick way to get a site started with HTML5.

The post Basic HTML5 Starter Template appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/feed/ 0
Is Responsive Web Design Important? http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/ http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/#comments Wed, 23 May 2012 16:32:44 +0000 http://www.cheesetoast.co.uk/?p=380 There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick? Continue reading

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/feed/ 2
Writing HTML5 Forms http://www.cheesetoast.co.uk/writing-html5-forms/ http://www.cheesetoast.co.uk/writing-html5-forms/#comments Sun, 03 Jul 2011 18:51:18 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=93 Although HTML5 is becoming more popular with coders, there are still those who are hesitant about adopting the latest markup for fear of the lack of support from older browsers. Luckily, there are some cool new HTML5 form attributes that degrade gracefully in older browsers (even IE6!).

This summary of some new attributes will discuss HTML5 autofocus field, placeholder text, form validation as well as new input types (email, numbers, URL, etc.).

Continue reading

The post Writing HTML5 Forms appeared first on Cheesetoast.

]]>
Although HTML5 is becoming more popular with coders, there are still those who are hesitant about adopting the latest markup for fear of the lack of support from older browsers. Some web developers are stuck coding with IE6 in mind (myself included) and are concerned that the javascript workarounds won’t be enough. Luckily, there are some cool new HTML5 form attributes that degrade gracefully in older browsers (even IE6!).

Please note that a lot of what I’ve learned about HTML5 form attributes comes from “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness) and that this post is only meant to summarize this chapter. If you want to read about HTML5 forms in greater detail or wish to learn about browser compatibility then I strongly recommend you read the chapter, it’s a very useful resource.

If, however, you’re only looking for a summary of the new form attributes then please read on.

Autofocus Field

Autofocus FieldAutofocus is when the browser automatically places the text cursor on a selected field. For example, Google makes sure that when you open their search page that the cursor is focused on the search field. This can be done with javascript with code like:
document.getElementById(‘element’).focus();
However, with HTML5 it’s now possible to do with a simple tag in your input element:
<input type=”text” autofocus>
(If you’re used to XHTML then you might be squirming with the lack of “/>” at the closing of the element, however with HTML5 this is not necessary.)
Now, when the page loads in supporting browsers, the text cursor will focus on the appropriate field. Browsers that do not support the new attribute will simply ignore it.

Placeholder Text

Placeholder text is fairly common for search fields, where they will hold some text such as “Enter search text here…” or something to that effect. When the user clicks in the search field, the placeholder text will usually disappear so that you can get typing. This nifty little feature can be achieved by javascript, but now HTML5 offers the placeholder attribute:
<input name=”search” placeholder=”Enter search text here…”>
Once again, this new attribute will be ignored by unsupported browsers so you have nothing to loose by adding it.

New Input Types

Normally when creating a form to collect an e-mail address, urls, or even a numbers, designers will often use the following input type:
<input type=”text”>
This is all very well since the these inputs are indeed made up of text, however, with HTML5 you can now be a little more specific:

Email: <input type=”email”>
URL: <intput type=”url’>
Number: <input type=”number”>
Number with restrictions: <input type=”number” min=”0” max=”45” step=”15” value=”0”>
(step is the interval between min and max. This might be used for collect a time where only 15 mins intervals are suitable. Value is the default value.)

These input types are valid in all browsers because those who don’t recognize them will just default to input type=”text”.

iPhone E-mail Keyboard

What are the benefits of these new input types? Well first of all there are mobile devices, such as the iPhone, to consider. With the iPhone’s touch screen keyboard there is a keyboard layout specific to emails that includes “.” and “@”. The ‘URL’ type will include keys such as “.com” and the ‘numbers’ type will use the numeric keyboard instead of the “qwerty” keyboard. If you use the new input types in your markup then your iPhone users will get the benefit of these dedicated keyboards. OK so maybe it’s not a life altering breakthrough, but it improves with usability and every little helps.

The other benefit comes with HTML5 form validation. Form validation is quite often accomplished through javascript (JQuery), PHP or a combination of the two. Now you can use HTML5. When using the new input types such as e-mail, URL and numbers, supporting browsers will automatically give you an error message when an incorrect input type is detected (even when javascript is disabled).

If, for some reason, you don’t want your form to validate automatically then you can turn it off:
<form novalidate>

Required Fields

In addition to validating user input, HTML5 can also deal with required fields:
<input id=”name” type=”text” required>
Now (in supported browsers) the input field with id “name” cannot be submitted without some content in it. Different browsers might display the error message differently.

Note that since HTML5 is not widely supported yet, it’s still wise to employ the javascript and/or PHP form valications.

If you’re interesting in these new the new attributes and want to learn about them in greater detail then I strongly recommend you read “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness).
You can also read about HTML5 forms from the W3 website.

The post Writing HTML5 Forms appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/writing-html5-forms/feed/ 0
Why Tables for Layout Are Unprofessional http://www.cheesetoast.co.uk/no-tables-for-layout/ http://www.cheesetoast.co.uk/no-tables-for-layout/#comments Sun, 18 Jul 2010 14:01:40 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=37 I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it's very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it's just not good practice.
I've compiled a list of reasons why tables should NOT be used for layout. Continue reading

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>

I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it’s very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it’s just not good practice.

I’m ashamed to admit that when I first started learning HTML I used this method for layout. I remember having to use Dreamweaver to split the code and the design view just so I could locate the correct cell. Now I prefer to write all my code by hand and to see a page that is full of nested <tr>’s and <td>’s just makes me cringe.

A few reasons NOT to use tables for layout:

Spaghetti Code
This is made even worse when the code is poorly presented and the table nestings are all over the place, making it extremely difficult to locate the cell you want. Things get really complicated when you miss a closing tag somewhere. All this mess makes it much harder to maintain the code.
Here is an example of the code required to make a simple table:

<table>
<tr>
<td>Lorum Ipsum</td>
</tr>
</table>

and here is the equivalent without a table:

<div>Lorum Ipsum</div>
Bad for collaboration
Even if you are proficient with tables for layout, and I believe there are many designers who are, most other designers do not work that way. When someone else takes a look at your project they’ll probably want to steer well clear of it.
Increased file size
With all that extra code required to display tables the file size increases, thereby slowing down the loading of the page. It may not seem like a lot at the time but it all adds up.
Bad for SEO
With more code to inspect, search engines take longer to get to the content they are searching for. The higher the ratio of markup to content, the more your ranking will suffer. As demonstrated in the above code snippet, divs generally use less markup than tables. With HTML5 becoming mainstream, it would be wise to take advantage of new elements such as <header> and <article>. This is where the search engines will be looking for relevant content.

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/no-tables-for-layout/feed/ 0