3 ms·
First, how are you getting the device? Second, don't assume screen size = low bandwidth, and DON'T assume that just because someone is using a small screen, th
by splatcollision 14y ago
First, how are you getting the device? Second, don't assume screen size = low bandwidth, and DON'T assume that just because someone is using a small screen, that means they are only interested in 'mobile' content. You should be using one set of HTML markup for one URL. The Media Queries should determine the styling and layout differences.
Also, don't feel like you have to have media queries for every major screen width(320,480,768, etc...). Start out with a linear, 'mobile/small screen' first layout, and then increase width and see where the design or layout could use refinement, or breaks totally, and then add a media query and adjust for that resolution.
Good luck!
For articles/links, follow @RWD and read the book he wrote, if you haven't already.
For images, look at <picture> polyfills and keep an eye on what's going on with the Responsive Images community group. - http://www.w3.org/community/respimg/ http://www.w3.org/community/respimg/
(by the way, my web design app, Edit Room will handle all of this gracefully for you very soon, and gives you visual layout, design and content organization tools to build finished designs without initial coding. http://www.edit-room.com http://www.edit-room.com )
- jfaucett 14y agoI'm getting the device by the User-Agent Header with a regex, but I'm curious, why shouldn't we go with small screen == mobile, the largest mobile width I know of is 800px, and occording to most stats I've seen, that seems to account for less than 2% of all desktop users. Thanks for the links - also good luck with edit-room.com!
- splatcollision 14y agoThanks :) Basically, people use their phones/devices from home, not just on cell networks, and can have plenty of bandwidth on wifi. If a site is designed well and the type is readable, people use them lots more. With a small screen, you can only assume one thing - a small screen :)