RWD Smörgåsbord: Bootstrap, Responsible Image Scaling and Retina Images

Responsive Web Design Smörgåsbord:
Bootstrap, Responsible Image Scaling and Retina Images

This will be a multi-topic evening with three presenters.
All topics relate to Responsive Web Design.

1) Bootstrap
In their own words, Bootstrap is "a front-end framework for faster and easier web development" created by Twitter. It includes predefined CSS styles, as well as Javascript functionality (built on JQuery) for a huge number of typical web page components like navigation bars, tabs, pills, and lists; buttons; page headers and hero unit; alerts; progress bars; tooltips; popovers; accordions and more.

The Bootstrap framework incorporates Responsive Web Design techniques out of the box.

Matt Kunze of DataSplice.com will give us an overview and demo of the Bootstrap framework. In the process he'll answer questions like "When would one use Bootstrap?" "What advantages does it provide?" "What limitations does it have"? We can also discuss some of the design issues you'll need to consider if you are designing a website that will be implemented using Bootstrap.


2) Responsible Image Scaling in Websites
Ron Zasadzinski of CodeGeek.net will us how to create a website that provides a great image experience for both your mobile and desktop browser visitors. A major challenge in today's multi-device environment is serving appropriate images to appropriate visitors. You'd like to respect the bandwidth and performance issues of your mobile device users while serving high resolution images for your desktop browser users. Ron will demonstrate one technique that lets you specify different images for display on a web page depending on specific media queries. A key result of this technique is that mobile devices will only download the mobile-optimized image you specify and not all the images available, a problem other techniques have.


3) Retina Images
Kevin Udy of NerdyMind.com will discuss the technique they've been using to load higher resolution images for use on higher pixel-density screens. Kevin will discuss how to avoid forcing a larger file size download for screens that cannot utilize the larger images, and he'll provide CSS code examples for using HDPI/Retina sprites and regular images.


Responsive Web Design techniques are now the de-facto standard for how websites are created. This is a great opportunity to see some real-world work and solutions to important RWD problems.

We'll have great information, discussion, beer and appetizers...

Don't miss it! RSVP today.

Meetup starts at 6pm sharp, appetizers available starting 5:45pm.

Join or login to comment.

  • Chris C.

    Just came across this: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

    The folks at WebKit have added the srcset attribute to allow the specification of a higher res image.

    August 13, 2013

  • Matt K.

    FWIW, looks like Bootstrap 3.0 is nearing release:
    http://getbootstrap.com/

    July 31, 2013

  • Amy L.

    I only wish my team had participated in these Meetups prior to yesterday evening. It was also nice to put finally faces with the names. Fantastic presentations. Thanks All!

    1 · July 19, 2013

  • Flash A.

    Informative & relaxed

    July 19, 2013

    • Flash A.

      Armed with @media I managed to get the hamburger onto a client's site, and also added a retina hamburger. Thanks Keven.

      July 19, 2013

  • Matt S.

    Last night's meeting was informative and actually a bit of fun. Love the informal format and rubbing shoulders with a lot of really smart local talent. Looking forward to making it to others in the future!

    July 19, 2013

  • Chris C.

    I really enjoyed last night's meetup. I liked the format of multiple presenters, and I also appreciated having presenters show code and live demonstrations -- very powerful.

    July 19, 2013

  • A former member
    A former member

    Sorry that I couldn't make it last night. Had to stay in the office a bit longer. Hopefully next time!

    July 19, 2013

  • Ron Z.

    Here's a link to my slides on Responsible Images: http://bit.ly/fcip-rwd-images and here's the link to Kevin's slides on Retina Images: http://bit.ly/fcip-retina-images

    July 19, 2013

  • Jeremy G.

    Here is a great resource for staying on top of the latest and greatest in RWD. http://responsivedesignweekly.com

    1 · July 18, 2013

  • Kevin U.

    Forgot to mention we have a blog post published at nerdymind.com that describes the retina technique covered tonight!

    1 · July 18, 2013

  • Brent

    Great presentation everyone. Nice to see everyone. Here is a link to the markup to make your embedded videos responsive.

    http://jsfiddle.net/brentrobbins/Pstvg/

    1 · July 18, 2013

  • Jeremy G.

    Lots of good discussion and picked up some new techniques.

    July 18, 2013

  • Ben V.

    Great meeting today. Super smart folks with lots to say. Thanks!

    July 18, 2013

  • Flash A.

    Should I purchase an iPad with 'retina' display for this event?

    July 11, 2013

  • Steve D.

    hopefully next time

    July 18, 2013

  • Steve D.

    Noooooo! Responsive design is not the "de-facto standard". There is still a majority of us web developers that know responsive design just leads to more problems...

    1 · July 17, 2013

    • Jeremy G.

      The other technique that helps with the scrolling is to start the design with a 'mobile first' mentality. Instead of trying to cram everything from a desktop site into a mobile site, start with the mobile experience first. As the screen real estate increases, then start to think about what to add.

      1 · July 18, 2013

    • Steve D.

      Ron / Jeremy - you both make excellent points. I need to look into more alternatives when it comes to Responsiveness AND I'm thinking my personal preference is to design from the beginning with usability and purpose in mind.

      Many times when people visit a site from a mobile device they have a completely different agenda than if they were at their desk on their awesome Windows 8 machine (hehehe - Bad Apple, bad bad bad)

      Obviously, different industries/markets will have totally different use scenarios, but I do feel that the design should stem from the intended functionality and uses, not from the size of the screen.

      July 18, 2013

  • Jeremy G.

    Looking forward to this one!

    July 11, 2013

  • A former member
    A former member

    Hey, great topic! I'll be there. Wrote a post on a few aspects of these topics in May: http://www.sparklogix.com/what-makes-future-proof-web-design/

    July 10, 2013

  • Larry C.

    Already booked....

    July 10, 2013

38 went

Our Sponsors

  • DataSplice

    Thank you for supplying appetizers and supporting our members!

People in this
Meetup are also in:

Create your own Meetup Group

Get started Learn more
Allison

Meetup has allowed me to meet people I wouldn't have met naturally - they're totally different than me.

Allison, started Women's Adventure Travel

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy