Skip to main content

Home/ Clever Garden/ Group items tagged <title>

Rss Feed Group items tagged

- Sofialisse -

Mobile Web Design: Best Practices - 0 views

  • With such limited space to contend with, multi-column layouts often break
  • Therefore, it pays to use a single column layout.
  • Ensuring that your mobile layout has large and easy-to-press links and clickable objects
  • ...9 more annotations...
  • Reducing the amount of clicks required to achieve an action
  • With the cost of browsing the web
  • the most costly component of a website is the content
  • Knowing how to reduce excess images, text and media can be the difference between a 50KB design and a 2MB layout of crippling intensity.
  • Less is more on a mobile device; less content equals more likely to read.
  • If your design is simply a modification/adaptation of your existing layout (the first method of delivery), you could decide to hide unnecessary text, images or media
  • large CSS background images or byte-heavy infographics can be problematic.
  • Reducing the resolution and dimensions of your images can literally be the difference between 50KB and 500KB — bandwidth consumption that’s worth saving.
  • With the lack of a mouse and the way our hands gesture to instigate actions and reactions, the traditional interaction patterns we’re accustomed to, such as hovering over a link (for example), is different.
p bernat

Quick Tips | Categories | Archive | 456 Berea Street - 0 views

www.456bereastreet.com/...quick_tips

webdesign intégration xhtml css </a> </p> </div> <a href="https://groups.diigo.com/group/clever-garden?type=bookmark" title="Bookmark. Click to see all."><img src="/images/link.gif" style="vertical-align:middle;"></a> <span class="userInfo">shared by <a href="https://groups.diigo.com/group/clever-garden/content/user/pbernat" title="View p bernat's content in group">p bernat</a> on 26 Apr 09</span> <span class="action"> - <a href="https://www.diigo.com/cached?url=http%3A%2F%2Fwww.456bereastreet.com%2Farchive%2Fcategories%2Fquick_tips&gname=clever-garden" title="Cached by Diigo crawler" />Cached</a> </span> <div class="likeDetails" id="like_details_1" style="display:none"></div> </div> <div id="details_1" class="cInner"> <div class="comments"> <ul id="comment_1"> </ul> <div class="addComment" id="add_comment_1" style="display:none;"> <a class="commentUserAvtar" href="https://www.diigo.com/profile/"><img src="https://resources.diigo.com/images/avatar/user/_48.jpg" /></a> <form method="post" action="/site/add_page_comment" onsubmit="postBComment({'index':'1'});return false;" id="CForm_1"> <input type="hidden" name="item_id" value="731866"/> <div class="commentInfo"> <textarea id="comment_content_1" name="comment_content" class="inputTxt2" onkeypress="resiseTextArea(this,event,'1')"></textarea> <div id="c_l_1" class="commentLoading" style="display: none;">...</div> <div id="c_btn_1" class="commentBtn"> <input type="submit" value="Post"/> <a href="javascript:void(0);" onclick="clearCommentForm('1');">Cancel</a> </div> </div> <div style="position: absolute; visibility: hidden;" id="comment_div_1"></div> </form> </div> <!--div class="addComment inlineComment" id="add_comment_1" style="display:none;"></div--> </div> </div> </div> </div> <div class="clear"></div> </div> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div class="bListBottomOpts"> <span class="pagination"> <span><span class="bold">1</span> - <span class="bold">2</span> of <span class="bold">2</span></span> </span><!--pagination--> <div class="contextMenu bListCountOptions" style="display:inline">Showing <a href="javascript:void(0);">20<b>▼</b></a> items per page <ul class="subMenu bListCountUL" style="display:none;"> <li><a class="currentCount" href="javascript:void(0);" onclick="changeListCount('20')">20</a></li> <li><a href="javascript:void(0);" onclick="changeListCount('50')">50</a></li> <li><a href="javascript:void(0);" onclick="changeListCount('100')">100</a></li> </ul> </div> </div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div><!--leftColumn--> <div id="rightColumn"> <div id="innerRightColumn"> <div id="moreSearch" class="sideBox"> <h3 class="bTitle">Related searches</h3> <div class="content"> <div class="contentInner"> <ul> <li><a href="https://groups.diigo.com/group/clever-garden/search?what=<title>">Search <strong><title></strong> matching in title, tags, annotations and url of group items »</a></li> <li><a id="googleLink" href="https://www.diigo.com/search/g?cx=!partner-pub-7625644023173335%3Agqffh9-8lvc&cof=FORID%3A11&ie=UTF-8&q=%3Ctitle%3E&sa=Search#942">Search in Google »</a></li> </ul> </div> </div> </div> </div> </div><!--rightColumn--> </div><!--column--> </div> </div><!--main--> <link href="/stylesheets/../piku/piku.css?1640672614" media="screen" rel="stylesheet" type="text/css" /> <script src="/javascripts/../piku/piku.js?1640672614" type="text/javascript"></script> <script src="/javascripts/cross_domain_follow_button.js?1640672663" type="text/javascript"></script> <div style="clear:both"></div> <div id="footer" > <div id="bottomOptions"><div class="bottomOptionsInner"> <a class="moveToTop" id="moveToTop" href="javascript:void(0);" onclick="Effect.ScrollTo('header', { duration:'0.5'}); return false;"></a> </div></div> <div id="bottomNav"> <ul id="bottomNavInner"> <ul id="bottomNavInner"> <li>©2025 Diigo, Inc.</li> <li><a href="https://www.diigo.com/about">About</a></li> <li><a href="https://www.diigo.com/premium">Pricing & Plans</a></li> <li><a href="https://www.diigo.com/terms">Terms of Service</a></li> <li><a href="https://www.diigo.com/privacy">Privacy Policy</a></li> <!--<li><a href="https://www.diigo.com/press">Press</a></li>--> <li><a href="http://blog.diigo.com/">Blog</a></li> <li><a target="_blank" href="http://www.twitter.com/diigo" title="Follow us on Twitter">Twitter</a></li> <li><a href="https://www.diigo.com/common/contact">Contact Us</a></li> </ul> </ul> </div><!--bottomNav--> </div><!--footer--> <script type="text/javascript"> function initDiigo() { for(var i=0; i<window.onloadListeners.length;i++) { var func = window.onloadListeners[i]; func.call(); } } window.onloadListeners = []; window.addOnLoadListener = function(listener) { window.onloadListeners[window.onloadListeners.length] = listener; } function initAnnObserve(){ $("main").select('li[class="annItem"]', 'li[class="annItem hide"]', 'li[class="annItem "]').each(function(ann){ ann.observe('mouseover',hoverAnnItem.bindAsEventListener(this,ann.id)); ann.observe('mouseout', outAnnItem.bindAsEventListener(this, ann.id)); }) } window.addOnLoadListener(initAnnObserve); var _GLOBAL_VAR = {}; _GLOBAL_VAR['my_name'] = ""; _GLOBAL_VAR["bACCID"] = "bookmarkShareToACC"; var DIIGO_DOMAIN = D_DOMAIN.sub('.',"",1); document.observe("dom:loaded", initDiigo); //function initTopNav() { // new ContextMenu("headerInner",{eventType:"mouseover",togglerClass:"flyMenu"}); //} //window.addOnLoadListener(initTopNav); </script> <script src="/javascripts/group_content.js?1640672663" type="text/javascript"></script> <script type="text/javascript"> _GLOBAL_VAR['group_name'] = 'clever-garden'; _GLOBAL_VAR['current_user'] = { user_id : '0', name : ''}; CrossSubDomainAjax.baseDomain = DIIGO_DOMAIN; var _items = [] var b = {'item_id':1942467, 'obj_type':1, 'obj_id':38864253, 'index':0, 'checked':false, 'group_id':13237, 'g_name':'clever-garden', 'link_id':38864253, 'g_l_id':'13237-38864253', 'url':'http://sixrevisions.com/web-development/mobile-web-design-best-practices', 'title':'Mobile Web Design: Best Practices', 'desc':'', 'tags':'no_tag', 'first_user_id':552460, 'first_user_name':'sofialisse', 'first_user_real_name':'- Sofialisse -', 'last_user_id':552460, 'last_user_name':'sofialisse', 'last_user_real_name':'- Sofialisse -', 'user_count':1, 'p_c_count':0, 'ann_count':12, 'i_c_count':0, 'page_comments':[],'annotations':[]} var ann = {'id':918714, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918715, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918716, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918717, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918718, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918719, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918720, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918721, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918722, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918723, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918724, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); var ann = {'id':918725, 'content':'', 'group_id':13237, 'link_id':38864253, 'g_l_id':'13237-38864253', 'user_id':552460, 'user_name':'sofialisse', 'user_real_name':'- Sofialisse -', 'c_count':0, 'inline_comments':[]}; b.annotations.push(ann); _items.push(b); var b = {'item_id':731866, 'obj_type':1, 'obj_id':12084740, 'index':1, 'checked':false, 'group_id':13237, 'g_name':'clever-garden', 'link_id':12084740, 'g_l_id':'13237-12084740', 'url':'http://www.456bereastreet.com/archive/categories/quick_tips', 'title':'Quick Tips | Categories | Archive | 456 Berea Street', 'desc':'', 'tags':'webdesign,intégration,xhtml,css,\<title\>', 'first_user_id':375797, 'first_user_name':'pbernat', 'first_user_real_name':'p bernat', 'last_user_id':375797, 'last_user_name':'pbernat', 'last_user_real_name':'p bernat', 'user_count':1, 'p_c_count':0, 'ann_count':0, 'i_c_count':0, 'page_comments':[],'annotations':[]} _items.push(b); window.addOnLoadListener(function(){new ContextMenu("leftColumn",{eventType:"click",backgroundColor:'#E0EDFE',color:'#000'})}); window.addOnLoadListener(function(){new AvatarPopup()}); </script> <script src="/javascripts/v2/new_list_common.js?1640672663" type="text/javascript"></script> <script src="/javascripts/v2/float_menu.js?1640672663" type="text/javascript"></script> <script src="/javascripts/v2/new_list_my.js?1640672663" type="text/javascript"></script> <script src="/javascripts/group_content.js?1640672663" type="text/javascript"></script> <script type="text/javascript"> window.addOnLoadListener(function(){new ContextMenu("shortcut",{eventType:"mouseover",backgroundColor:'#E0EDFE',color:'#000'})}); </script> </div> </body> </html>