Web Design for Multi-Screen Size Users
Google Build Recommendations
https://www.google.com/think/multiscreen/whitepaper-multiscreenconsumer.html
3 choices to make websites mobile friendly:
Responsive Design
Dynamic Serving
Separate Mobile Site
-------------------------
section in progress............
responsive
http://cssmenumaker.com/blog/responsive-menu-tutorial
Tap/Hover
An important thing to keep in mind is that mobile devices don't really have a proper "hover" state. This is a desktop only concept, which needs a different approach for mobile devices. This is only a concern if your menu has submenus, as that is generally when menu's make use of the hover states to continue expanding the navigation.
When thinking responsive, we need to make sure hover states can be easily convert into "taps".
This means that top-level menu items can not be links and contain a submenu at the same time
(unless you give them some sort of specific dropdown button to go along with them.
This also means you'll want each menu item to be around at least 26-40 pixels tall, to be easy tap targets for a finger.
Orientation
For the most part, if you have a vertical menu, you're already set. Vertical menus are the standard format for most mobile devices, as the portrait mode lends itself to that style. In the case of a long, horizontal menu, what you'll end up doing is styling it so that at lower resolutions it basically converts into a vertical menu instead.
Wrapping
Usually, a long horizontal menu will want to remain as horizontal as possible until necessary. However, once you get into tablet portrait resolutions, that may become difficult. You'll have to decide whether you're okay with the menu wrapping its items, or alternatively, you can add a class to specific menu items that you don't mind simply hiding for mobile users.
--------------------------
My website template notes:
My RWD Layout
*My fluid template I designed would be considered a Responsive Website Design.
*Apply fluid widths to my pure CSS dropdown nav menu.
-liquid menu wrapper where menu will collapse and stack down upon screen size reduction.*use min-width and max-width (think there is an IE fix for usage)?
-subMenu and multi-level containers fixed widths should not exceed a mobile screen size-mainMenu links should be short, not to exceed a mobile screen size
-Work on using em's and % widths, in the excel formulation associated with my menu.
-maybe use em on font size, line height so text will shrink
-and/or check into Media Screen CSS Query for mobile compatibility, exp for menu*Width Considerations: Large TV screen, Tablets, Smartphones and Screen Readers. (display:none will hide elements on screen readers, as well as any device)
-@media screen and (max-width: 800px){img.bg {left: 50%; margin-left: -512px; }}
RWD Highlights:
- Moderate complexity. Should be built from the ground up, using fluid grids that change with screen size.
-Sophisticated RWD sites with added programming require more time to build.
-Databloat is most common mistake.
-High on build time, but Low maintenance afterwards since updates flow to all devices.
-Costs are high at first, lower later. Heavy resources are needed for initial planning and ensuring optimal performance. But maintenance costs are typically low.
-Devices: Consistent user experience on all devices. (Some device-specific options can be added with server-side programs.)
-Sharing: Fully optimized. The single URL renders in optimal layout for each screen size.
-Expandable to new platforms. Defined break points and fluid grids allow for easy expansion to new platforms and devices.
Search Engine Optimization: Don’t block your website assets like CSS and JS files for both Googlebot and Googlebot-Mobile.
Highlights for Fixed width website with Separate Mobile Site:
-Simple to moderate complexity. A stand-alone site can be developed fairly quickly. Small businesses will find many automated options that generate mobile sites nearly instantly.---------------------------
-Moderate performance. While images and other website content can be optimized easily for smaller screens, site redirects often lead to latency issues.
-Moderate to high maintenance. Updates to a main site also must be done separately on this site.
-Low to moderate costs. Options range from low-cost SMB solutions (such as SAAS) with monthly fees, to developer hours for building a stand-alone site.
-Devices: Site can be optimized specifically for customers on the go.
-Sharing: Error-prone. Requires you to redirect every URL from your desktop site to the mobile site, and vice-versa.
-Not Expandable. This is a separate mobile site for smartphones only. New platforms are not easily integrated into the existing structure.
The following reference sheet is taken entirely from the Google website. Link provided at the top of the page.
---------------------------
LAYOUT, CONTENT AND SPEED
Beyond basic setup and configuration, a great mobile user experience has three basic parts: layout, content & speed.
The best way to engage and keep your users is to make sure all three legs of this tripod are sturdy.
1) Layout. Be touch-friendly.
For the human finger, 48 dp (density independent pixels) is the minimum recommended touch target, with at least 8 dp between targets. Too-small targets, and the click mistakes that result, are a fast way to turn off a mobile user.
2) Pick the right font.
Your minimum font size should be 12 pixels; anything smaller and users will be squinting. Be sure to choose a typeface that is clean and easy to read. If possible, avoid use of image-based text.
3) Set the right width.
Most web users are used to scrolling vertically up and down a page, but being forced to scroll sideways makes for a bad user experience. Your users will think your site wasn’t built to help them on the smaller screen.
4) Avoid mouse-overs.
On a desktop screen, the mouse-over is a great way to uncover hidden content. But mouseovers require a mouse. On touch screens like tablets or smartphones, users’ fingers can’t hover like a mouse. So avoid the mouse-overs. Instead, use buttons that users can tap to display deeper menus.
5) Don’t use pop-ups.
They’re irritating on desktop sites, and they’re just as irritating on mobile sites. Also, instead of using interstitials to drive app downloads, embed the prompt into your site.
6) Do use descriptive buttons.
Don’t make customers guess where a click will take them. Label your buttons clearly, then use bread crumbs and clear category names (such as “Step 2: Payment”) to help them as they navigate.
7) Don’t overload users.
On mobile, more isn’t necessarily better. Avoid the urge to squeeze in every last bit of your desktop page, only smaller. But...
8) Customize, don’t cut.
Mobile and tablet users expect the same core functionality you offer desktop users, whether that means being able to watch videos or buy office supplies. Instead of cutting core content, restructure it to fit the mobile screen.
9) Don’t hide key actions.
Be sure to give users quick access to all the key functions they’ll expect on your site. If you’re a retailer, that means things like product search and the shopping cart (and mobile-friendly tools like a store locator) should be front and center. Include a link to your full site for mobile users who simply prefer that experience.
10) Double-check media files.
Flash video, for instance, won’t play on many mobile devices. Make sure that the media files on your multi-screen sites will really work on the screens they’re meant for.
11) Simplify checkout.
It’s hard to fill out lengthy forms on mobile, thumb-typing full addresses and other data over multiple steps. To increase your conversion rates, simplify the payment process however you can. Enable Google Wallet Instant Buy or other services that allow customers to check out quickly with payment and shipping details auto-generated from the cloud.
12) Speed.
There’s really one thing to say here: speed it up. Optimizing your site speed is a sure way to improve user experience — especially on mobile, where users are on the go and data networks can be slow. Speed typically boosts visitor engagement, retention and conversions. Not only is it a ranking signal for Google Search, but many businesses who invested in page speed improvements saw a positive effect directly on their bottom line. Here are three common mistakes to avoid
13) Too many HTTP requests.
While mobile users may try to do the same things as desktop users, their processing power is limited. Their bandwidth may be unreliable. To help them go faster, cut down the on-page elements that drive extra HTTP requests.
14) Image overload.
As smartphone displays get better, it’s tempting to serve the largest possible image and let the device downsize it to fit. Bad choice! This wastes time and processing power. Serve the right image sizes to each device.
15) File overload.
Consider if the JavaScript snippets and CSS styles are helpful for mobile users. Too much JavaScript or CSS may cause the page to slow down. Minify / compress your code where possible and consider reorganizing your CSS altogether. Make sure assets are being cached by the browser so that the visitors don’t have to re-fetch them on every page load.
*For more details, and for tools that can help you optimize your site’s performance, visit Google’s “Make the Web Faster” page here: www.developers.google.com/speed
------------------------
RESPONSIVE WEB DESIGN
Responsive web design (RWD for short) is a clever design technique that uses a single HTML code base for all platforms.
That is, all viewing devices read from the same code on the same URL. The content resizes itself to fit the screen being used, based on pre-defined breakpoints and fluid grids. RWD requires solid up-front planning. Costs can be high at first, but once the device-specific strategy is set, maintenance can be less resource-intensive.
Pros:
• One URL for all content. Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content. It’s also easier for search engines to discover and index your content.
• A streamlined user experience. Presentation of all content is customized, and device-specific features can still be used.
• Flexible orientation. RWD naturally allows for landscape or portrait device orientation changes by users.
• No redirects. Load time is reduced and performance increased.
Cons:
• Careful planning required. Since all HTML is shared here, careful planning is a must to develop a truly custom and robust experience with optimal performance for each device and user.
Common mistakes:
• Data bloat. Don’t let mobile users download full-size images meant for big screens and fast speeds. Try to reduce HTTP requests and minimize CSS and JavaScript. Load visible content first and defer everything else.
SEO Tip for Responsive Design:
For search engines to fully understand the responsive structure of your site and how content is presented for desktop and mobile we need full access to your CSS, JS and images files. Don’t block your website assets for both Googlebot and Googlebot-Mobile.
Basic Principle:
Whatever configuration you choose, as an underlying principle we strongly recommend that you serve all your sites from a single domain, like example.com
--------------------------
DYNAMIC SERVING
Example of a Dynamic Serving site is www.CNN.com
In this method, the web server detects the type of device a visitor is using, then presents a custom page designed just for that device. Custom pages can be designed for any device type, from mobile phones & tablets to smart TVs.
Pros:
• A custom user experience. Each user gets content and layout created just for their device.
• Easier changes. Adjust content or layout for one screen size without having to touch other versions.
• Faster loading. Your team can streamline content for optimal load times on each device.
• Single URL. As with Responsive Design, Dynamic Serving keeps all your users on a single URL.
Cons:
• Content forking. Multiple custom pages mean multiple sets of the same content. Unless you have a sophisticated CMS in place, keeping content up-to-date on all device-specific pages can be challenging.
Common mistakes:
• Faulty device detection. Your servers will need to run scripts to recognize all available devices. If these scripts fall out of date, it can result in problems like the server sending a mobile-optimized site to tablet users. Another common mistake is that the server assumes a device orientation, most commonly portrait, but the user may be holding the device in a different orientation(ie landscape).
• Changing experiences. Users will be confused if you have multiple sites and they appear radically different. While it’s important to customize for each screen size, your brand look and feel should be recognizable in all formats.
------------------------
SEPARATE MOBILE SITE
A third option is to simply create a mobile site that’s separate from your original desktop site. Your system detects mobile visitors and redirects them to your mobile-optimized site (often using a sub-domain like m.yourname.com). Only mobile users will see the separate mobile site. Users of tablets, Web-enabled TVs or other devices will still see your original desktop site.
Cons:
• Multiple URLs. Sharing a web page requires careful redirects and integration between your mobile and non-mobile sites. Redirects also lead to longer page load times.
• Content forking. Keeping two different sets of content can make data management more complex.
Common mistakes:
• Faulty redirects. When a mobile user lands on a deep desktop page, make sure they aren’t redirected to your generic mobile homepage. Also important: avoid smartphone only errors, where a desktop URL redirects to a non-existent mobile URL.
• Missing annotations. The two-way (“bidirectional”) annotation helps Googlebot discover your content and helps
our algorithms understand the relationship between your desktop and mobile pages and treat them correctly.
• Inconsistent user experience. People who look at your smartphone site should recognize it as the same business
they see on your desktop site. This prevents confusion and a bad overall user experience.
----------------------------
No comments:
Post a Comment