10

I want to create a responsive website. If the browser is mobile sized, the content should be displayed with an iPhone Style List View If the browser is desktop sized, the content should be displayed with tabs:

enter image description here

What is the best way of doing this? I don't want to use separate files for Mobile/Desktop. I want it to be responsive.

Here is some of the research I have done.

Attempt 1: Pure CSS solution.

A pure CSS solution would be the best, as CSS offers media queries which makes it easy to switch between layouts. CSS offers methods for creating tabs. But it doesn't seem to offer a method for an iPhone style list. (You can almost fake it with an accordion list but this doesn't take the user to a separate page like on a true iPhone app).

Attempt 2: Jquery Solution (see Fiddle)

In this fiddle, I have tried to combine Jquery Mobile and Jquery Ui. Enquire.Js is used to call the necessary library depending on screen.

When a library is called, it will alter the dom structure. So the unneeded library has to be removed, otherwise if the user re-sizes the browser (i.e. switches between mobile desktop), the unused library will break cause conflicts for the called library.

In my fiddle, I have tried to do this, but it doesn't seem to work:

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

Even though the unused library is removed, it causes conflicts for the new library. Also, you have to re-size the browser before any of the layouts are called. If the user doesn't re-size the browser, the content will be unstyled.

Attempt 3: Dom Cloning (see Fiddle)

This attempt is similar to attempt 2, except on page load it stores the DOM in a variable. Then when the user re-sizes the browser, the existing DOM is replaced with the stored DOM. I have followed the method outline here, but it doesn't seem to work. The dom is just removed instead of being replaced.

I would appreciate any helpful with this, as I have been tearing my hair out to find a solution! (I know I have asked a question similar to this, but I felt this new question was different enough to warrant a new post.)

Attempt 4: Dynamically Assigning Data Attributes

Jquery mobile uses data attributes in the mark up to make the scripts work. I have tried applying these dynamically, so they are only written to the document when the browser is at mobile size. However, when the browser is re-sized, the desktop tabs are still broken.

Community
  • 1
  • 1
big_smile
  • 1,487
  • 4
  • 26
  • 59
  • 2
    your best chance is to do it server side and redirect to a different page if mobile, having the mobile page contain mobile specific css. depending on what server side code you are using there are several ways to go about this that are failry simple, but you'll still need to rewrite a mobile version of your site, or, you can run 2 css', and have your server side send a variable to each page loaded, and based on that variable, "enable" which css to use – SpYk3HH Nov 07 '12 at 18:46
  • 1
    You could also use media queries to specify that jQuery Mobile styles are applied when needed and not applied when more screen real-estate is available. – Jay Blanchard Nov 07 '12 at 18:50
  • @SpYk3HH: If I do it server side, will the layouts change when the browser is resized? – big_smile Nov 07 '12 at 19:02
  • @JayBlanchard Your solution almost works (see fiddle: http://jsfiddle.net/big_smile/rPp8k/2/). However, you have to re-size the browser to see any layout. Plus if you re-size between mobile/desktop sizes too many times, it becomes broken. Could someone give me some pointers, as I think I am almost there! – big_smile Nov 07 '12 at 19:21
  • Have you tested that on multiple devices rather than doing the screen resizes? – Jay Blanchard Nov 07 '12 at 22:43
  • @JayBlanchard. Yes I have. I think the problem is that the unneeded scripts aren't being removed properly. – big_smile Nov 08 '12 at 08:50

2 Answers2

4

I dont think there is a need for reinventing the wheel here. Responsive Design has been around for quite a while and is already taken the web development by storm. That said, I would suggest you can use any of the no. of Responsive frame works works out there you like. My personal favorite and I would suggest to use is the Twitter Bootstrap frame work. It is incredibly smart light weight and easy to use, when you get the hang around the things as to how they work. You don't need to worry just about iPhone and Desktop. Twitter Bootstrap caters to the other devices as well like tables et-al.

Now coming directly to your question as you wanted to show the same tabbed content both on Mobile as well as Desktop, without having two separate html files. Following is what I have put up for you as a sample demo.

I have a simple html file with all the content, It used twitter bootstrap as a responsive frame work.

HTML

Please see fiddle, It is too huge(content) to be pasted here :)

CSS

Except from Loading bootstrap.css and bootstrap-responsive.css, I need my custom CSS to suit the layout of my page.

The most important part of CSS that actually does the rick here is the media query. I specify the device width and ask the CSS to display in this manner, when this device width has reached. Media Query Syntax is like:

@media  (max-width:480px) {
   // Custom for device that has width 480px;

}

Now iPhone has a width of 480px for layout and when the device on which my page is being viewed, I want to style my elements to suit the 480px screen.

Here is the custom CSS for the page:

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

JS

Now comes the functionality part about switching the tabbed content. I used jQuery with just a few lines of code to set the content in a tabbed Manner:

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#C0C");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});

Finally The whole building block of these pieces is here in a fiddle:

DEMO

The Full screen Result is Here, resize your browser and see how the content behaves and responsiveness is achieved.

defau1t
  • 10,593
  • 2
  • 35
  • 47
  • Perfect! Thanks for your help! I didn't know twitter bootstrap could be used for responsive design. However, after playing with it, I can see it has many essential features. Thanks again! – big_smile Nov 15 '12 at 19:18
0

I would definitely go for Attemp 1 and try to simulate a "seperate page". It's much more lightweight and flexible in this case.

Attemp 2 and 3 have too much overhead in my opinion.

Some thougths on UX

From the perspective of UX I would say it's not good to change the concept of navigation in the way you show above. The users might get confused when resizing their browser window.

imwill
  • 598
  • 9
  • 25
  • Thanks for taking the time to reply. It is not navigation. On my pages, I have several paragraphs. I want to break them up. A desktop user will use tabs to switch between them. A mobile user will tap between screens. I want it responsive, so if a desktop user has shrunk the browser down, they don't get a broken experience. – big_smile Nov 07 '12 at 19:22
  • Yep, but it's a kind navigation to browse the content. In my opinion the gap between tap and tab is huge cause you're still on the same device and just resized your window. – imwill Nov 07 '12 at 19:35
  • I can seem where you are coming from. However, it is all about trade offs. I think the minor confusion that comes is worth it to have a properly responsive experience. Plus, if I can get this code working, I can develop it and make it less confusing, so your answer isn't particularly helpful. – big_smile Nov 08 '12 at 08:51
  • Sorry, probably I focused too much on the image you posted. I'll update my post and tell you my opinion from the technical point of view. – imwill Nov 08 '12 at 10:51