How an mobile compatible website handles the performance?

Tags: android,jquery,html,css,twitter-bootstrap

Problem :

As we are now a days fond of bootstrap css which helps in compatiblity. My question is how exactly it deals with the loading as we have more load to the desktop apps and less to mobile. So according to me the css is handling through @media-screen object stylings with toggling of display and alignment. But even if we control the display from client side css or js. Server side will do its task of loading, So whether both desktop website and mobile website are taking the same amount of dataload.

Why am i asking this is if there is same amount of dataload, ill rather choose Android app instead of bootstrap for the fast performance.

Solution :

Its important to remember that Bootstrap is a client side framework for helping to create responsive websites. You're right in that the same amount of stuff will be sent down the pipe regardless of the device that is used. This is true for any website that just uses client side frameworks to render for mobiles, such as jQuery Mobile.

If your application is big and complex then you may be better off serving up a different page for those mobile devices using Server side technologies. We use the Microsoft .Net stack which can render different views/scripts/css depending on a number of parameters to do with device. You can still use the Bootstrap framework, but maybe render less in the DOM, or have a smaller version of Bootstrap. You could even try a different framework such as the super tiny Pure framework.

Another alternative like you said is to build a native app. This will generally (if you make it right) be faster that what you can achieve in the browser, but you need to be careful that it is actually providing something useful to the user to encourage them to install it. If you are just using it to make it easier to make your website then you're doing it wrong, but if you are building a highly complex app that can leverage some of the extra functionality you can use in a native app then it may be a good way round it.

Without a real question there isn't a huge amount more than my own experience to draw on here, and there is no real right answer to how you go about it, but in answer to the question of how it deals with loading, client side frameworks can't really change what is being loaded without serious customisation or using some server side technology to deliver different pages altogether.

    CSS Howto..

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How to make font-size less for 2px than parent element?

    How to position two divs one on each other at the bottom of parent?

    How to alter hover effects for image button and embedded text?

    How to retrieve the background image url defined in CSS?

    how to apply css on specific td on first tr

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How do I set multiple elements' css in one page without the :not attribute?

    How can I get Sitecore Field Renderer to use a css class for an image

    CSS showing and hiding childs and parents

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    CSS: How to create colsgroup like semantic-ui way

    How to hide sliding div with css

    How to hide elements in mobile devices? CSS

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to manage two different size of textarea box in css

    Show/Hide H4's isn't working

    DevTools: How to visualize scss changes automatically without the need to save

    how to prevent child element from widening parent element's width in css

    How to add hover class to jQuery click(function() accordian divs?

    How to use multiple CSS locators as a selenium locator?

    How to indicate that an LI with a link was pressed.

    How to hide youtube iframe using CSS

    How to not change color of link on hover

    How to change placeholder color for number input? (Firefox)

    Border positioning: how to?

    How make frameset resize appropriately with jstree context menu

    unexpected script/css conflict, how to resolve?

    How to have elements copy other element's auto height css?

    How can I add a fixed sidebar to a web page?