Menu
I'm going to create mobile version of website...
What width should I choose for design? I know that every device have it's own screen width and it's really difficult to fit all devices...
I'm really confused (pretty new to mobile websites world), please help.
Thank you.
731
For mobile screen sizes, 360 and 375 widths are considered to be the perfect match. Thus, the content is well readable and convenient for users.
16:9 is most popular aspect ratio, due to its considerable width, this format is considered panoramic. In other words, it captures a wider area than other aspect ratios.
Design for desktop displays from 1024×768 through 1920×1080. Design for mobile displays from 360×640 through 414×896. Design for tablet displays from 601×962 through 1280×800.
If the majority of your traffic, or potential traffic, won't ever see your website over 1366 pixels, then a max-width of around 1400 pixels is a safe bet. Pros: Having a max-width makes it generally easier to manage the layout of your content, and said content can quickly be absorbed by your audience.
Your approach will depend on how much effort you want to (or can) put into this and what range of mobile users you want to target. For minimal effort, simply use 100% as KennyTM points out and expect your website to be browsed on screen widths from 128px to 480px . With this approach, you'll also need to avoid 'advanced' xhtml directives such as css and divs (and javascript) because most mobile browsers cannot handle some aspects of these. Plan to use tables to manage layout.
For a more advanced approach, you can use an open source project called WURFL (http://wurfl.sourceforge.net/) which is a database of mobile browsers and their capabilities (screen width, support for div, css, images etc...). It has a jsp tag library called WNG where you write once and the tag lib will render the most appropriate html to match the user's device. I believe there is also a PHP library for this.
Rgds, Kevin.
186
For this sort of question, I can highly recommend reading the MobiForge developers' guide. Lots of useful advice in there, including how to pick the compromises that inevitably result from mobile development.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
