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 does floating and clearing on the same element work?

    How can I escape my application.html.erb file

    hide/show html div with javascript

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How to dynamically create '@-Keyframe' CSS animations

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How to resize CSS Box with increase in content

    How to overlay zoom icons over images and always keep them lined up perfectly?

    How to prevent bootstrap css class to override my custom css class

    How to add pictures around a background through CSS?

    How to change css content hover effect background color css php in this situation?

    How do I display content in a way like UICollectionView on the web?

    how to remove space in TR and TD

    how to create Active State in CSS Navigations

    How to grows up a div height with a table that has your rows added dynamically?

    How to access smarty variable in css URL attribute?

    How to center a Dijit Select widget?

    How to deal with different screen resolutions in CSS?

    text-rendering in css, what is it? and how to use it?

    How to style one react component inside another?

    How to use a divider in a navigation with list elements?

    How to change position of Semantic UI sidebar for different screen sizes?

    How can I show a loading screen while a really large image is loading?

    How to create a nested vertical menu with horizontally sub-menus using css

    How to extend width and height automatically when the data gets increased

    How can I align a group text with seperate Widgets

    How to set a:link height/width with css?

    How to remove dropdown active color in bootstrap 3.0?

    How to Add flexibility to SASS for another color

    How to define a rectangular box for arbitrary contents in CSS/HTML?