SlideShare a Scribd company logo
“Things done changed.”
-web designer/rapper (The Notorious BIG)
Before we begin . . .
             
 “Work harder, not smarter.”
-Doug McMakin
In 2012, what do we
       target?
          


Recommended for you

Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices

A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.

responsive designmomedia query
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent WebMo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web

Since the introduction of high pixel density displays, the classic notion of the pixel, as well as the concept of a standard dpi, are fading. Web designers are no longer constrained to fixed-width web elements. With the evolution of modern display devices, designers are now responsible for thinking beyond layout and must also consider the impact of resolution. This paper will focus on various tools and techniques web designers can use to achieve resolution independence. Topics will include the pros and cons of delivery methods, resolution independent design alternatives, common responsive design techniques and more.

web designresolutionmuseums
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.

media queriesweb developmentcss3


What is responsive
          design?
              
 Responsive design attempts to solve the problem of
  targeting our design to the device that it is being
  displayed on.

 www.bostonglobe.com
Ethan Marcotte
                
 Seminal article on A List Apart on May 25, 2010
 http://www.alistapart.com/articles/responsive-
  web-design/

Recommended for you

Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

webdevuxresponsive web design
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
Design responsively
Design responsivelyDesign responsively
Design responsively

The document discusses principles of responsive and adaptive web design. It covers topics like flexible layouts, images and media, media queries, breakpoints, grids, and frameworks like Bootstrap. Flexible layouts using percentages allow content to scale and reorganize across devices. Images and media should resize proportionally. Media queries apply different CSS styles based on screen width conditions. The grid helps layout content consistently. Frameworks like Bootstrap provide tools to build responsive sites more easily. The goal is to design sites that adapt to various contexts like device type or width.

responsive design
Let’s do some code!
              
 We will be using HTML5, because it’s the future and
  we should at least be using structural elements
   https://github.com/h5bp/html5-boilerplate
 We will be using normalize.css
   https://github.com/necolas/normalize.css
Force correct display in
         phones!
            
 <meta name="viewport" content="width=device-
  width">

Media Queries are
           magic
             
 Media queries added in CSS3
 Allows “adaptive” design
@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
      background: red;
}

Recommended for you

Responding Responsively
Responding ResponsivelyResponding Responsively
Responding Responsively

A speech I gave to my local Toastmasters club about Responsive Web Design. This was for speech #5 in the Entertaining Speaker manual.

responsive web designtoastmasters international
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty

This document provides an overview of HTML5 best practices for mobile design. It begins with introductions and outlines the session agenda. The presenter then discusses high-level principles like universal design and progressive enhancement. Specific techniques covered include viewport meta tags, media queries, scalable images, HTML5 tags, and touch-friendly guidelines. CSS topics include grids, backgrounds, gradients, and transitions. JavaScript behaviors like navigation, forms, and geolocation are also reviewed. Useful frameworks, polyfills, and testing tools are presented. The overall message is that mobile design requires an adaptive, user-centered approach through careful content structuring, responsive presentation, and unobtrusive behavior.

Responsive web design
Responsive web designResponsive web design
Responsive web design

This document discusses responsive web design. It defines responsive design as adjusting a website's layout to different screen sizes and devices. Key aspects of responsive design include fluid grids that adapt to different widths, responsive images that scale appropriately, and responsive fonts whose size adjusts. Media queries allow applying CSS styles conditionally based on screen width. The ideal fluid layout works across browsers from 780px to 1260px, accommodating most users. Responsive images avoid sending large files to small devices. Responsive typography optimizes line lengths for readability.

web designipadcss
Common sizes
              
 http://css-tricks.com/snippets/css/media-queries-
  for-standard-devices/
Using display: none;
             
 Control what gets displayed at certain resolutions
Max-width & min-width
         
 Allow the web site to “respond” to screen sizes
 Allows “responsive” design
Images
                    
 img {
  max-width: 98%; /* Changes the image size with 1:1
  ratio. */
  padding: 1%; }

Recommended for you

Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE

The document discusses responsive web design. It defines responsive design as design and development that responds to user behavior and context like screen size, platform, and orientation. It recommends using flexible grids, fluid images, and CSS3 media queries to join layouts. The document provides examples of fixed and flexible grids and discusses how to rethink content, images, and videos for responsive designs. It also notes challenges of supporting older browsers and testing responsively across many devices.

drupalresponsive designdemotix
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow

A talk given to the AOP Product Group, discussing the challenges with producing digital magazines that work across all devices. The problem is not delivery, but workflow. I talk about some of the design thinking and techniques that we have used to address this problem with Padify.

workflowhtml5newsstand
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031

Responsive web design allows websites to automatically adjust layouts based on screen size and orientation. It uses flexible grids and images, and CSS media queries. As a user switches devices, the website layout and elements resize accordingly. This eliminates the need for separate designs for each device. Techniques like flexible grids, maximum image widths, and responsive images that load different resolutions based on screen size allow websites to adapt seamlessly across devices. Responsive design requires a new way of thinking about design that is flexible and adaptable rather than fixed for each device.

Use percentages
               
 Allows the components of the site to scale
  proportionally with screen size
 Again “responsive” design
Navigation is
           challenging
                
 https://github.com/Automattic/_s/blob/master/js
  /small-menu.js
 http://css-tricks.com/
Testing your new site
            
 http://responsive.is/bostonglobe.com
Responsive design is
        challenging
             
 Fortunately, there is a lot of help on the Internet
 http://mediaqueri.es/
 Google stuff!
 Go out and code!

Recommended for you

Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design

Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.

user experienceioshtml5
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design

- Responsive web design involves creating interfaces that work across a variety of screen resolutions using CSS3 media queries and fluid design. - Designers should start with a mobile-first approach, designing the interface for mobile and expanding it for larger screens. - Key techniques include using flexible units like percentages and ems, responsive images, and media queries to trigger layout changes at breakpoint widths. Frameworks can help implement responsive grids.

interaction designweb design and developmentresponsive
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces

Presentation for the East London University Hack Day explaining the technologies used to build web interfaces.

Questions about
responsive design?
        
Retina displays
               
 Introduced with the iPhone 4
 Many desktop displays have 92-120ppi
 iPhone 5 has 326ppi
   At distance of 12in, people with normal visions can’t
    see the pixels
   http://en.wikipedia.org/wiki/List_of_displays_by_pi
    xel_density



Recommended for you

Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint

Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.

microsoft sharepointresponsive web designsharepoint designer
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design

The document discusses redesigning the BYU website to be more responsive and adaptive to different screen sizes. It notes that the current layout is outdated since it was designed in 2007 for 1024x768 screens. Modern browsers come in a variety of sizes from mobile to desktop and beyond. The document recommends a mobile-first approach using responsive web design techniques like flexible grids, fluid images, and media queries to dynamically serve optimized layouts depending on screen width. It also advocates progressive enhancement and polyfills to gracefully support older browsers.

mobile firstweb designresponsive web design
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Different displays ppi
          

Windows 8
                  
 Being released on Oct, 8
 Will support high DPI
 I suspect it will usher in crazy new products


Recommended for you

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection

Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.

cybersecurityanomaly detectionadvanced techniques
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses

CIO Council Cal Poly Humboldt September 22, 2023

national research platformdistributed supercomputerdistributed systems
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.



Retina brings challenges
           
 How do we make things look good on high-dpi
  screens but not take to long to load on low-dpi
  screens?
Make big images
              
 Make the image 1.3x it’s normal size
 Doesn’t look too bad on retina screens
 Only takes slightly longer to download
 Great for non-vector images

Recommended for you

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

cloudcloud native observabilitycloud native
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
SVGs
                      
 Scalable Vector Graphics can scale without issue
 But they don’t work well with non-vector images
 Not well supported yet.
Text and CSS elements
            
 CSS can scale without any resolution issues
   Excellent solution
   Can solve some generic designs
 Custom fonts can be download to create scale-free
  icons
   https://github.com/blog/1106-say-hello-to-octicons
   Technically challenging
   Doesn’t seem to display multiple colors easily
Retina.js
                    
 http://retinajs.com/
 Prevents non-retina browsers from downloading
  large images
 Doesn’t prevent retina displays from downloading
  small images
Let’s code!
                      
   @media only screen and (-moz-min-device-pixel-ratio: 2),
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2)
   {
     #icon {
      background-image: url(twitter@2x.png);
      background-size: 16px auto; }
   }

Recommended for you

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
Keep yourself educated
          
 The standards are still in limbo
Questions?
   

More Related Content

Similar to Responsive design and retina displays

Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
Neil Perlin
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
Chad Currie
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
Valtech UK
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent WebMo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Rita Troyer
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Design responsively
Design responsivelyDesign responsively
Design responsively
Célia Leocádio
 
Responding Responsively
Responding ResponsivelyResponding Responsively
Responding Responsively
Ted Hardy, MBA, CBAP
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
Mario Noble
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Zeeshan Khan
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
fidibiko
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
Michael Kowalski
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
Tourism Dental India
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
CLEVER°FRANKE
 
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
Christian Heilmann
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint
Cathy Dew
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
Nate Walton
 

Similar to Responsive design and retina displays (20)

Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent WebMo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Design responsively
Design responsivelyDesign responsively
Design responsively
 
Responding Responsively
Responding ResponsivelyResponding Responsively
Responding Responsively
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 

Recently uploaded

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 

Recently uploaded (20)

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 

Responsive design and retina displays

  • 1. “Things done changed.” -web designer/rapper (The Notorious BIG)
  • 2. Before we begin . . .   “Work harder, not smarter.” -Doug McMakin
  • 3. In 2012, what do we target? 
  • 4.
  • 5.
  • 6.
  • 7. What is responsive design?   Responsive design attempts to solve the problem of targeting our design to the device that it is being displayed on.  www.bostonglobe.com
  • 8. Ethan Marcotte   Seminal article on A List Apart on May 25, 2010  http://www.alistapart.com/articles/responsive- web-design/
  • 9. Let’s do some code!   We will be using HTML5, because it’s the future and we should at least be using structural elements  https://github.com/h5bp/html5-boilerplate  We will be using normalize.css  https://github.com/necolas/normalize.css
  • 10. Force correct display in phones!   <meta name="viewport" content="width=device- width">
  • 11.
  • 12. Media Queries are magic   Media queries added in CSS3  Allows “adaptive” design @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { background: red; }
  • 13. Common sizes   http://css-tricks.com/snippets/css/media-queries- for-standard-devices/
  • 14. Using display: none;   Control what gets displayed at certain resolutions
  • 15. Max-width & min-width   Allow the web site to “respond” to screen sizes  Allows “responsive” design
  • 16. Images   img { max-width: 98%; /* Changes the image size with 1:1 ratio. */ padding: 1%; }
  • 17. Use percentages   Allows the components of the site to scale proportionally with screen size  Again “responsive” design
  • 18. Navigation is challenging   https://github.com/Automattic/_s/blob/master/js /small-menu.js  http://css-tricks.com/
  • 19. Testing your new site   http://responsive.is/bostonglobe.com
  • 20. Responsive design is challenging   Fortunately, there is a lot of help on the Internet  http://mediaqueri.es/  Google stuff!  Go out and code!
  • 22. Retina displays   Introduced with the iPhone 4  Many desktop displays have 92-120ppi  iPhone 5 has 326ppi  At distance of 12in, people with normal visions can’t see the pixels  http://en.wikipedia.org/wiki/List_of_displays_by_pi xel_density
  • 23.
  • 24.
  • 26.
  • 27. Windows 8   Being released on Oct, 8  Will support high DPI  I suspect it will usher in crazy new products
  • 28.
  • 29.
  • 30.
  • 31. Retina brings challenges   How do we make things look good on high-dpi screens but not take to long to load on low-dpi screens?
  • 32. Make big images   Make the image 1.3x it’s normal size  Doesn’t look too bad on retina screens  Only takes slightly longer to download  Great for non-vector images
  • 33. SVGs   Scalable Vector Graphics can scale without issue  But they don’t work well with non-vector images  Not well supported yet.
  • 34. Text and CSS elements   CSS can scale without any resolution issues  Excellent solution  Can solve some generic designs  Custom fonts can be download to create scale-free icons  https://github.com/blog/1106-say-hello-to-octicons  Technically challenging  Doesn’t seem to display multiple colors easily
  • 35. Retina.js   http://retinajs.com/  Prevents non-retina browsers from downloading large images  Doesn’t prevent retina displays from downloading small images
  • 36. Let’s code!   @media only screen and (-moz-min-device-pixel-ratio: 2),  only screen and (-webkit-min-device-pixel-ratio: 2),  only screen and (min-device-pixel-ratio: 2)  {  #icon {  background-image: url(twitter@2x.png);  background-size: 16px auto; }  }
  • 37. Keep yourself educated   The standards are still in limbo
  • 38. Questions?