Artwork

İçerik Steve & Ron tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Steve & Ron veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.
Player FM - Podcast Uygulaması
Player FM uygulamasıyla çevrimdışı Player FM !

Episode 5: Responsive Web Design

1:04:22
 
Paylaş
 

Manage episode 157478085 series 1222934
İçerik Steve & Ron tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Steve & Ron veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.

On this episode we learn about World Usability Day, why the new Blackberry OS matters to you, and Ron drones on and on (his words!) about Responsive Web Design. Nick Armstrong also gives us a great overview of Feedburner in his Social Media Minute, and Ron picks a surprising book for our Audible recommendation (hint: it’s not about sock monkeys). Oh – and we pick user experience book for our next Book Club book!

Enjoy!!

- Steve & Ron

Episode 5 Show Notes

News:

  • World Usability Day 2010
    • November 11th
    • worldusabilityday.org
    • Events Worldwide
    • To let people know that usability (not just web usability) is important
    • This Year’s Theme: Communication
    • Organized by the Usability Professionals’ Association
  • Blackberry 6 OS Available
    • Available on the Blackberry Style and Torch
    • Used to use a proprietary browser, but as of OS 6, they use Webkit
  • Take A List Apart’s Web Design Survey for the year

Feature: Responsive Web Design

  • A flexible grid, with flexible images that incorporates media queries to create a responsive, adaptive layout. – Ethan Marcotte
  • All about the rise of mobile, and the convergence of browsers used for both mobile and desktop OS.
  • Should a layout be created as a fixed width layout, or a fluid layout?
  • Can you create a layout that works well on both desktop and mobile platforms at the same time?
  • Responsive web design is not THE solution for mobile web, it is merely one set of tools that can be very helpful.
  • Before IE5, designing for the web was a mess, especially with Netscape.
    • It was a lot of work to get a website to work on all of the proprietary browsers.
  • We’ve finally graduated from 800×600 screen resolution to 1024×768.
  • About 4 years ago, web standards finally started to take hold across all browsers.
    • However, the mobile area was too fragmented to even think about developing in.
  • Nowadays, we have significant convergence in support for web standards in the desktop browsers.
  • Mobile browsers are even more convergent.
    • With BlackBerry OS6, all of the major browsers (Android, iOS, and BlackBerry) all use Webkit.
  • Some mobile statistics:
    • Mobile Internet adoption has outpaced Desktop Internet Adoption by 8 times.
    • AT&T has seen 4,932% increase in mobile data traffic in the last 3 years.
    • Smartphone sales are suspected to surpass worldwide PC sales by the end of 2011.
    • Forecasters are predicting that around 2014, there will be more mobile devices connected to the internet than all pcs and laptops in the world.
  • Idea is to create websites that have the potential to adapt to the device.
  • One of the leading proponents is Ethan Marcotte, who wrote a great article for A List Apart.
  • Key Components of Responsive Web Design: A Flexible Grid
    • Grid-based layout: a layout (perhaps 3-column) that clearly lines all of the elements up
      • Not required, but it’s definitely recommended
    • Flexible: define the widths of elements in percentages, rather than ems or pixels.
      • Figure out what platform most users are using the design on, and create your design for that platform.
      • Then scale up or down from your initial design.
      • To make flexible images, define a max-width of 100%.
        • This way, no image is ever larger than the container holding it.
        • As the container shrinks, the image will shrink as well.
      • Don’t define the width and height of the image in the HTML, only in the styles.
      • Usable for video and object tags as well.
    • CSS3 Media Queries
      • Applies conditional styling in your stylesheet.
      • Can target different paramaters, such as the viewport size and the device size.
      • Allows you to change the CSS being applied based on the paramaters.
    • “It’s what some of us were trying to do with liquid designs back in the 1990′s, only it doesn’t suck.” -Jeffery Zeldman
    • Media Queries
      • Based off of Media Types (all, screen, print, etc…)
      • Media Queries extend that functionality. Now you can specify conditions for the CSS to be applied.
      • Can also use Media Queries within a stylesheet, instead of linking to different stylesheets based on conditions.
      • Can have as many different conditions as you want.
    • List of Media Query Conditions:
      • Viewport Width
      • Viewport Height
      • Device Width
      • Device Height
      • Device Resolition
      • Orientation (Landscape vs. Portrait)
      • Aspect Ratio
      • Device Aspect Ratio
      • Color Depth
      • View More Here
    • Then you have to consider how to layout your site for different screen sizes, then you’ll use Media Queries to implement the layouts.
    • For example, on a three-column layout:
      • As the viewport shrinks, the columns will narrow, but at a certain point, they might get too narrow.
      • Then make the Media Queries shift it to a two-column layout.
      • You could even go down to a one-colmn layout on a mobile device.
    • Check out an example here: www.codegeek.net/amscan-rwd/
    • The idea is to have only 1 HTML file, and then several CSS files.
    • It presents a unique challenge to designers, who may need to create layouts for each screen size.
    • Is this the future of web design?
      • Probably a big part because of the power it offers for different platforms.
      • It may not be the end-all be-all of the future. Users tend to use sites on mobile for very different reasons than on a desktop machine.
        • For example, Google Maps on Mobile vs. Desktop.
      • It all comes down to doing proper user testing for your website.
    • Responsive Browser Support
      • CSS3 Media Queries are supported in:
        • Opera 9.5+ (Currently at 10)
        • Firefox 3.5+ (Currently at 3.6)
        • Safari 3+ (Currently at 5)
        • Google Chrome
        • Mobile Webkit
        • Opera Mobile
        • IE9
      • For the IE5 – IE8, Firefox 2+ and Safari 2+ browsers, there’s a JavaScript workaround that enables Media Queries. You can find it here.
      • There’s no reason NOT to consider this as a tool to use.
    • Criticism:
      • May need to rethink complex navigation.
      • Sites aren’t necessarily optimized for mobile bandwidth, even if the layout is.

    Social Media Minute

    • Nick Armstrong
      • FeedBurner
        • RSS Manager
          • RSS = Really Simple Syndication
        • All you need is a Google Account.
        • You can manage and track your RSS subscription stats
        • You can simplify podcast distribution
        • You can create newsletter, or product launch lists

    Podcast Sponsor

    Book Club

    Blog Picks of the Week

    • baratunde.com
      • Exists at the intersection of comedy, politics and technology.
      • Web editor of The Onion
      • Host of the Science Channel’s show “The Future Of”
    • wireframes.tumblr.com
      • Screenshots of wireframes (for example, of a grid-based layout)
      • Great templates and toolkit downloads.

    Contact Us

  continue reading

18 bölüm

Artwork
iconPaylaş
 
Manage episode 157478085 series 1222934
İçerik Steve & Ron tarafından sağlanmıştır. Bölümler, grafikler ve podcast açıklamaları dahil tüm podcast içeriği doğrudan Steve & Ron veya podcast platform ortağı tarafından yüklenir ve sağlanır. Birinin telif hakkıyla korunan çalışmanızı izniniz olmadan kullandığını düşünüyorsanız burada https://tr.player.fm/legal özetlenen süreci takip edebilirsiniz.

On this episode we learn about World Usability Day, why the new Blackberry OS matters to you, and Ron drones on and on (his words!) about Responsive Web Design. Nick Armstrong also gives us a great overview of Feedburner in his Social Media Minute, and Ron picks a surprising book for our Audible recommendation (hint: it’s not about sock monkeys). Oh – and we pick user experience book for our next Book Club book!

Enjoy!!

- Steve & Ron

Episode 5 Show Notes

News:

  • World Usability Day 2010
    • November 11th
    • worldusabilityday.org
    • Events Worldwide
    • To let people know that usability (not just web usability) is important
    • This Year’s Theme: Communication
    • Organized by the Usability Professionals’ Association
  • Blackberry 6 OS Available
    • Available on the Blackberry Style and Torch
    • Used to use a proprietary browser, but as of OS 6, they use Webkit
  • Take A List Apart’s Web Design Survey for the year

Feature: Responsive Web Design

  • A flexible grid, with flexible images that incorporates media queries to create a responsive, adaptive layout. – Ethan Marcotte
  • All about the rise of mobile, and the convergence of browsers used for both mobile and desktop OS.
  • Should a layout be created as a fixed width layout, or a fluid layout?
  • Can you create a layout that works well on both desktop and mobile platforms at the same time?
  • Responsive web design is not THE solution for mobile web, it is merely one set of tools that can be very helpful.
  • Before IE5, designing for the web was a mess, especially with Netscape.
    • It was a lot of work to get a website to work on all of the proprietary browsers.
  • We’ve finally graduated from 800×600 screen resolution to 1024×768.
  • About 4 years ago, web standards finally started to take hold across all browsers.
    • However, the mobile area was too fragmented to even think about developing in.
  • Nowadays, we have significant convergence in support for web standards in the desktop browsers.
  • Mobile browsers are even more convergent.
    • With BlackBerry OS6, all of the major browsers (Android, iOS, and BlackBerry) all use Webkit.
  • Some mobile statistics:
    • Mobile Internet adoption has outpaced Desktop Internet Adoption by 8 times.
    • AT&T has seen 4,932% increase in mobile data traffic in the last 3 years.
    • Smartphone sales are suspected to surpass worldwide PC sales by the end of 2011.
    • Forecasters are predicting that around 2014, there will be more mobile devices connected to the internet than all pcs and laptops in the world.
  • Idea is to create websites that have the potential to adapt to the device.
  • One of the leading proponents is Ethan Marcotte, who wrote a great article for A List Apart.
  • Key Components of Responsive Web Design: A Flexible Grid
    • Grid-based layout: a layout (perhaps 3-column) that clearly lines all of the elements up
      • Not required, but it’s definitely recommended
    • Flexible: define the widths of elements in percentages, rather than ems or pixels.
      • Figure out what platform most users are using the design on, and create your design for that platform.
      • Then scale up or down from your initial design.
      • To make flexible images, define a max-width of 100%.
        • This way, no image is ever larger than the container holding it.
        • As the container shrinks, the image will shrink as well.
      • Don’t define the width and height of the image in the HTML, only in the styles.
      • Usable for video and object tags as well.
    • CSS3 Media Queries
      • Applies conditional styling in your stylesheet.
      • Can target different paramaters, such as the viewport size and the device size.
      • Allows you to change the CSS being applied based on the paramaters.
    • “It’s what some of us were trying to do with liquid designs back in the 1990′s, only it doesn’t suck.” -Jeffery Zeldman
    • Media Queries
      • Based off of Media Types (all, screen, print, etc…)
      • Media Queries extend that functionality. Now you can specify conditions for the CSS to be applied.
      • Can also use Media Queries within a stylesheet, instead of linking to different stylesheets based on conditions.
      • Can have as many different conditions as you want.
    • List of Media Query Conditions:
      • Viewport Width
      • Viewport Height
      • Device Width
      • Device Height
      • Device Resolition
      • Orientation (Landscape vs. Portrait)
      • Aspect Ratio
      • Device Aspect Ratio
      • Color Depth
      • View More Here
    • Then you have to consider how to layout your site for different screen sizes, then you’ll use Media Queries to implement the layouts.
    • For example, on a three-column layout:
      • As the viewport shrinks, the columns will narrow, but at a certain point, they might get too narrow.
      • Then make the Media Queries shift it to a two-column layout.
      • You could even go down to a one-colmn layout on a mobile device.
    • Check out an example here: www.codegeek.net/amscan-rwd/
    • The idea is to have only 1 HTML file, and then several CSS files.
    • It presents a unique challenge to designers, who may need to create layouts for each screen size.
    • Is this the future of web design?
      • Probably a big part because of the power it offers for different platforms.
      • It may not be the end-all be-all of the future. Users tend to use sites on mobile for very different reasons than on a desktop machine.
        • For example, Google Maps on Mobile vs. Desktop.
      • It all comes down to doing proper user testing for your website.
    • Responsive Browser Support
      • CSS3 Media Queries are supported in:
        • Opera 9.5+ (Currently at 10)
        • Firefox 3.5+ (Currently at 3.6)
        • Safari 3+ (Currently at 5)
        • Google Chrome
        • Mobile Webkit
        • Opera Mobile
        • IE9
      • For the IE5 – IE8, Firefox 2+ and Safari 2+ browsers, there’s a JavaScript workaround that enables Media Queries. You can find it here.
      • There’s no reason NOT to consider this as a tool to use.
    • Criticism:
      • May need to rethink complex navigation.
      • Sites aren’t necessarily optimized for mobile bandwidth, even if the layout is.

    Social Media Minute

    • Nick Armstrong
      • FeedBurner
        • RSS Manager
          • RSS = Really Simple Syndication
        • All you need is a Google Account.
        • You can manage and track your RSS subscription stats
        • You can simplify podcast distribution
        • You can create newsletter, or product launch lists

    Podcast Sponsor

    Book Club

    Blog Picks of the Week

    • baratunde.com
      • Exists at the intersection of comedy, politics and technology.
      • Web editor of The Onion
      • Host of the Science Channel’s show “The Future Of”
    • wireframes.tumblr.com
      • Screenshots of wireframes (for example, of a grid-based layout)
      • Great templates and toolkit downloads.

    Contact Us

  continue reading

18 bölüm

Tüm bölümler

×
 
Loading …

Player FM'e Hoş Geldiniz!

Player FM şu anda sizin için internetteki yüksek kalitedeki podcast'leri arıyor. En iyi podcast uygulaması ve Android, iPhone ve internet üzerinde çalışıyor. Aboneliklerinizi cihazlar arasında eş zamanlamak için üye olun.

 

Hızlı referans rehberi

Keşfederken bu şovu dinleyin
Çal