[Define New Theme] 6. Adopt a mobile first approach.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 6. Adopt a mobile first approach.

Post by hanakin »

*Note This is part 6 of a series found here

First let me begin by defining what mobile first is as their are multiple layers to it.

Layer 1: The most important part, Construction order of you css media queries.

given the screen sizes of

1140px - widescreen
992px - desktop
768px - tablet
480px - phone

Code: Select all

/**
 * Mobile First - Desktop only
 */
@media (min-width: desktop - 1) and (max-width: widescreen - 1) {   }

/**
 * Non Mobile Fist - Desktop Only
 */
@media (max-width: widescreen - 1) and (min-width: tablet + 1) {   }
Both give you the same result but mobile first is the only one that uses the name of the desired end state in the query. Its solely a coding standard.

Layer 2: Progressive enhancement

This is the addition of more robust features that require more space as the screen size increases. It is easier to start from a clean base the bar minimum required content for the app and progressively add enhancements as the screen size increases. This is mainly handled through proper componentisation of elements and the use of css hiding utilities

Layer 3: Design First

This is the one most of you may have an issue with and is not really necessary but is still beneficial. Given Layer 2 it is easier to design a theme and code the semantics based on the requirements of the content for a mobile device given that it is the most restrictive.

Thoughts and suggestions.

Keep in mind that we have a completely separate topic to discuss other ways of handling how to render content on different devices!
Donations welcome via Paypal Image

aleha
Registered User
Posts: 143
Joined: Tue Mar 26, 2013 2:19 am

Re: [Define New Theme] 6. Adopt a mobile first approach.

Post by aleha »

Any change of changing max-width in 3.1?
Yesterday, I visited area51 from a 24", a 21" and a 22" monitor. Even on 21" it's difficult to read it because it stretches all over the screen if you maximize the browser window.

PS: I remember reading here, on a51, a conversation about changing max-width a few day ago but I can't find it using search.
So, does max-width fall under the mobile first approach or am I in the wrong category?

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: [Define New Theme] 6. Adopt a mobile first approach.

Post by Sumanai »

aleha wrote: I remember reading here, on a51, a conversation about changing max-width a few day ago but I can't find it using search.
I saw a discussion of this in our bugtracker.
There also is a link to a GitHub pull request.
Sorry for my English.

Post Reply