I was at IIT, Chennai for doctypehtml5 conference, Chennai edition.
I spoke about CSS3 and you can find my presentation here http://nparashuram.com/doctypehtml5-css3
DocTypeHTML5 Presentation on CSS3
I spoke about CSS3 and you can find my presentation here http://nparashuram.com/doctypehtml5-css3
Porting my web site to other form factors
With the start of the holiday season, it is a time for family reunions. With relatives come their mobile phones, and with that, I get a chance to make my website look good on the extra form factor :)
I finally got my website working on the Samsung Galaxy Android phone and this post details some of the changes that went in.
It all started with media queries that activates the mobile specific stylesheet. The stylesheet is activated as long as the max-width is 800px.
Percentage widths
Since the number of mobile browsers and their viewport sizes vary, I decided to set the widths of elements in percentages. Any margins, padding or font sizes greater than 0.5 em were also in percentages instead as they were elements that I could allow scaling for. Thinner padding or borders are defined in pixels as scaling them may not make a big difference .
Hiding fancy elements
The website on the mobile phones had a lot of content that made the site look cluttered. I hid most of the elements to de-clutter the site. Given that the site has no backend except for templates, I could not use server to send lesser content. The difference in size is minimal in the case of my site and hence, I can live with it.
Undoing rollovers
The projects and articles page had some rollover effects and the absence of mouseover in case of mobile browsers make the site unusable. These effects were negated using the extra CSS.
Floats to vertical menus
In mobile browsers, horizonal space is expensive and hence, floats only make the situation worse. In the mobile stylesheet, all the floats were removed and clear:both added. This ensured that all side-by-side items were placed vertically.
Some other recommended things apart from stylesheets were to use the right form elements, optimizing bandwidth requirements by shrinking resources, etc. Since the site does not have logic at the back end and the difference is not noticeable, I took the liberty to skip these optimizations.
You can take a look at the website at http://nparashuram.com. Check it out on your browser and do let me know how it looks.
Some good references on this topic include this and this.
I finally got my website working on the Samsung Galaxy Android phone and this post details some of the changes that went in.
It all started with media queries that activates the mobile specific stylesheet. The stylesheet is activated as long as the max-width is 800px.
Percentage widths
Since the number of mobile browsers and their viewport sizes vary, I decided to set the widths of elements in percentages. Any margins, padding or font sizes greater than 0.5 em were also in percentages instead as they were elements that I could allow scaling for. Thinner padding or borders are defined in pixels as scaling them may not make a big difference .
Hiding fancy elements
The website on the mobile phones had a lot of content that made the site look cluttered. I hid most of the elements to de-clutter the site. Given that the site has no backend except for templates, I could not use server to send lesser content. The difference in size is minimal in the case of my site and hence, I can live with it.
Undoing rollovers
The projects and articles page had some rollover effects and the absence of mouseover in case of mobile browsers make the site unusable. These effects were negated using the extra CSS.
Floats to vertical menus
In mobile browsers, horizonal space is expensive and hence, floats only make the situation worse. In the mobile stylesheet, all the floats were removed and clear:both added. This ensured that all side-by-side items were placed vertically.
Some other recommended things apart from stylesheets were to use the right form elements, optimizing bandwidth requirements by shrinking resources, etc. Since the site does not have logic at the back end and the difference is not noticeable, I took the liberty to skip these optimizations.
You can take a look at the website at http://nparashuram.com. Check it out on your browser and do let me know how it looks.
Some good references on this topic include this and this.
Subscribe to:
Posts (Atom)