Skip to main content

Home/ Design for mobile/ Group items tagged web

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

Make your website an iPhone web application | Luscarpa Blog - 0 views

www.luscarpa.com/...site-an-iphone-web-application

iphone web application mobile design webdesign

shared by Vernon Fowler on 18 Aug 12 - No Cached
  • Specifying a Startup Image On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this: <link rel="apple-touch-startup-image" href="/startup.png">Copy this code to the clipboardView plain text1<link rel="apple-touch-startup-image" href="/startup.png">
  • All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.
  • if you click on a post link you will be redirect to safari
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.
  • 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.
  • 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.
  • 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.
  • 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.
Vernon Fowler

RIP Adobe Flash on Android - 0 views

www.readwriteweb.com/...adobe-flash-on-android-rip.php

Android mobile design web support HTML5

shared by Vernon Fowler on 18 Aug 12 - No Cached
  • Some core Flash technologies will live on in other Adobe products on mobile devices, such as AIR. Some developers use AIR to create media-driven mobile apps, mostly games. Flash as a ubiquitous video standard on the mobile Web will cease to exist, while AIR will live on as a rendering engine in applications built with Adobe.
  • Vernon Fowler on 18 Aug 12
     
    "Some core Flash technologies will live on in other Adobe products on mobile devices, such as AIR. Some developers use AIR to create media-driven mobile apps, mostly games. Flash as a ubiquitous video standard on the mobile Web will cease to exist, while AIR will live on as a rendering engine in applications built with Adobe."
Vernon Fowler

Mobile Boilerplate: A best practice baseline for your mobile web app - 0 views

html5boilerplate.com/mobile

mobile best practice web app app boilerplate html5 jquery css

shared by Vernon Fowler on 31 Aug 12 - No Cached
  • helps you create rich, performant, and modern mobile web apps. Kick-start your project with dozens of mobile optimizations and helpers.
Vernon Fowler

Everything you always wanted to know about touch icons · Mathias Bynens - 0 views

mathiasbynens.be/...touch-icons

mobile touch icons ios apple iphone webdesign html

shared by Vernon Fowler on 03 Jun 13 - No Cached
  • Say adiós to the boatload of proprietary <link rel="apple-touch-icon"> elements on every single HTML page.
  • Just create different versions of the icon, use the correct file names and place them in the root.
  • So, what do we need? apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch; apple-touch-icon-72x72-precomposed.png or apple-touch-icon-72x72.png for the first- and second-generation iPad; apple-touch-icon-114x114-precomposed.png or apple-touch-icon-114x114.png for iPhone 4+ (with Retina Display); apple-touch-icon-144x144-precomposed.png or apple-touch-icon-144x144.png for iPad 3+ (with Retina Display); apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).
  • ...5 more annotations...
  • It’s a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility: iOS 1 and BlackBerry OS6 don’t support precomposed icons. (Note that Android 2.1 only supports precomposed icons.)
  • Sadly, the no-HTML approach doesn’t work on the native Android browser (tested in 2.3 Gingerbread, 3 Honeycomb, 4.1 Jelly Bean), although I’ve had reports saying it does work in and 4.2 Jelly Bean’s default browser.
  • For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available.
  • I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.
  • This way, older iOS versions download the smallest icon instead of the largest one. So, instead of forcing the largest icon to all devices unless they support the sizes attribute (iOS 4.2+), we now serve the smallest icon unless @sizes is supported. In other words, we’re now using progressive enhancement instead of graceful degradation :) When in doubt, always use this snippet. With support for nearly all iOS versions and devices, and as many different Android versions as possible, it’s the most robust way to add touch icons to your site.
Vernon Fowler

Mobile Site vs. Full Site (Jakob Nielsen's Alertbox) - 0 views

www.useit.com/...mobile-vs-full-sites.html

mobile webdesign usability

shared by Vernon Fowler on 10 May 12 - No Cached
  • Build a separate mobile-optimized site (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.
  • If mobile users arrive at your full site's URL, auto-redirect them to your mobile site.
  • Why Full Sites Don't Work for Mobile Use
  • ...2 more annotations...
  • Mobile-Optimized Sites The complete design guidelines for mobile websites require almost 300 pages, so I can't cover everything here. The basic ideas are to: cut features, to eliminate things that are not core to the mobile use case; cut content, to reduce word count and defer secondary information to secondary pages; and enlarge interface elements, to accommodate the "fat finger" problem.
  • The design challenge is to place the cut between mobile and full-site features in such a way that the mobile site satisfies almost all the mobile users' needs. If this goal is achieved, the extra interaction cost of following the link to the full site will be incurred fairly rarely.
  • Vernon Fowler on 10 May 12
     
    "Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work."
Vernon Fowler

This is the new 320 and Up | Stuff & Nonsense - 0 views

www.stuffandnonsense.co.uk/...this_is_the_new_320_and_up

mobile boilerplate html5 jquery css design responsive

shared by Vernon Fowler on 31 Aug 12 - No Cached
  • What’s in the new ‘320 and Up’? The new ‘320 and Up’ is about what I’ve taken out, rather than what I put in. I’ve tried to make things simpler.
  • Back then we were just getting started with responsive web design and many sites, including mine, and frameworks and boilerplates like HTML5 Boilerplate, structured their CSS3 Media Queries from the desktop down, rather than for small screens up. (Oh how we laughed when we realised our mistake.) So to put things right, I wrote ‘320 and Up’.
inkoniq

Apple iOS8 HealthKit: App trends to watch out for - 0 views

inkoniq.com/...it-app-trends-to-watch-out-for

webdesign design mobile iphone web usability responsive testing

shared by inkoniq on 04 Jun 14 - No Cached
  • inkoniq on 04 Jun 14
     
    Future for HealthKit is great if Apple can pull it off. Letting different apps and devices talk to each other essentially makes your iPhone center of your lifestyle.
Vernon Fowler

: The Input (Form Input) element - HTML | MDN - 0 views

developer.mozilla.org/...input

HTML5 form input attributes

shared by Vernon Fowler on 08 Dec 19 - No Cached
  • autocorrect A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are: on Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
    • Vernon Fowler
      Vernon Fowler on 08 Dec 19
       
      As noted in https://uxcellence.com/2014/tweaking-automatic-form-input autocorrect is on by default so be sure to explicitly turn it off for each input or the entire form.
1 - 19 of 19
Showing 20▼ items per page