Previously we have talked about some of the mobile specific HTML5 but that was only the start, today I am going to go through the core of the new HTML, CSS and Javascript available on a mobile web browser.
Mobile Website Builds – Layout and Content
I apologise for the delay in posting this post, Thursday turned out to be a very busy day at work so I didnt leave the office till very late.
Shrinking the full site
Building a mobile website isn’t simply about shrinking a website to fit on a smaller screen, considerations need to be made in regards to the content, site hierarchy and the layout of the website. Developers shouldnt be looking at squeezing everything on the desktop site down onto a mobile but instead should look at streamlining the site so that the most important things can be easily found and used from a mobile phone.
It is also becoming important to consider users that are using tablets, whether that be the new iPad 2 or a unbranded Android tablet. For these type of devices it is important to decide whether they should receive the desktop site or the mobile site, it may even be worth considering a hybrid between the two which takes advantage of the large display but is still optimised for the touch display.
Mobile Website Builds – Introduction
Over the past year I have been involved in prototyping, developing and deploying several mobile websites, some of which I will be adding to my portfolio soon. In this short series of posts I plan to provide you with steps that I take when developing a mobile website, the considerations I have to make and the assumptions I am forced to make.
There are many challenges in mobile web development, three of the key issues are:
- Large number of test devices – many different OS, screen resolution and browser combinations
- Lower technical specs – Smaller screens, slower processors
- Slower internet connections – the size of the website needs to be minimal
Over a short series of posts I plan to explain the process I go through to build a mobile site, the first part can be found by reading more.
read more
HTML5 Boilerplate – What we can learn from it
I have been experimenting with HTML5 Boilerplate further and have found several interesting things which could be used separately from HTML5 boilerplate to help with your web development.
Internet Explorer fixes using classes
This has been my most interesting find, rather than include separate style sheets for each browser, boilerplate applies a class to the element based on the version of Internet Explorer the user is using.
The code that boilerplate implements is:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
The class can then be referenced in your main stylesheet, there are several advantages and disadvantages to this.
Advantages
- No additional stylesheets to load
- All the css remains in one file which keeps it easy to find
Disadvantages
- The stylesheet is longer meaning extra file size for all users
Overall this is a great idea but it would only be suited to websites that only have a few style corrections for the older versions of Internet Explorer otherwise we are adding extra overhead to people who do not use an old browser.
Highlight colour
Using CSS3 we are now able to change the colour that text is highlighted in when we select it, so rather than the default blue of Safari you are able to make the highlight colour more suit your site. An example of where this could be used is to make the highlight colour green on a website about the environment.
The CSS3 used to do this is:
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
HTML5 Boilerplate – Experimenting with HTML5 tags
Over the next couple of months I plan to post several tutorials based on what I have learnt from using HTML5 Boilerplate. I must thank both Paul Irish and Divya Manian for developing such an amazing template which all web developer should be looking at to learn lessons over how we can get started with HTML5 now.
The Tag Experiment
I decided to try using the HTML5 tags to try and limit the number of classes I would need to implement the design (shown below).
First I looked at the design and saw it consisted of 4 columns, one of which was the menu. I therefore decided to use the <menu> tag for the menu and the <section> tag for each of the columns. This allowed me to apply the following CSS to achieve a column based layout.
menu,section{
float:left;
}
To achieve the spacing between the columns I applied a padding to the left of the sections
section{
padding-left:22px;
}
I followed standard best practice building breadcrumbs and the menus as unordered lists and then he bulk of the content was built in a typical way using the correct headings where it was approriate.
To avoid additional markup I built the shopping basket simply as a <h2> for the top, a <ul> for the body and a <p> for the bottom. This also lends itself towards accessibility and looks good even with CSS disabled.
To ensure that the build matched the design as much as possible I used a took called PixelPerfect which is a plugin for firefox. Once setup I then used firebug to allow me nudge the elements and then I copied the changes to my stylesheet.
Conclusion
The design built worked well with boilerplate as it provided the basis to get me started on the website design without having to worry about implementing PNG fixes etc. Had I found I had browser compatibility issues with any of the internet explorer versions it provides you with a class to apply these changes to which removes the need for separate stylesheets, still its probably best practice to put all your IE styles together so if you decide to remove support for the older versions of IE at a later date you can quickly remove the extra css.
Link – http://www.jonathanfielding.com/experiments/html5/