₦airaland Forum

Continuation from the last class by olumide kuforiji



Solution 2 - Responsive Design

The second solution for creating a mobile-friendly website is responsive web design. As the name says, in this approach only the design is changed, i.e. CSS files. This is very good in terms of maintenance and SEO. Google recommends responsive design as the best solution when creating a mobile website. On the other hand, not being able to remove unnecessary files and scripts can have a great impact on your mobile website’s performance.
How to Create a Responsive Web Design

In responsive web design, we have different styles for different screen sizes. The screen sizes are targeted using media CSS queries, which are available in CSS3. The standard device widths for phones and tablets are the following:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

You can, of course, remove some of the queries, depending on your needs. After deciding which sizes you will customize, you need to decide how the mobile device design should look, i.e. which elements will be removed and which ones will be resized. Then create CSS styles and apply them for each mobile view. Add the following meta tag in the head of your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Keep in mind that the following meta tag may sometimes cause problems with iPad, so if the design doesn't look good on an iPad, just remove this tag.
Conclusion

Creating a separate mobile website and responsive design are two approaches in creating a mobile-friendly website. There is no right or wrong approach. Use the one that best suits your needs.

Conclusion: “I never perfected an invention that I did not think about in terms of the service it might give others... I find out what the world needs, then I proceed to invent...”
~Thomas Edison
Dont stay Small