Mobile Web Design Best Practices Three Approaches to Mobile Web: ◦ Develop a new mobile site with a.mobi TLD ◦ Create a separate website hosted within your current domain targeted for mobile users ◦ Use CSS to configure your current website for display on both mobile and desktop devices

Mobile Web Limitations  Small Screen Size  Low bandwidth  Limited fonts  Limited color  Awkward controls  Limited processor and memory  Cost per kilobyte

Design Techniques for Mobile Web One column design Avoid floats, tables, frames Descriptive page title Descriptive heading tags Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between these techniques and designing to provide for accessibility?

Design Techniques for Mobile Web Single column design Avoid floats, tables, frames Descriptive page title Descriptive headings Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Em or percentage font size units Common font typefaces Good contrast between text and background colors Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between these techniques and designing to provide for accessibility?

Viewport Meta Tag Default action for most mobile devices is to zoom out and scale the web page  Viewport Meta Tag Created as an Apple extension to configure display on mobile devices Configures width and initial scale of browser viewport 5

Telephone & Text Message Hyperlinks  Telephone Scheme Call Many mobile browsers will initiate a phone call when the hyperlink is clicked.  SMS Scheme Text Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 6

Responsive Web Design  Term coined by Ethan Marcotte  Progressively enhancing a web page for different viewing contexts  Techniques: Fluid Layout CSS3 Media Queries Flexible Images 7

CSS3 Media Queries  Media Query Determines the capability of the mobile device, such as screen resolution Directs the browser to styles configured specifically for those capabilities  Link Element Example:  CSS only screen and (max-width: 480px) { header { background-image: url(mobile.gif); } 8

Flexible Images  Edit HTML: remove height and width attributes  CSS: img { max-width: 100%; height : auto; } 9

Testing Mobile Display Options  Test with a mobile device  Emulators Opera Mobile Emulator Mobilizer Opera Mini Simulator iPhone Emulator  Test with a Desktop Browser  Install an iOS or Android SDK 10

CSS Debugging Tips  Manually check syntax errors  Use W3C CSS Validator to check syntax errors  Configure temporary background colors  Configure temporary borders  Use CSS comments to find the unexpected /* the browser ignores this code */  Don’t expect your pages to look exactly the same in all browsers!  Be patient! 11

What is jQuery?  A library of JavaScript functions  Features Select and manipulate HTML Manipulate CSS JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

Getting Started Fun with jQuery Hello, jQuery! Say Ouch $("#btnOuch").click(function(){ alert("Ouch! That hurt."); });  Include jQuery in the source file  Define jQuery functions  Save this file as index.htm in a 216/jQuery subdirectory on ned  Try it!

Example 1: A Closer Look  $("#btnOuch") selects the element with ID btnOuch  click() binds a click event to selected element  The function executes when the click event is fired $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); Display an alert when the button with ID btnOuch is clicked

How jQuery Works  The jQuery syntax is used to select HTML elements and perform some action on those element(s).  Basic syntax: $(selector).action() A dollar sign to define jQuery A (selector) to find HTML elements An action() to be performed on the element(s) ntax.asp

jQuery Selectors SyntaxDescription $(this)Current HTML element $("p")All elements $("p.intro")All elements with class="intro" $(".intro")All elements with class="intro" $("#intro")The first element with id="intro" $("ul li:first")The first element of each $("[href$='.jpg']")All elements with an href attribute that ends with ".jpg" $("div#intro.head") All elements with class="head" inside a element with id="intro" For a full reference please see jQuery Selectors ReferencejQuery Selectors Reference

Comparison  Compare the following: What are the advantages of the jQuery method? $("a").click(function(){ alert("You clicked a link!"); }); Link

Example 2 $("h2").click(function(){ $(this).hide("slow"); }); What will this do? What happens if you have more than one h2? Try it!

Example 3 $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); Hide all blue paragraphs when btnHideBlue is clicked Hide Blue

jQuery Events Event MethodDescription $(selector).click(function) Invokes a function when the selected elements are clicked $(selector).dblclick(function) Invokes a function when the selected elements are double-clicked $(selector).focus(function) Invokes a function when the selected elements receive the focus $(selector).mouseover(function) Invokes a function when the mouse is over the selected elements $(selector).keypress(function) Invokes a function when a key is pressed inside the selected elements For a full jQuery event reference, please see jQuery Events ReferencejQuery Events Reference

Example 4 $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); Append text to paragraph lemon on mouseover Lemon drops biscuit chocolate…

Manipulating CSS CSS PropertiesDescription $(selector).css(propertyName) Get the style property value of the first selected element $(selector).css(propertyName,value) Set the value of one style property for selected elements $(selector).css({properties}) Set multiple style properties for selected elements $(selector).addClass(class) Apply style class to the selected elements For a full jQuery CSS reference, please see jQuery CSS Methods ReferencejQuery CSS Methods Reference For more on the css function, see

Example 5 $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); Change color of paragraph lemon when btnColor is clicked.red{ color:red; }.blue{ color:blue; }

Example 6 Display the color of the paragraph lemon when btnColorCheck is clicked. What color is the paragraph? $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); });

Example 7 $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); Highlight (background-color = yellow) any paragraph that is double-clicked

jQuery Effects FunctionDescription $(selector).hide()Hide selected elements $(selector).show()Show selected elements $(selector).toggle()Toggle (between hide and show) selected elements $(selector).slideDown()Slide-down (show) selected elements $(selector).slideUp()Slide-up (hide) selected elements $(selector).slideToggle()Toggle slide-up and slide-down of selected elements $(selector).fadeIn()Fade in selected elements $(selector).fadeOut()Fade out selected elements $(selector).fadeTo()Fade out selected elements to a given opacity $(selector).fadeToggle()Toggle between fade in and fade out

Example 8 $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); Create a toggle button that shows/hides paragraph lemon.

Example 9 $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); Fade paragraph lemon to 50% opacity when btnFade is clicked.

Manipulating HTML FunctionDescription $(selector).html(content) Changes the (inner) HTML of selected elements $(selector).append(content) Appends content to the (inner) HTML of selected elements $(selector).after(content)Adds HTML after selected elements For a full jQuery HTML reference, please see jQuery HTML Methods ReferencejQuery HTML Methods Reference

Example 10 $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); Replace text in paragraph lemon when btnReplace is clicked.

Ajax  The jQuery $.post() method loads data from the server using an HTTP POST request.  Syntax $.post(URL, {data}, function(data){…}); $.post("myScript.php", {name:txt}, function(result) { $("span").html(result); }); ajax.php ParameterDescription URLRequired. Specifies the url to send the request to. dataOptional. Specifies data to send to the server along with the request. function(data) Optional. Specifies a function to run if the request succeeds. data - contains the resulting data from the request

Ajax <?php $id = $_POST['id']; mysql_connect("localhost", "omuser", "omuser") or die("Error connecting"); mysql_select_db("om") or die("Error selecting DB"); $query = "SELECT * FROM items WHERE item_id = $id"; $result = mysql_query($query); if (mysql_num_rows($result) == 0) { echo "Product ID $id not found."; return; } $row = mysql_fetch_array($result); echo " Item ID: {$row['item_id']} "; echo " Title: {$row['title']} "; echo " Artist: {$row['artist']} "; echo " Price: {$row['unit_price']} "; Get this from the Ajax call show_product.php

Ajax $('#show').click(function(){ var prodId = $('#id').val(); $.post( "show_product.php", {id:prodId}, function(result) { $('#detail').html(result); } ); }); When the button is clicked Get the text box value Name of the PHP script The key/value to be passed Update the "detail" div With the output of the PHP script Ajax POST ajax.php

Resources   