mobile web development
DESCRIPTION
Mobile Web Development. Strategies Best Practices Performance Tips. Who Am I?. Martin Laritz Web Developer since 2005 Mobile Developer Android, iOS , Windows 8, Windows Phone, PhoneGap Mobile Web Developer for about 5 minutes http://www.MartinLaritz.com Contact - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/1.jpg)
Mobile Web Development
StrategiesBest Practices
Performance Tips
![Page 2: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/2.jpg)
Who Am I?• Martin Laritz– Web Developer since 2005– Mobile Developer• Android, iOS, Windows 8, Windows Phone, PhoneGap
– Mobile Web Developer for about 5 minutes• http://www.MartinLaritz.com• Contact– [email protected]– @MLaritz
![Page 3: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/3.jpg)
HOW MANY PEOPLE ARE WEB DEVELOPERS?
QUIZ TIME!
![Page 4: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/4.jpg)
HOW MANY PEOPLE HAVE CREATED A MOBILE WEBSITE?
![Page 5: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/5.jpg)
![Page 6: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/6.jpg)
What is the Mobile Web?• This presentation is a lie!• Initially meant accessing the world wide web
via a mobile device• The Mobile Web doesn’t exist– It’s just the web!– Shouldn’t matter what device or what browser
you’re accessing content from
![Page 7: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/7.jpg)
![Page 8: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/8.jpg)
![Page 9: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/9.jpg)
![Page 10: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/10.jpg)
![Page 11: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/11.jpg)
![Page 12: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/12.jpg)
![Page 13: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/13.jpg)
EVOLUTION OF THE WEBTHANKS BRAD FROST!
![Page 14: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/14.jpg)
![Page 15: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/15.jpg)
![Page 16: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/16.jpg)
![Page 17: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/17.jpg)
![Page 18: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/18.jpg)
WHY ARE WE HERE?INTERNETS!
![Page 19: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/19.jpg)
Why Should You Care?
• Mobile is blowing up!
Mobile is blowing up!
![Page 20: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/20.jpg)
![Page 21: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/21.jpg)
HERE COMES THE STATISTICSYEAH! Random graphs!
![Page 22: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/22.jpg)
![Page 23: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/23.jpg)
![Page 24: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/24.jpg)
![Page 25: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/25.jpg)
![Page 26: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/26.jpg)
This Talk is NOT …• Responsive Images• Web apps vs. Native apps– They can coexist• ESPN
– Development Frameworks• PhoneGap• Titanium
![Page 27: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/27.jpg)
![Page 28: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/28.jpg)
LET’S GET DONE TO BUSINESS
![Page 29: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/29.jpg)
Agenda• Strategies– Mobile Design and Development
• Best Practices– Both for Mobile and General Web Development
• Performance Improvements
![Page 30: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/30.jpg)
Mobile Web Strategies• Desktop website– Usually fixed width
• Responsive• Separate Mobile site(s)• RESS– Responsive Design + Service Side Components
![Page 31: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/31.jpg)
Desktop Website• Usually fixed width– The 960 Grids
• Pros– Easy to implement– Most mobile browsers do a decent job of rendering
desktop-only designs• Cons– Not mobile optimized– Tends to be slower– Pinch and Zoom
![Page 32: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/32.jpg)
![Page 33: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/33.jpg)
![Page 34: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/34.jpg)
Responsive Web Design• Content is adapted based on the capabilities
of the browser– Content is adapted by using fluid, proportion
based grids, flexible images, and media queries• Percents for the grids instead of PXs• Flexible Images – Max-Width: 100%• Media Queries
![Page 35: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/35.jpg)
![Page 36: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/36.jpg)
![Page 37: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/37.jpg)
![Page 38: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/38.jpg)
Responsive Pros and ConsPros• One code base
– Site updates are easy• Future Friendly• Better for SEO
– Same content between devices
– One URL• Aesthetically pleasing for
different device heights and widths
Cons• More upfront planning
required• Tends to lead to bloated
pages and slower load times• Some things are not fluid
– Banner images– Videos– Images
• Not all devices support media queries (IE8)
![Page 39: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/39.jpg)
Responsive Design Tips• More than just Fluid Grids, Flexible media, and media queries
– Performance, Device Support, Device Optimization, Future Friendly Designs
• Set your breakpoints based on content– Not based on devices
• Use EMs for breakpoints– 100% = 1em ~= 16px ~= 14pt– This fixes issues when zoom is increased
• Images– Max-Width: 100%
• Don’t round percentages
![Page 40: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/40.jpg)
Separate Mobile Site(s)• Different websites for each class of devices– Group common capabilities
• Different websites on separate subdomains• Use a device database to lookup capabilities
based on User-Agent strings– WURFL and DeviceAtlas– Must be comfortable with device detection
• Allow the user to switch between desktop/mobile sites
![Page 41: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/41.jpg)
Separate Mobile SitePros• Easier to make changes to
specific sites– But more difficult to change
common elements• Faster load times• Tailored experience per
device (class)
Cons• Where do you draw the line?
– One site for phone, one for tablet, one for desktop?
• New devices coming out every day– With new heights, widths, resolutions,
and capabilities• SEO
– Penalized by Google if you redirect incorrectly
– Multiple URLs which can lead to duplicate content
• Requires redirection• Multiple codebases
![Page 42: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/42.jpg)
![Page 43: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/43.jpg)
![Page 44: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/44.jpg)
Responsive Design + Server Side Components
• Also known as RESS• Best of both worlds– Client side media queries– Server side optimizations• Increased performance or fine tune user experience• Can pass client side data in cookie to server
• One code base with defaults– Then deliver component based features based on
device detection
![Page 45: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/45.jpg)
RESS Pros and ConsPros• Faster load times
– Unneeded HTML, CSS, JS, and images will not be downloaded
• Tailored experiences per device or device class
Cons• Requires device detection
– Harder to test• Dynamically build your
content on the server will increase load on server
• More complicated
![Page 46: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/46.jpg)
Best Practices• Mobile First• Design For Touch• Readability• Fixed Width is Dead• Optimize User Input• Progressive Enhancement• Viewport Meta Tag• Border Box• Testing
![Page 47: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/47.jpg)
Mobile First• Mobile forces you to focus– On the most important data and actions– CONTENT!
• Mobile extends your capabilities– Mobile browsers tend to have more capabilites
than desktop browsers– But this gap is closing fast
• Let’s redesign my old website
![Page 48: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/48.jpg)
![Page 49: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/49.jpg)
![Page 50: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/50.jpg)
Mobile First• It didn’t work for me– I struggled changing the existing markup to fit on
mobile• Step back and think about your content• Start with the small/tightest constraints and
work out
![Page 51: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/51.jpg)
![Page 52: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/52.jpg)
![Page 53: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/53.jpg)
Design For Touch• Clickable elements should be 44px– Use padding instead of
margin
• Don’t rely too heavily on hover– Touch doesn’t support hover
• Incorporate gestures where appropriate
![Page 54: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/54.jpg)
Design for Thumbs• Content on the top• Controls on the bottom
• Don’t place clickable items too close together
![Page 55: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/55.jpg)
![Page 56: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/56.jpg)
Readability• Design for Readability– Not only increased font size– Also increase line height
• Everything should be at least 14px– I try to keep all content that is meant to be read
(like blog entries) at 1em+
![Page 57: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/57.jpg)
![Page 58: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/58.jpg)
![Page 59: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/59.jpg)
Fixed Width is Dead• Even if you don’t use responsive design,
there’s no need to confine your users to a minimum browser width– Users shouldn’t have to view your website with
their browser maximized• Use % for width and heights instead of PX– (target / context) * 100 = percent– Remember: don’t round
![Page 60: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/60.jpg)
![Page 61: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/61.jpg)
![Page 62: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/62.jpg)
Optimize User Input• Only include required fields– Minimize the length of the form and more users
will fill it out• Use Checkboxes, Radio Buttons, Dropdowns
instead of Textboxes where you can• Use the correct HTML5 input types– Email, Number, URL, Search, Date, Telephone
![Page 63: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/63.jpg)
![Page 64: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/64.jpg)
![Page 65: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/65.jpg)
![Page 66: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/66.jpg)
![Page 67: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/67.jpg)
Progressive Enhancement• Uses web technologies in a layered fashion
that allows all users to access the basic functionality of a web page
• Provides an enhanced version to those with advanced browsers
• Start with basic html – no css, no javascript– Enhanced layout provided by CSS– Enhanced functionality provided by JS
![Page 68: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/68.jpg)
Viewport Meta Tag
• You need one if you using responsive design or dedicated mobile sites
• Width– Tells the width of your site
• Initial-Scale– Sets the zoom level
• Maximum-Scale– Sets the maximum zoom
![Page 69: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/69.jpg)
![Page 70: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/70.jpg)
Border Box• * { box-sizing: border-
box; }– IE8 and up
• Padding and Border cut into the width, not add to it
![Page 71: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/71.jpg)
How to Test Your Mobile Sites• Firefox Mobile on Desktop– http://www.mozilla.org/en-US/mobile/#desktop
• Opera Mini Simulator– http://www.opera.com/developer/tools/mini
• Opera Mobile Simulator– http://www.opera.com/developer/tools/mobile
• iOS SDK• Android SDK• Windows Phone SDK
![Page 72: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/72.jpg)
What Do You Think?• What’s the best thing you can do to improve
the mobile experience for your users?
![Page 73: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/73.jpg)
Improve Mobile Experience• Performance• Other Answers– Aesthetics
• Mobile browsers do a decent job of rendering desktop sites– Optimize for Touch
• Pinch and Zoom– Readability
• Pinch and Zoom– Add a QR Code
![Page 74: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/74.jpg)
Performance!• Remove HTTP Headers• Reduce HTTP Requests• Framework Optimization• Optimize Images• Icon Fonts• Miscellaneous
![Page 75: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/75.jpg)
![Page 76: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/76.jpg)
Why Optimize for Performance?
• An average webpage is 1246KB– AT&T account – 2GB at $30/month: 2¢ / page
• 74% of users expect a mobile website to load in the same amount of time as a desktop site
![Page 77: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/77.jpg)
Load Times
![Page 78: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/78.jpg)
Remove HTTP Headers• Helps Security• Remove all unneeded headers– Server– Asp.Net MVC Version– Asp.Net Version– Powered By
• RemoveUnnecessaryHeaders NuGet Package
![Page 79: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/79.jpg)
![Page 80: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/80.jpg)
![Page 81: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/81.jpg)
Reduce HTTP Requests• Latency – amount of time between when browser
requests a resource and when it starts to receive the response– Cable modem: 20ms– 3G Connection: 200ms
• Average webpage has 40 requests– Latency – 0.2 seconds for Cable Modem– Latency - 2.5 seconds for 3G
• Most browsers only open 2 connections to a domain at a time
![Page 82: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/82.jpg)
Reduce HTTP Requests• Remove files– Concatenate CSS and JS Files– CSS Sprites
• Reduce unneeded files– Print CSS
• Request Quest– Quiz on what triggers an HTTP Request– http://jakearchibald.github.io/request-quest/
![Page 83: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/83.jpg)
Reduce File Size• Minify HTML, CSS, and JS files• Gzip – Compresses resources to reduce – If you do one thing to improve performance, do this
• Every byte counts• Use a CSS Preprocessor– Less or Sass– Will help remove duplicate selectors– Minifies automatically
![Page 84: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/84.jpg)
Frameworks• Do you really need a Framework?– jQuery Framework for just one Select
• Do you need the whole CSS Framework?– Download all of Bootstrap just for the icons– jQuery UI – Do you need every component?
• Why use a bloated Framework– http://microjs.com/
• Do you even need a Framework– Use Vanilla JS
![Page 85: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/85.jpg)
Optimize Images• Images make up between 50%-60% of the
average website payload• Save the image in the correct format– If you have to, save in each format
• Don’t load a big image and make the browser scale it down– <img src=“hugeImage.png” width=“50px” />
• Use an Image Optimizer– ImageOptim on Mac, Image Resizer NuGet
![Page 86: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/86.jpg)
Icon Fonts• It’s a font, so one download– Instead of multiple images
• Benefits– Scale them with CSS– Color them with CSS– Add shadow, change opacity, and/or rotate with CSS– They automatically scale for retina displays
• IcoMoon– Search different icon fonts and create your own font
![Page 87: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/87.jpg)
![Page 88: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/88.jpg)
![Page 89: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/89.jpg)
Miscellaneous• Set up caching– Especially for static resources– Add an expires tag
• Put Stylesheets at the top– Page appears to load faster as it eliminates reflow
• Put Scripts on the bottom– While script is downloading, browser will not download
any other resources• Use GET for AJAX Requests– POST sends the headers first, then the content
![Page 90: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/90.jpg)
Miscellaneous 2• Do you really need a CMS?– The default WordPress page queries the database
27 times• Reduce 3rd party libraries– “to load the Facebook, Twitter and Google social
media buttons for a total of 19 requests takes 246.7 KB in bandwidth.” – Zurb
• Limit Cookies– Cookies get sent with each request
![Page 91: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/91.jpg)
Summary• So what did we learn?• There is only one web• Mobile Web Strategy:– Desktop site, responsive, device class sites, RESS
• Best Practices• Performance
• Your website should be accessible no matter what device your users are using
![Page 92: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/92.jpg)
Questions?
![Page 93: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/93.jpg)
![Page 94: Mobile Web Development](https://reader036.vdocuments.us/reader036/viewer/2022070500/56816891550346895ddf1cad/html5/thumbnails/94.jpg)
Images Courtesy of …• Brad Frost – http://bradfrostweb.com• CSS Tricks – http://css-tricks.com• Bukk It – http://bukk.it• Web Performance Today -
http://www.webperformancetoday.com/