It's a Mobile Mobile Mobile World

Sep 8, 20121 like1,160 views

Christopher Cochran presented on designing for a mobile world at the WordCamp Baltimore conference on September 8, 2012. He discussed how the web is increasingly accessed through mobile devices and the importance of optimizing websites for mobile. Specifically, he emphasized designing based on the needs and capabilities of mobile users, using techniques like responsive design, fluid grids, adaptive images and media queries to create flexible and lightweight experiences.

Design Technology Business

CHRIS COCHRAN
presents

“IT’S A
MOBILE,
MOBILE,
MOBILE, MOBILE
WORLD”
WordCamp Baltimore
September 8, 2012 Maryland Science Center

And there are a lot of Devices.

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

? Web OS
?
Nexus iOS BlackBerry iPhone Kindle

? iPad android Windows Galaxy
Feature Phone Smart Phone
Droid Tablet Mini Tablet Retina
Fire ? Opera Mini
?
Opera Mobile
?

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

WHY CARE
CHRISTOPHER COCHRAN
@tweetsfromchris
? #wcbalt
2012

71% of global mobile internet users
expect websites to load as quickly as
the desktop site
Nearly 60% expect a website to load in
3 seconds or less on their mobile.
Source: Equation Research on behalf of Compuware “What Users Want From Mobile”

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

57% Will not recommend the site. Too Slow...
43% Would unlikely return.
Source: Equation Research on behalf of Compuware “What Users Want From Mobile”

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

For some, mobile is the ONLY
connection to the web.

10% of Americans Are Mobile Only
(This number can be much higher in other countries)

Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Cell phone owners do most of their online
17% browsing on their phone, rather than a
computer or other device

Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

WE
WANT TO
KEEP VISITORS
? HAPPY AND Give
A POSITIVE EXPERIENCE
CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

? &
80% + mobile users who had A fast Reliable experince
Will Retrun and return more often.

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Go Fast
Smaller or no images (lower http requests).

Load only what is needed.

display: none; is NOT your friend.

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Be Precise
CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

WHO is the USER?

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Designing for the USER is
Designing for the BUSINESS.

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

What is IMPORTANT to the user?

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

START with the LEAST
Common Denominator.

ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Flexible Foundation

Fluid Grid
Media Queries
Feature Detection
Adaptive Images & Adaptive Media

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

MATH (Sorry)

ems
target / context = result
28px / 16px = 1.75em

Percentages
section / site = result
100(645px / 960px) = 67.1875

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

960px

HEADER
100%

CONTENT SIDEBAR

67.1875% 31.1875%
(645px) 1.635% (300px)

(15px)

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Media Queries
<link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href=/slideshow/its-a-mobile-mobile-mobile-world/14216641/"example.css" />

@media only screen and (min-width: 480px)
and (max-width: 767px) {

?

@media rule

body {

width: 436px;

}

}

@import url(/slideshow/its-a-mobile-mobile-mobile-world/14216641/"example.css") only screen

? @import rule
and (min-width: 480px)
and (max-width: 767px);

Great tool for “the other browsers”: https://github.com/scottjehl/Respond

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Feature
DETECTION

Modernizr

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

wp_is_mobile()

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

ADAPTIVE
MEDIA
CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Icon Fonts

Font Awesome

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

Adaptive Images

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

TOOLS
of the
TRADE

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

MOBILE FIRST = CONTENT FIRST = USER FIRST

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

The Web Is Not A Fixed
Medium

CHRISTOPHER COCHRAN #wcbalt
@tweetsfromchris 2012

This document summarizes Christopher Cochran's presentation on going mobile from 960 pixels to 320 pixels. Some key points are that mobile is convenient, personal, natural and cool. Mobile websites should be fast loading in 3 seconds or less, precise by understanding the user, and adaptive through progressive enhancement and feature detection. The presentation provides recommendations on how to design for mobile, including making content the priority, using responsive design, and leveraging tools like Modernizr.

320, 480, 640, 720, 768, 960, 1024… NOChristopher Cochran

The document discusses principles of responsive web design. It emphasizes designing from the content outwards rather than just focusing on different devices. Media queries should be used to adjust more than just layout, including font sizes, line heights, padding and margins. Responsive design involves setting breakpoints based on how the content naturally breaks across different screen widths, not just on device resolutions. Performance, testing across different connectivity speeds, and prioritizing the user experience are also highlighted.

Designing responsivelyChristopher Cochran

The document discusses designing responsively from sketch to production. It emphasizes that mobile experience should be the root of design and prioritizing constraints for mobile. Sketches should be quick and simple to generate ideas and solve problems. The browser can be used as a design tool and patterns, frameworks, and style guides can help. Content and performance optimization are also important. Rapid prototyping and testing throughout the process are encouraged.

Can Media Queries Save Us All?Tim Kadlec

The document discusses whether media queries can help make websites responsive to different devices. It argues that media queries alone are not enough and that a mobile-first approach is needed. Key points covered include using responsive images, designing for mobile sizes first before larger screens, and combining media queries with device detection. The presentation provides examples of how to implement responsive design techniques.

Optimizing User Experience with Responsive Web DesignClarissa Peterson

Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. The content remains the same across devices but is formatted appropriately for each screen width through techniques like adjusting column numbers and widths. Designing first for mobile forces focus on essential content and ensures parity across devices. Examples demonstrate how navigation, images and text restructure seamlessly for an optimized experience on any device.

Optimizing User Experience Across Devices with Responsive Web Design (Clariss...uxpa-dc

Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. This provides an optimized experience for users on all devices without needing separate mobile sites. It works by using fluid, proportional grids and layouts that automatically resize text, images, and elements to fit different screen sizes using CSS media queries and fluid images. This improves usability by ensuring content remains easily readable and accessible on any device with a single codebase.

Mobile Web on Drupal!Lyza Gardner

The document discusses mobile web development using Drupal, emphasizing strategies like responsive web design and progressive enhancement to create a unified web experience across devices. It critiques the limitations of Drupal 6 in managing mobile capabilities while providing insights into utilizing modules like WURFL for device detection. Key philosophies include avoiding separate mobile sites, enhancing user experience through efficient design, and developing an approach guided by device classes to target specific user needs.

The Age of Responsive DesignDenise Jacobs

The document summarizes the evolution of web design from the early 1990s to the present day. It discusses how technical factors like improved code, browsers, devices and access have enabled the rise of responsive design. The key stages discussed are the World Wide Web era from 1992-1996, the dot-com boom from 1997-2001, the era of web standards from 2002-2007, and the modern era from 2008 onward. It emphasizes how current design approaches like responsive design have emerged from the confluence of technical capabilities and shifts in how people access the web from any device.

Creating and Planning Content for Responsive Web Designmeetcontent

Structured content and APIs allow content to be reused across different contexts and devices. Content management systems and structured markup like XML help make content nimble by defining it in a way that is well organized, described and can be easily adapted. APIs provide programmatic access to content so it can be dynamically assembled and presented in many different forms. Together, these techniques help content be freed from any single device or page and make it available anywhere.

Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson

The document discusses responsive web design (RWD) as an approach that ensures websites react positively to various user conditions and devices. Key goals include content parity, speed, future-proofing, and accessibility, with strategies outlined for achieving them. The successful implementation of RWD has led to significant increases in mobile traffic and conversion rates for the author’s website.

1. nick lansley mi m 2012rachelmsalmon

The document outlines 10 trends for 2012, including developing for tablets and TVs using HTML5, allowing employees to use their own devices for work, focusing on customers without smartphones or who prefer simple interactions, improving search relevancy, creating gorgeous online experiences, launching apps and sites when ready rather than waiting for perfection, incorporating social media to gather customer feedback, and exploring cloud computing for sites with spikes in volume. The summary at the end recaps creating a mobile-enabled site or app for tablets and TVs with great search and design, adding social media, hosting in the cloud, releasing when good enough, and allowing BYOD.

1. nick lansley mi m 2012rachelmsalmon

The document outlines 10 trends for 2012, including developing for tablets and TVs using HTML5, allowing employees to use their own devices for work, focusing on customers without smartphones or who prefer simple interactions, improving search relevancy, creating gorgeous online experiences, launching apps and sites when ready rather than waiting for perfection, incorporating social media for customer feedback, and exploring cloud computing for sites with spikes in volume. The summary at the end recaps creating a mobile-enabled site or app for tablets and TVs with great search and design, adding social media, hosting in the cloud, releasing when good enough, and allowing BYOD.

Web Content Management Is Dead Long Live Web Content ManagementThe Content Advisory

The document discusses the evolution and current state of web content management (WCM), highlighting its transition from traditional systems to modern web engagement and marketing management tools. It emphasizes the need for organizations to adapt their processes and technologies to better facilitate non-technical users and create meaningful digital experiences. Ultimately, the text suggests moving away from a product-focused mindset to one that prioritizes value-driven content management strategies.

Responsive Web Design: How the mobile web has changed the way we think and workvq20

The document summarizes a meetup on responsive web design hosted by Nick Weaver and Vidal Quevedo. They discussed the challenges of native mobile apps and earlier responsive approaches at UW-Madison. They advocated for a "one-web" philosophy using responsive design to provide a consistent experience across devices. The basics of responsive design like fluid layouts, responsive images, and media queries were covered. Challenges of testing and managing responsive designs were also noted. Case studies of responsive sites at UW-Madison were presented and resources for learning more about responsive design were provided.

Responsive DesignDavid Hudson

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It involves using fluid grids, flexible images, and media queries to automatically adjust for different screen sizes and devices. While the concept has existed since the early days of the web, it has grown in popularity recently due to advances in CSS3 and JavaScript that allow for more flexible and dynamic layouts. Responsive design aims to provide an optimal viewing and interaction experience across a wide range of devices by adapting the layout depending on screen size and orientation.

Rt responsive design_finalJellyfish Agency

The document discusses responsive web design, which allows a single website to be accessed from any device by changing the layout depending on screen size. It notes the rise of mobile internet usage and outlines the key aspects of responsive design, including using media queries, fluid grids, and flexible images. The benefits are said to include a better user experience, less maintenance than separate mobile sites, and support from search engines that see it as a better user experience.

Responsive Web DesignRachel Peters

The document discusses responsive web design, which allows websites to adapt to various screen sizes and devices by employing a flexible layout, media queries, and fluid images. It highlights the growing necessity of responsive design due to increasing mobile use and provides insights on the development process and best practices for SEO. The conclusion emphasizes the importance of innovation and adaptability in web design to meet future challenges and ensure a user-friendly experience across devices.

Mobile Web: A Crash CourseMarqui CMS

The webinar discusses current trends in mobile web usage, highlighting the rapid growth of mobile internet users in Canada and the US, particularly among younger demographics. It contrasts mobile apps with mobile websites, emphasizing the advantages of mobile websites in terms of flexibility, reach, and lower costs. Case studies from Lakeland College and the Young Presidents Organization demonstrate successful implementations of mobile sites to enhance user engagement and accessibility.

Mobile, Media & TouchTim Wright

The document discusses current and future techniques for detecting mobile devices and touchscreens, including device detection using server-side code, screen detection using CSS media queries, and touch detection using JavaScript events. It recommends combining techniques like media queries and touch detection for rich interfaces, and taking a progressive enhancement approach to ensure fallbacks for unsupported devices. Key techniques covered include media queries, touch events, and preventing default behaviors.

Making the most of mobileKaren McGrane

The document discusses strategies for creating content that can be flexibly displayed across different devices and platforms. It notes challenges like varying screen sizes and the need to prioritize content. Responsive design is presented as a way to have one website that adapts its design, though complex designs may be difficult and bandwidth must be considered. Apps are also discussed but have issues like revenue models and discoverability. Transitioning to an API is presented as a way to share content more flexibly through different experiences like websites, apps and integrations. Prioritization of issues like technology, content, governance, analytics and advertising is key. The goal discussed is building flexibility into the system now to allow for more specialization over time as technologies and needs change.

The Mobile Opportunity March '13 - Creative Licence DigitalCreativeLicenceDigital

The document discusses the high penetration of smartphones among adults, with significant daily internet access through mobile devices. It emphasizes key mobile web strategies including responsive design, central business logic, and streamlined workflows for improved user experience. The document also highlights the relationship between website performance and revenue, along with the importance of tailored content for different devices.

WordCamp 2012 - Seth Carstens Presentation (Responsive Width)Seth Carstens

This document summarizes a presentation on developing responsive websites for smartphones, tablets, and other mobile devices. It discusses using meta tags and CSS3 media queries to create responsive designs, grid systems like 960.gs and Blueprint to plan layouts, and jQuery Mobile for cross-device development. It also recommends testing websites on emulated devices using tools like MITE and KITE and considering performance, usability, and purpose when deciding between customizing or cloning content for mobile.

Do I need an app for that?IWMW

The document discusses the necessity and strategies surrounding mobile applications, emphasizing the increasing use of mobile internet among various demographics. It highlights the advantages and limitations of native apps versus responsive web design, arguing that apps are ideal for specific tasks while the web is more suitable for content delivery. Ultimately, it suggests evaluating the purpose and audience before deciding on an app or a website.

Modern Digital Design: The power of Responsive DesignValtech UK

The document discusses the evolution and significance of responsive web design, introduced by Ethan Marcotte in 2010, which allows websites to adapt to various screen sizes and orientations. It emphasizes the benefits of responsive design, including improved user experience, SEO advantages, and cost efficiency by eliminating the need for multiple site versions. With increasing device usage, particularly smartphones and tablets, the document asserts that 2013 marks a pivotal year for implementing responsive design in web development.

Gilbane Selection Workshopsggottlieb

The document is a presentation on selecting a web content management system (WCMS) presented by Seth Gottlieb at the Gilbane Conference. It outlines the complexities involved in the selection process, emphasizing the need for a structured approach that includes understanding business context, defining requirements, and filtering the market for suitable solutions. The presentation discusses common pitfalls in WCMS selection and offers guidance on avoiding failures in implementation.

Beyond Squishy: The Principles of Adaptive DesignBrad Frost

The document discusses the principles of responsive web design, emphasizing its importance for usability across different devices. It highlights aspects such as flexibility, performance, and user expectations, particularly in mobile contexts. The content underscores the need for quality design that adapts to various screen sizes and user situations, advocating for a future-friendly approach to web development.

Responsive Web Design & the state of the WebYiannis Konstantakopoulos

The document discusses responsive web design, which is an approach where design and development respond to the user's behavior and environment based on screen size, platform, and orientation. It involves flexible grids and layouts, images, and media queries to automatically adjust the website for different devices like laptops and iPads. The goal is for the website to have technology that automatically responds to the user's preferences as they switch devices.

3 bedroom bungalow with all bedroom ensuitemodele dawodu

Indian_Constitution_Presentation.pptx , imagesjaglandushyant

More Related Content

Similar to It's a Mobile Mobile Mobile World (20)

The Age of Responsive DesignDenise Jacobs

Creating and Planning Content for Responsive Web Designmeetcontent

Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson

1. nick lansley mi m 2012rachelmsalmon

The document outlines 10 trends for 2012, including developing for tablets and TVs using HTML5, allowing employees to use their own devices for work, focusing on customers without smartphones or who prefer simple interactions, improving search relevancy, creating gorgeous online experiences, launching apps and sites when ready rather than waiting for perfection, incorporating social media for customer feedback, and exploring cloud computing for sites with spikes in volume. The summary at the end recaps creating a mobile-enabled site or app for tablets and TVs with great search and design, adding social media, hosting in the cloud, releasing when good enough, and allowing BYOD.

Web Content Management Is Dead Long Live Web Content ManagementThe Content Advisory

Responsive Web Design: How the mobile web has changed the way we think and workvq20

Responsive DesignDavid Hudson

Rt responsive design_finalJellyfish Agency

Responsive Web DesignRachel Peters

Mobile Web: A Crash CourseMarqui CMS

Mobile, Media & TouchTim Wright

Making the most of mobileKaren McGrane

The Mobile Opportunity March '13 - Creative Licence DigitalCreativeLicenceDigital

WordCamp 2012 - Seth Carstens Presentation (Responsive Width)Seth Carstens

Do I need an app for that?IWMW

Modern Digital Design: The power of Responsive DesignValtech UK

Gilbane Selection Workshopsggottlieb

Beyond Squishy: The Principles of Adaptive DesignBrad Frost

Responsive Web Design & the state of the WebYiannis Konstantakopoulos

The Age of Responsive DesignDenise Jacobs

Creating and Planning Content for Responsive Web Designmeetcontent

Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson

1. nick lansley mi m 2012rachelmsalmon

Web Content Management Is Dead Long Live Web Content ManagementThe Content Advisory

Responsive Web Design: How the mobile web has changed the way we think and workvq20

Responsive DesignDavid Hudson

Rt responsive design_finalJellyfish Agency

Responsive Web DesignRachel Peters

Mobile Web: A Crash CourseMarqui CMS

Mobile, Media & TouchTim Wright

Making the most of mobileKaren McGrane

The Mobile Opportunity March '13 - Creative Licence DigitalCreativeLicenceDigital

WordCamp 2012 - Seth Carstens Presentation (Responsive Width)Seth Carstens

Do I need an app for that?IWMW

Modern Digital Design: The power of Responsive DesignValtech UK

Gilbane Selection Workshopsggottlieb

Beyond Squishy: The Principles of Adaptive DesignBrad Frost

Responsive Web Design & the state of the WebYiannis Konstantakopoulos

Recently uploaded (20)

3 bedroom bungalow with all bedroom ensuitemodele dawodu

Indian_Constitution_Presentation.pptx , imagesjaglandushyant

roadsafety_training_manual_unit_1_magnitude_and_impact.pptmbkl05cctjv

Sir Norman Foster Philip Jodidio TASCHENFernandoMondragon14

The_Geometry_of_Natshshshshshsbsure.pptxsambal5

GOV. Incentives for ED[1][1][1].pptx [Read-Only].pptxkunalArora758765

week3.pptx python related programs and outputsdoramira833

MULTI SENSORY EXPERIENCE DESIGN RESEARCHSamuel Thuo

Excited to share insights from my Dissertation Thesis on Multisensory Experience Design in Art Museums, focusing on Nairobi, Kenya! I have to say that this is the work that set me on my current trajectory and led me to my current design philosophy of design for all senses. Have you been to a #museum, wanted to touch an exhibit and there you saw an injunction, "Please don't touch"....or "Please speak softly",,,,or "Please no eating in the museum".....or "Please don't use strong perfume".... these injunctions have made museums to be mono-sensory experience oriented, alienating the visitors. These injunctions speak volumes of our innate and inherent desire to want to engage holistically with all our #senses with objects. This is a major problem especially in Kenya's museums, which is a paradox with its rich cultural, and anthropological exhibits that require engagement with all the senses. Inspired by David Howes' insights from Concordia University, my thesis challenges this status quo by exploring historical precedents. Did you know that in the 18th century, museums encouraged multisensory interaction? Today, there's a global shift towards enhancing museum experiences through multisensory #design, yet Kenya's museums often lag behind international standards. This research isn't just about aesthetics....it's about fostering meaningful, educational, and socially enriching experiences. By embracing multisensory design, museums can bridge cultural divides and create environments where every visitor feels welcomed and engaged. And want to go back. Let's spark a conversation about the future of museum experiences. How can we leverage design to make cultural institutions more accessible and inspiring for all?

User Persona for a fitness CEO Foundermodele dawodu

Figure.pptxfyytytyrrytrtytrttttrrttyyyyuuuRandiAnugerah1

overview visual graphic design for SHS.pptxKarlVincentNonog

Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebfkunduanannya2003

Clamp_and_bend_device_exercisee_SFC.pptxDhanushJCS1

Exploratory Experiences Built by Design (UXPA25)Design for Context

Discovery… it’s more than just finding a piece of information to complete a specific task. It’s more than just search… it is uncovering the unexpected, the “aha!” moment, or the deeper story behind a familiar subject. It is an experience – the user experience – within a digital space. This presentation begins by looking at some design examples within the cultural heritage domain that are crafted to foster and encourage curiosity, leading to discovery. Examples draw on different subjects, particularly ones that blend content from different genres and countries. We will unpack design approaches that deliberately invite curiosity and “horizontal navigation” through different information paths. Then, we will look more closely at some techniques that UX designers can use to shape these experiences, such as how to leverage the user’s context of use, how to integrate cultural contexts, and how to gracefully find meaning in large scale data sets.

3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...huyth14

the sigma cafe a b c d e f g h i j k l ikamalpavlov

Chapter 3 Agile Development 7e.ppt,Chapter 5 - 1.pptNaveedRehman55

最新版美国威斯康星大学普拉特维尔分校毕业证（鲍奥笔毕业证书）原版定制taqyea

2025原版威斯康星大学普拉特维尔分校毕业证书pdf电子版【q薇1954292140】美国毕业证办理UWP威斯康星大学普拉特维尔分校毕业证书多少钱？【q薇1954292140】海外各大学Diploma版本，因为疫情学校推迟发放证书、证书原件丢失补办、没有正常毕业未能认证学历面临就业提供解决办法。当遭遇挂科、旷课导致无法修满学分，或者直接被学校退学，最后无法毕业拿不到毕业证。此时的你一定手足无措，因为留学一场，没有获得毕业证以及学历证明肯定是无法给自己和父母一个交代的。【复刻威斯康星大学普拉特维尔分校成绩单信封,Buy University of Wisconsin-Platteville Transcripts】购买日韩成绩单、英国大学成绩单、美国大学成绩单、澳洲大学成绩单、加拿大大学成绩单（q微1954292140）新加坡大学成绩单、新西兰大学成绩单、爱尔兰成绩单、西班牙成绩单、德国成绩单。成绩单的意义主要体现在证明学习能力、评估学术背景、展示综合素质、提高录取率，以及是作为留信认证申请材料的一部分。威斯康星大学普拉特维尔分校成绩单能够体现您的的学习能力，包括威斯康星大学普拉特维尔分校课程成绩、专业能力、研究能力。（q微1954292140）具体来说，成绩报告单通常包含学生的学习技能与习惯、各科成绩以及老师评语等部分，因此，成绩单不仅是学生学术能力的证明，也是评估学生是否适合某个教育项目的重要依据！我们承诺采用的是学校原版纸张（原版纸质、底色、纹路）我们工厂拥有全套进口原装设备，特殊工艺都是采用不同机器制作，仿真度基本可以达到100%，所有成品以及工艺效果都可提前给客户展示，不满意可以根据客户要求进行调整，直到满意为止！【主营项目】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理毕业证|办理文凭: 买大学毕业证|买大学文凭【q薇1954292140】威斯康星大学普拉特维尔分校学位证明书如何办理申请？二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理美国成绩单威斯康星大学普拉特维尔分校毕业证【q薇1954292140】国外大学毕业证, 文凭办理, 国外文凭办理, 留信网认证

Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdfDr. Rema

AVA-fundamentals-Gavin-Ambrose-Paul-Harris-The-fundamentals-of-typography-AVA...FaisalNurWibowo

3 bedroom bungalow with all bedroom ensuitemodele dawodu

Indian_Constitution_Presentation.pptx , imagesjaglandushyant

roadsafety_training_manual_unit_1_magnitude_and_impact.pptmbkl05cctjv

Sir Norman Foster Philip Jodidio TASCHENFernandoMondragon14

The_Geometry_of_Natshshshshshsbsure.pptxsambal5

GOV. Incentives for ED[1][1][1].pptx [Read-Only].pptxkunalArora758765

week3.pptx python related programs and outputsdoramira833

MULTI SENSORY EXPERIENCE DESIGN RESEARCHSamuel Thuo

User Persona for a fitness CEO Foundermodele dawodu

Figure.pptxfyytytyrrytrtytrttttrrttyyyyuuuRandiAnugerah1

overview visual graphic design for SHS.pptxKarlVincentNonog

Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebfkunduanannya2003

Clamp_and_bend_device_exercisee_SFC.pptxDhanushJCS1

Exploratory Experiences Built by Design (UXPA25)Design for Context

3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...huyth14

the sigma cafe a b c d e f g h i j k l ikamalpavlov

Chapter 3 Agile Development 7e.ppt,Chapter 5 - 1.pptNaveedRehman55

最新版美国威斯康星大学普拉特维尔分校毕业证（鲍奥笔毕业证书）原版定制taqyea

Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdfDr. Rema

AVA-fundamentals-Gavin-Ambrose-Paul-Harris-The-fundamentals-of-typography-AVA...FaisalNurWibowo

It's a Mobile Mobile Mobile World

1. CHRIS COCHRAN presents “IT’S A MOBILE, MOBILE, MOBILE, MOBILE WORLD” WordCamp Baltimore September 8, 2012 Maryland Science Center

2. And there are a lot of Devices. CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

3. ? Web OS ? Nexus iOS BlackBerry iPhone Kindle ? iPad android Windows Galaxy Feature Phone Smart Phone Droid Tablet Mini Tablet Retina Fire ? Opera Mini ? Opera Mobile ? CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

4. WHY CARE CHRISTOPHER COCHRAN @tweetsfromchris ? #wcbalt 2012

5. 71% of global mobile internet users expect websites to load as quickly as the desktop site Nearly 60% expect a website to load in 3 seconds or less on their mobile. Source: Equation Research on behalf of Compuware “What Users Want From Mobile” CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

6. 57% Will not recommend the site. Too Slow... 43% Would unlikely return. Source: Equation Research on behalf of Compuware “What Users Want From Mobile” CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

7. For some, mobile is the ONLY connection to the web. 10% of Americans Are Mobile Only (This number can be much higher in other countries) Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012” CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

8. Cell phone owners do most of their online 17% browsing on their phone, rather than a computer or other device Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012” CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

9. WE WANT TO KEEP VISITORS ? HAPPY AND Give A POSITIVE EXPERIENCE CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

10. ? & 80% + mobile users who had A fast Reliable experince Will Retrun and return more often. CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

11. Go Fast Smaller or no images (lower http requests). Load only what is needed. display: none; is NOT your friend. CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

12. Be Precise CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

13. WHO is the USER? CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

14. Designing for the USER is Designing for the BUSINESS. CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

15. What is IMPORTANT to the user? CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

16. START with the LEAST Common Denominator. ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

17. Flexible Foundation Fluid Grid Media Queries Feature Detection Adaptive Images & Adaptive Media CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

18. MATH (Sorry) ems target / context = result 28px / 16px = 1.75em Percentages section / site = result 100(645px / 960px) = 67.1875 CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

19. 960px HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% (645px) 1.635% (300px) (15px) CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

20. Media Queries <link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href=/slideshow/its-a-mobile-mobile-mobile-world/14216641/"example.css" /> @media only screen and (min-width: 480px) and (max-width: 767px) { ? @media rule body { width: 436px; } } @import url(/slideshow/its-a-mobile-mobile-mobile-world/14216641/"example.css") only screen ? @import rule and (min-width: 480px) and (max-width: 767px); Great tool for “the other browsers”: https://github.com/scottjehl/Respond CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

21. Feature DETECTION Modernizr CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

22. wp_is_mobile() CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

23. ADAPTIVE MEDIA CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

24. CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

25. Icon Fonts Font Awesome CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

26. Adaptive Images CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

27. TOOLS of the TRADE CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

28. MOBILE FIRST = CONTENT FIRST = USER FIRST CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

29. The Web Is Not A Fixed Medium CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: \n
#6: \n
#7: \n
#8: \n
#9: \n
#10: \n
#11: \n
#12: \n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: \n
#19: \n
#20: \n
#21: \n
#22: \n
#23: \n
#24: \n
#25: \n
#26: \n
#27: \n
#28: \n
#29: \n
#30: \n

狠狠撸

It's a Mobile Mobile Mobile World

Recommended

More Related Content

Similar to It's a Mobile Mobile Mobile World (20)

Recently uploaded (20)

It's a Mobile Mobile Mobile World

Editor's Notes