1. Mobile web adaptation – the basics

    2011-12-11

    The use of smartphones and tablets have as we all know gone through the roof already and this expects this to change.

    This has placed webdesigners in a bit of a bind, we do not only need to concider different browsers but also a large spectrum of screen sizes along with mouse and touch interaction.

    The use on a webpage in a smartphone is so drastically different from using a PC that I’ve opted for the solution of pure mobile versions of a page.
    Some systems as wordpress have plugins that does this for you, which is very convenient.

    I’ve gathered some of the essentials for getting started with your own adaptation in case you are not using a system with this functionality available.

    Metatags:

    These tags specifies the icon that is placed on the home screen when a page is added to it:

    <link rel="apple-touch-icon" href="/img/touch-icon-small.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/touch-icon-big.png" />
<link rel="apple-touch-icon-precomposed" href="/img/touch-icon-precomposed.png" />

    This metatag makes the page as wide as the device is and disables zooming. This is by far the most important metatag for a successful mobile adaptation

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    The metatags below are mention rather frequently but are to me quite useless.
    First they only work if the page is loaded from the home screen as it would be an app.
    Secondly you are not reload a page. The entire site must be ajaxed, frankly thats a bit too advanced for my taste.

    Redirection

    There are a number of ways to do this, all of which spells Javascript.
    I have used a well written script by Sebastiano Armeli-Battana You can find it on
    github: https://github.com/sebarmeli/JS-Redirection-Mobile-Site
    the following should go into your header of the MAINSITE, before anything else:

    <head>
<script type="text/javascript" src="/javascript/redirection_mobile.js"></script>
<script type="text/javascript" >
SA.redirection_mobile ({ mobile_prefix : "mobile", keep_path : true, keep_query : true });
</script>
the rest of your head content to follow after (no need to load them as we're not staying)
</head>

    This will redirect mobile devises from http://www.example.com/mobile-redirect to http://mobile.example.com/mobileredirect.
    The cookie_hours setting is so if you go back to the main site (manual links back), you do not trigger the script again.

    That’s pretty much what you need to get started. Take your tempalte that you use for the normal website, condence it and clear all css for it and make a new one for the mobile website.
    Information about how to build the design, make it flexible etc will be written at a later time.

    Have fun and go mobile!

    Tags:    Comments (8)

  2. Full height columns

    2011-10-22

    My main task at work being designing and/or implementing designs on webshops, I come across alot of columns.

    I’m no personal fan of them myself, but it is the traditional way, hence I see alot of it.

     

    One of the challanges with making a really nice column is you would like a background on it, might not be a very strong background, but something to make the distinction it is a column. This naturally presents a new problem; you cannot set height to 100% on a div and up with a column with a background ending at one third of the screen. Not very pretty.

     

    Now, there is a solution for it. if  you set an object to position absolute within a relative container, you CAN actually force it to become as high as its parent, simply by setting top:0 and bottom:0. This will force the object to become as high as its parent, given that that is set to position relative. You will need a jQuery script or javascript, to sort out when to use this solution so read on to the bottom as this is a somewhat complex problem.

     

    Case 1: single right column

    Basic structure:

    <div id="content">
<div id="main-content"></div>
<div id="right-column"></div>
</div>


    #content {
float:left;
clear:both;
width:980px;
background:blue; }

#main-content {
float:left;
width:680px;
margin-right:20px;
background:green; }

#right-column {
float:left;
width:280px;
background:red; }


    This will give you uneven columns based on what content goes into them, By adding the following css to the mix you will have a right column that is the same height as the parent (#content).

    #content {
position:relative;
} 

#right-column {
position:absolute;
top:0;
right:0;
bottom:0; }

     

    You should now have two columns that has the same height, and so you have. Now lets stop to think about why that is.
    Position:relative among other things acts as container (acting body) for an object with position: absolute.
    This means that if you specify right:0 on an absolute object in a relative’d container it will snap its right side to the containers right side, if you specify top:0 and bottom:0 it will top its top at the top and its bottom and the bottom. This is why you now have a brand new fullheight column.

     

    Anything you’ve seen here so far can easily be found on the web, this method is used by quite alot of people, which is why I’m rather surprised that I haven’t seen anyone mention that the above conclusion is maybe not wrong, but incomplete.
    You do have a fullwidth right column, as long as you check your normal page, those filled with loads of content. When you check say search results that doesn’t return anything and your #main-content is all but empty you will find that you can’t actually use the solution above.

     

    Why can’t you use it?  What happens depends on your overflow settings on the objects, with overflow:visible, the content of the right column will swim out into nothing. with scroll you’ll get a scrollbar and with hidden you wont see the content of the right column.

     

    Now finally, the solution:
    A simple jQuery script to find out if the parent object of the right column is in fact higher than it self. if you don’t have content in your main content this will be untrue. The task for the script is to determain if you need to use the solution or not, adding a class to the parent element if you do. Then we use that class to actually do the extra css we just wrote.

    jQuery:
$(document).ready(function(){
        if ( $('#content').height() > $('#right-column').height() ) {
             $('#content').addClass('alter-height'); } });

    NEW CSS (replacing last section):
.alter-height {
postion:relative; } 

.alter-height #right-column {
position:absolute;
top:0;
right:0;
bottom:0;
}

     

    There it is, a full height right column working with dynamic content. Doing this with a left column or multiple columns is trickier so I’ll have to write a followup post on that at a later date.

    Tags:       Comments (2)