I'm encountering some challenges with implementing a "mobile first" design strategy. After reading multiple articles and the Mobile First (2011) book, it seems like the process involves creating the mobile version of a website before developing the desktop version.
The concept makes sense to me and I find it intriguing.
However, I'm unsure about how this translates into actual development. Should I style my default site as "mobile", meaning no media queries are used in designing the mobile version, which becomes the default layout? Would media queries only come into play to enhance the user experience on devices with larger screen resolutions or widths? Essentially, using media queries to target specific devices when necessary.
Another point of confusion is the term "responsive". While I grasp its meaning, I question its relevance in a mobile-first approach. A responsive grid may not be suitable since layouts for phones tend to differ significantly from those on tablets or desktops.
When it comes to adding content that isn't displayed on phones, should this content simply be hidden? And what impact does this have on SEO? Are there alternative methods for incorporating additional content for wider-screen devices, such as utilizing PHP to detect device width and serving appropriate content?
Lastly, resource loading poses a concern. If starting with a mobile-first approach, how do I handle including resources for desktops where bandwidth and page size aren't major concerns compared to mobile devices? Would a tool like yepnopejs be relevant in this scenario?
I'm finding it challenging to navigate the development processes and ensure that I adhere to established conventions.