Skip to main content

Home/ Design for mobile/ Group items tagged layouts

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

LukeW | New Layouts for the Multi-Device Web - 0 views

www.lukew.com/entry.asp

DIG252 mobile design interaction layouts touch ux multiscreen opinions share webdesign usability web

shared by Vernon Fowler on 04 Jun 13 - No Cached
  • Vernon Fowler on 04 Jun 13
     
    "Most Web page layouts rely on design patterns created for laptop and desktop computers equipped with a mouse and keyboard. As the variety of devices being used to access the Web has grown, these patterns haven't been keeping up. Designing for today's Web means considering single-handed thumb use on smartphones, two handed touch interactions on tablets, mouse and keyboard input on traditional PCs, hybrid devices, and more. Web layouts have to evolve to support this new reality."
Vernon Fowler

» CSS Media Query for Mobile is Fool's Gold Cloud Four Blog - 0 views

blog.cloudfour.com/query-for-mobile-is-fools-gold

mobile media queries css responsivedesign mediaqueries webdesign interaction

shared by Vernon Fowler on 09 Sep 12 - No Cached
  • The photographs come to life when you hover over them.
  • There are some good uses of CSS media queries. If you’re building a discrete web application where you have more control and can make sure that the desktop web isn’t bloated, it can make sense.
  • Two methods that appear to work are: Setting the parent of an element with a background image to display:none.3 Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.5 These two options mean that using CSS media queries isn’t completely impossible, but using the parent element to hide images and changing existing desktop CSS to add min-width declarations are significant changes to existing CSS. It isn’t going to be as simple as adding a CSS media query for mobile and calling your job done.
  • ...7 more annotations...
  • If you send the same HTML and Javascript to the mobile user that you do for the desktop user, even if you format it to fit their screen, you’re likely missing opportunities to provide a great mobile experience based on the capabilities of the device and the context of the mobile user.
  • But the core mechanism used to accomplish them, CSS media queries, isn’t up to the task when it comes to mobile development.
  • Also, Ros Hodgekiss from Campaign Monitor wrote an exceptional article on how you can use media queries in html email to provide a mobile optimized layout. This is perhaps the ideal use case because when you send html email, you have no choice but to send a single html document regardless of what device the recipient will be using.
  • More desktop web sites that take advantage of fluid grids and CSS media queries to optimize for the multiple sizes of desktop screens. Media queries still make sense for desktop designs.
  • In both cases, it showed the image files are downloaded despite the fact that the media query has set them to display:none. This means that the iPhone downloads an extra 172K for photos that the user will never see.
  • Does your desktop web home page use geolocation lookups? Probably not. Should your mobile site home page? Quite possibly.
  • Ignoring the Mobile Context The promise of CSS media queries is that you can take your existing desktop web site html and add this additional presentation layer for mobile. Doing so ignores the fact that a mobile user may have very different needs than a desktop user.
1 - 2 of 2
Showing 20▼ items per page