So in the example, they just call the function for the first id (fittext1) which has all the default values. For the second id (fittext2) they set a “compressor” value. If you set a high compressor value, the text will shrink more aggressively. If you give a lower value, for instance .fitText(0.8), the text will shrink less aggressively. For the third id (fittext3) they set a min- and maxFontSize, this allows users to specify two optional pixel values.
More information, and the link to github, can be found on their website http://fittextjs.com.
2. Adaptive Images
This tool detects your visitor’s screen size and automatically creates, caches and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. It’s a bit more difficult to use because, you don’t only have to know the basics of html and css, you also have to have some basic server knowledge. You can also download this tool for free on github. When you unzip this file it’s best to first read the instructions file. Here you’ll find a very detailed list of instruction to create your adaptive images.
You can find all the information you need on http://adaptive-images.com.
3. Responsive Testing
My prayers have been answered with this tool. I find it really dreadful to constantly have to resize my huge window so I can test a responsive website. No more I tell you! Just visit http://mattkersley.com/responsive and enter the url of the website you’d like to test. You can test only on the width or the device sizes. You have a beautiful overview for each device and their fore you can easily see where you have to tweak some more. The only downside I could find is the fact that it only covers apple’s products. So if you create for Android tablets or phones you still have to figure out their device sizes. But even for them it will be a great help!
4. Less Framework 4
“Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 set of typography presets, all based on a single grid.” You can download Less Framework for free on github.
If you want to see what it does, you just create a new webpage with some dummy text in it from lipsum.com. you just have to copy the css you want (I choose the main-16px.css) and paste it in your css file. If you run the page now you can already see it in action. If you want something more sophisticated, you can always tweak a couple of things in the css file.
There are a couple of rules you have to keep in mind when you want to use this tool for your website. So for more information about this useful grid tool, visit their website http://lessframework.com.
5. Responsive Web Design Sketch Sheets
If you still use paper and pencil to create your mockups, you could use these sketch sheets for your responsive web sites. You can download the sheets at http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets.