Responsive Web Design Links

Chapter 1 - What Is Responsive Web Design?:

• Window Resizer for Chrome
  • With this plug-in, you can quickly examine websites in a variety of viewports in Chrome. Note: You'll need to be using the Chrome browser to download this plug-in.
• Set My Browser Size
  • This site works in any browser except Chrome. It's not a plug-in, but a website where you define a fixed browser width and then open pages within that.
• List of Common Resolutions
  • This Wikipedia page provides pixel widths for a wide variety of different device displays. Note that in this list (and conventionally), pixel widths for screens in tablets and smartphones are based on the landscape (sideways) orientation for these devices, even though many users actually browse the Web with their devices in portrait (up-and-down) orientation. For example, the iPhone 4 is listed at 960x640, meaning that in portrait mode, the viewport is 640 pixels wide.

Chapter 2 - Relative Units of Measurements:

• Reminders for Preparing Web Graphics and Video
  • This page offers some shorthand tips on preparing images (and video) for the Web.
• Preparing Images for the Web
  • This video demonstrates how to prepare images for the Web in Photoshop.
• Free Online Picture Resizer
  • This free online resource makes it easy to crop and resize image files.
• NotePad++ Code Editor
  • This free code editor for Windows is a great starter coding environment. There are more powerful free code editors, but NotePad++ is friendly and intuitive.
• BareBones TextWrangler
  • This free code editor for Macs is intuitive and includes handy features to debug code.
• PXtoEM.com
  • Here's the pixel-to-em (or vice versa) converter that I mentioned in Chapter 3.
• Brackets Code Editor
  • If you want an alternative to NotePad++, try the Brackets code editor. It's a free, open-source editor that runs on all versions of Windows, Mac, and Linux.

Chapter 3 - Creating Responsive Menus With Media Queries:

• Creating a Pure CSS Drop-Down Menu
  • Here's a fully developed, professional-level template for a CSS drop-down menu.
• How to Create a CSS3 Drop-Down Menu
  • This site offers a more complex CSS drop-down menu using CSS3 effects and gradients.
• Drop-Down Menus From CSS Menu Maker
  • CSS Menu Maker generates HTML and CSS for drop-down menus. Some designs are free.
• Responsive Navigation Patterns
  • Here is a thoughtful survey of user interface (UI) and user experience (UX) issues in designing responsive navigation elements.

Chapter 4 - Responsive Color Schemes and Custom Web Fonts:

• Mobile Web Best Practices 1.0
  • Here are the World Wide Web Consortium's guidelines for minimum color contrast in mobile devices and for visually impaired users.
• Calculating Color Contrast for Legible Text
  • This is a relatively accessible discussion of the math involved in calculating color contrast.
• Adobe Edge Web Fonts
  • Adobe Edge partners with Google Fonts and provides both pay-to-license and free fonts. It is an alternative to Google Fonts.
• | Fonts.com
  • This site provides high-end pay-to-license fonts that work both in print and on the Web.
• Adobe Color
  • Adobe Color (currently Adobe Color CC) is a powerful color-scheming resource. If you want to play with color schemes, you'll have a lot of fun at this site!
• Browser Support for Google Fonts
  • Here's official documentation on browser support for Google Fonts.

Chapter 5 - Responsive Page Layout:

• Examples of Websites With Responsive Design
  • Check out these examples of cutting-edge and creative responsive page layouts from around the world.
• Responsive Web Design: 50 Examples and Best Practices
  • Check out these examples of cutting-edge and creative responsive page layouts from around the world.
• Just Free Web Templates
  • Looking for inspiration, or shortcuts, to designing a page layout? The Just Free Web Templates site has dozens of premade HTML5 Web templates.
• Should We Forget Columns?
  • Here's a thoughtful commentary on the value of columns in contemporary Web design, with a set of useful links to other resources.

Chapter 6 - Providing Collapsible Content for Mobile:

• Custom Styling the Summary Open and Close Icon
  • Customizing the appearance of the icon that appears to the left of the summary in a details/summary design is a bit more complex than we could explore in depth in this lesson, but if you're inclined to give it a try, you'll find a good example here in the section "Styling Details and Summary Elements with CSS."
• W3.org's Definition of a Detail
  • Here are the technical details of how details and summary elements work.
• Nesting Details and Summary Elements
  • This page is an example of (and an editable template for) a nested details/summary set. (The text is Lorem Ipsum—fake Latin used as placeholder text in templates that are intended to be customized and re-used.) If you want to see the code behind the page and you're using the Chrome browser, choose More Tools > View Source. In Internet Explorer, choose View > Source. In Firefox, choose Tools > Web Developer > Page Source.
• The Hottest Web Design Trends of 2014: Updated
  • Even if you're reading this after 2014, the article makes some thought-provoking arguments for emerging trends. The article includes an argument that "Your website doesn't need to work in all browser versions." Give it a hearing, and post your own thoughts in the Discussion Area.

Chapter 7 - Making Images and Videos Responsive:

• Internet Speed Test: 3G, 4G, LTE, and WiFi—Who Wins?
  • Here's a candid and detailed analysis and summary of actual download speeds for Wi-Fi, 3G, 4G, and LTE Internet connections.
• Compress and Optimize Images With These Easy-to-Use Free Online Tools
  • Check out this survey of free tools and resources for compressing and optimizing images, including several downloadable apps.
• Difference Between a Megabyte (MB) and a Megabit (Mb)
  • Megabytes are used to measure file size. Megabits are used to measure file transfer speed. They're not the same thing. This short article explains the difference and how to compute download speeds.
• Image Compression for Web Developers
  • This is an insightful and substantial exploration of how much compression to use in preparing photos for the Web.
• Three HTML5 Tools That Bridge the Gap Between Native and Mobile Apps
  • Here's a rundown of new HTML5 features that facilitate mobile design, including an explanation of how caching works to allow faster user access to large files over slow mobile connections.
• Example of a jQuery Library
  • Are you curious about what jQuery libraries look like? You can go to this link to see one of them. If you're a JavaScript coder, dissect the code. If not, take a quick look, appreciate that someone did a lot of work for us to create this code, and smile.

Chapter 8 - Using SVG Artwork in Responsive Design:

• Inkscape
  • Inkscape is a free, open-source app that you can use to create artwork and save it to SVG (Scalable Vector Graphics) format. Inkscape is available as a free download for Windows, Mac OS X, and Linux.
• Dia
  • Dia is a free and open-source vector graphics editor available for Windows and Linux. Dia is used mainly for flowcharting, network diagrams, and circuit diagrams.
• GIMP
  • GIMP (an acronym for GNU Image Manipulation Program) is a free app for Windows, Mac, and Linux. It's used for both Photoshop-type tasks like photo retouching and image composition, and as a vector-drawing app. GIMP can save files to SVG format.
• SVG and CSS—Cascading Style Sheets
  • This substantial tutorial by Jakob Jenkov explores styling SVG elements with CSS in detail.
• SVG Studio
  • You can purchase SVG artwork from this image distribution site.

Chapter 9 - Designing Responsive Forms:

• Jotform
  • Jotform allows you to generate forms and back-end scripts that forward content submitted in your form to your email address. It's free for the first 100 submissions a month (and you can accumulate more free submissions by doing things like liking their Facebook page).
• The Site Wizard
  • I've been using the feedback form wizard at The Site Wizard for years to generate quick feedback forms. The wizard creates HTML (which you can edit) and PHP to manage the data. It's also free.
• W3C Documentation: Input Control
  • Here's official and complete documentation for every HTML5 input element.

Chapter 10 - Adding Widgets With Bootstrap:

• Bootstrap Components
  • Check out this page to view the full set of available Bootstrap components (widgets).
• Slider Carousel
  • This is an alternative Bootstrap-based Carousel template, similar to the one we explored in class, but with some different styling.
• Bootstrap 3 Carousel Tutorial
  • This Bootstrap carousel tutorial is a bit less friendly than the one we used in class, but it does include placeholders for images.
• Bootstrap Bay Themes and Templates
  • I promised to provide a link to a distribution center for Bootstrap themes. Here it is! Check them out.
• Bootstrap Tutorials From Tutorial Republic
  • Here's the link to Tutorial Republic's Bootstrap widget tutorials.

Chapter 11 - Providing an App-Like Experience With jQuery Mobile:

• The Case for Building Mobile Apps With HTML
  • Here's a concise argument for building Web apps with HTML5 and jQuery Mobile as opposed to creating native apps.
• Web Apps vs. Native Apps: Fight . . . Fight . . . Fight!
  • This is a substantial survey of the pros and cons, whens and whys, for building native apps versus creating Web apps.
• Five Quick jQuery Widgets for Mobile Interactivity
  • This article surveys some of the most impactful widgets you can integrate into jQuery Mobile sites.
• Graceful Degradation Versus Progressive Enhancement
  • This article from the W3C's Web Standards Curriculum explores the differences between two development approaches: graceful degradation and progressive enhancement.
• jQuery Mobile - Theme Roller
  • It provides all the links to the JavaScript and CSS required to make jQuery Mobile widgets work, and it allows you to customize that CSS.

Chapter 12: - Creating a Web App Interface for Mobile Users:

• Query Mobile Resources
  • Visit this site for useful resources that will help you learn more about jQuery Mobile, including tutorials and tools to guide you through the development of simple or more complex applications.
• jQuery Mobile Listviews
  • This site offers examples, code, and tutorials to add features like icons, images, and filters to listviews.
• Adventures in Responsive Navigation
  • Check out this site for examples, inspiration, and techniques for building responsive navigation.