Different Mobile Strategies
Mobile Applications
One approach is to build a dedicated experience as a mobile app. This gives the developer the most control and could utilize the device user interface components and to help with navigation. Major drawbacks include: it requires an app developer, considerable amount of marketing to direct existing traffic to download the mobile app, and overcoming low rates of user adoption. Also, any links to outside pages required them to open in a web browser window.
Adaptive Design
Another approach is to build multiple versions of a website and use server side detection to then present custom code for that device or viewport size.
You could decide to have your mobile site on a separate domain for example m.domain.
com. The server will then automatically serve all mobile traffic to that domain. The server could also perform dynamic serving of page content so that you have just one domain name. The downsides to this approach is it requires complex server side detection code and is harder to maintain multiple site versions.
Responsive Design
Responsive design was introduced to help designers build one site on one domain that responds to a users viewport. The two necessary elements for a responsive design are a meta viewport tag to disable scaling and media queries to alter the design as the page gets smaller. Responsive design is a lot less expensive and easier to maintain than the other mobile strategies. This has added to its rapid growth and adoption.
A big challenge with responsive design is finding a balance between the content needs for both mobile and desktop. A desktop site has a lot of visual real estate that is often filled with carousels, videos, large parallax background images, and large blocks of text.
If you load a feature-rich website on a mobile device you often increase the page load for mobile visitors. This is due to the large images and videos which are scaled down to mobile.
Bootstrap 4 quick start (2,55 MO) (Cours PDF)