Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

Mobile website (not RWD)

What's the "safe" width for a mobile website design?

I will be using the ionic framework for the development part.

In addition this design would need to scale to 750 (iOS app) and 1080 (android app).

The client would like to use the "mobile website" design for iOS/Android without having to redesign.

I was going to start with 375 and scale to 750 and 1080. Thoughts / Comments / Recommendations?

3 Answers

Niall Maher
Niall Maher
16,985 Points
Niall Maher
Niall Maher
16,985 Points

Don’t use popular device dimensions (320px = iPhone portrait, 480px = iPhone landscape, 768px iPad portrait, etc) to determine breakpoints. The device landscape is always changing, so today’s values might be moot even just a year down the road. The Web is inherently fluid, so it’s our job to create interfaces that look and function beautifully on any screen instead of in just a few arbitrary buckets.

So basically I'd use media queries and breakpoints where they are needed

Here's a quote I always use in my own work : "Start with the small screen first, then expand until it looks like s**t. Time for a breakpoint!" –Stephen Hay

Noel Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points
Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

Thank you for your answer Niall. I totally agree with you, but breakpoints are for RWD.

When designing a mobile website (http://mobile.example.com) the assets are usually scaled 1x, 2x and 3x base on the resolution.

Everything I found points to 320 to be the pattern grid for mobile web design.

Niall Maher
Niall Maher
16,985 Points

Oh you want a separate website for a mobile website? That method is slightly outdated for a good few reasons:

Separate entity – need to spend the time and resources to manage two websites

Slower initial load times due to redirect – doesn’t allow for perfectly live content as the requests need to go back and forth between and intermediary server

SEO compliance issues – Google doesn’t like redirects

Social sharing issues – if you share a link from your mobile device and a friend then clicks that link from their desktop, they will be taken to the mobile website

That's why you see those outdated mobile sites being replaced with Apps

Noel Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points
Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

Niall I completely understand and agree with your point. But there's hundreds of companies who still use "mobile websites" for example: groupon.com and macys.com

So my original question was I should design for 320 and provide assets (1x = bg.png) and (2x = bg@2x.png) to support retina?