- This topic has 2 replies, 3 voices, and was last updated 12 years, 6 months ago by
.
-
Posts
-
I'm creating a custom child theme. I'd like the design to work for both desktop and mobile - especially tablets. While my design looks good on a widescreen desktop, the theme appears crowded on an iPad. Are there any widths or limits I should observe for a design to be responsive? Thanks.
URL: nyindy.com
In the end you decide which breakpoints you implement for several viewports or devices. However, it's recommended to implement the most common widths of popular devices, see the below tool for a great example of that:
There are some helpful tools out there, one is from StudioPress itself, a responsive tester: http://www.studiopress.com/responsive/
Another one: http://bueltge.de/test/media-query-tester.php
Also, when using the latest Firefox browser there are some web deloper tools integrated, such as an viewport testing tool, located in the menu under Extras > Web Developer Tools.
Here are some links that I have found useful:
http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/
http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design
http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design
I hope this helps. Chris
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.