background preloader

Mobile Site Optimization

Facebook Twitter

The Runtime Performance Checklist. Most performance advice today centers around Page Load Time (PLT) and this is, of course, critically important to success.

The Runtime Performance Checklist

We reduce or remove requests, compress our assets and minify JavaScript and CSS. It’s all good stuff, but it’s only part of the picture. The majority of the time a user spends on your site is not waiting for it to load, but rather, using it. Therefore, user frustration can come from poor UI responsiveness, slow scrolling and jerky animations. From the moment a person loads your site or app to the moment they leave they are your responsibility. Delivering an awesome experience at 60fps is the goal, and we’ll target anything blocking us from doing that. With that in mind I want to highlight seven runtime performance problems that I see most often, and that your projects may suffer from. div.classList.add('active'); = 200 + 'px' What really matters here is how much of the document tree you invalidate.

Creating a Mobile-First Responsive Web Design. Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first.

Creating a Mobile-First Responsive Web Design

This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size.

View the demo Structure Style Less JS. Grid. Mdo/css-perf. HTML5 Boilerplate: The web's most popular front-end template. 300ms tap delay, gone away. You'll find large articles throughout this site dedicated to shaving 10ms here and 90ms there in order to deliver a fast and fluid user experience.

300ms tap delay, gone away

Unfortunately every touch-based mobile browser, across platforms, has an artificial ~300ms delay between you tapping a thing on the screen and the browser considering it a "click". When people think of the web as being sluggish compared to native apps on mobile, this is this one of the main contributors. However, as of Chrome 32 for Android, which is currently in beta, this delay is gone for mobile-optimised sites, without removing pinch-zooming! This optimisation applies to any site that uses: (or any equivalent that makes the viewport <= device-width) Why do clicks have a 300ms delay? If you go to a site that isn't mobile optimised, it starts zoomed out so you can see the full width of the page. TouchstarttouchendWait 300ms in case of another tapclick You can't simply shortcut this with touchend listeners either.

If a site has… In the mean time… Mobile-first CSS Media Queries Breakpoints ‹ CSS Code Snippet. Media Queries Are Not The Answer: Element Query Polyfill. Responsive Web design has transformed how websites are designed and built.

Media Queries Are Not The Answer: Element Query Polyfill

It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container. Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size.

What Is Responsive Web Design? Responsive Web design is not limited to a set of technologies; rather, it is a different approach to designing and building websites. “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” Modular Design Link The Element Query Link Introducing the element query. Conceptual Example Link. CSS: Responsive Navigation Menu. Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript.

CSS: Responsive Navigation Menu

It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer! View Demo Responsive Menu The Purpose The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. This trick is more useful on navigation with a lot of links like the screenshot below. Nav HTML Markup Here is the markup for the navigation.

The CSS for the navigation (desktop view) is pretty straight forward, so I'm not going to get into the details. Center and Right Alignment Internet Explorer Support.