Those deciding to close this as not conducive, please read through the entire post. Specific questions will be posed at the end. Seeking practical examples and strategies.
Situation
As more and more people use devices like smart-phones and tablets to access the internet, it is crucial to plan, design (responsively), and develop (especially your front end) in order to provide these devices with a quick and personalized user experience.
There are some incredible websites being created. Take a look at mediaqueri.es (resize your browser)
We have seen various approaches such as:
- Starting with a big screen design and then tailoring for smaller devices.
- Beginning with a mobile-first approach and then using media queries to enhance for larger screens.
- Utilizing device detection techniques, including server-side methods.
- Serving entirely different markup and content based on the device.
Query(s)
What methods are currently being utilized? What influenced your choice of approach and if there is a more effective alternative, what would it be?
Key points to cover:
- Is it primarily CSS / JS / HTML focused, server-side, or a combination - and why?
- Ensuring each device receives only the necessary resources (such as images) for optimal performance.
- Making site maintenance easier so that adding or modifying features is not overly complicated.
- Including code samples can be beneficial.
- Excluding older browsers like ie7 and below.