Responsive Web Design Links

From WikiName
Revision as of 23:37, 23 May 2015 by Jeff (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.
    • 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:

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.
  • |
    • 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:

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."
  •'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:

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:

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

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.