Week 9, Blog Post 7
Objective:
Identify the top 10 lessons learned in this class, Designing for Mobile Devices I, while working on my FlowerScapes.com web site project.
Top 10 Lessons I’ve Learned:
- First and foremost, I learned that you need to rethink the way you approach your workflow when designing responsively for mobile devices. The usual way of designing pixel perfect fixed width sites is over! You must be able to make the site viewable for many different screen sizes.
- Whether your designing responsively or for fixed width desktop sites, it is best to always sketch your design out on a paper “sketch sheet” first, before proceeding to digitally design your mockups. I found this to be very helpful when designing my mockups. It made the digital layout go much faster. I found some sketch sheets that I downloaded for free which I used to create my sketches.
- I learned how important it is to REALLY know your content, and that you MUST start ANY responsive design with a strategy on how that content will layout and flow from device to device. I found this to be one the most challenging aspects, because it’s like trying to fit 10lbs. of sugar into a 5lb. bag! I spent quite a bit of time just starring at my original desktop version sketch sheet and having to think really hard about how I was going to fit ALL that information into a smaller mobile layout without sacrificing any of the information.
- I also learned a great method for arranging and categorizing your content without having any visuals in the way and BEFORE actually mocking anything up, through the use of a “Content Survey” sheet. I’m working on creating one of my own based on one that I found online.
- There are many online tools you can use to do your mockups, prototypes and site building using flexible grid layouts. You have to be careful using some of these however, because they carry a lot of extraneous code along with them. The one I think I’m really going to like is Skeleton because it’s bare bones. I’ve listed its link as well as some others, and they are definitely worth bookmarking:
http://goldengridsystem.com/ http://simplegrid.info/ http://www.columnal.com/ https://gridsetapp.com/ http://www.getskeleton.com/
- I learned about some javascript plugins that can be used to make your site cross-browser compliant, such as Categorizr, which can be found at
http://www.brettjankord.com/2012/01/16/categorizr-a-modern-device-detection-script/
- I learned about using location detection and motion detection mobile capabilities such as accelerometers, which are usually accompanied by a compass, and that when using the “geolocation” feature you must use javascript to make that feature work, such as the Modernizr javascript jQuery library.
- I learned about using “polyfills”, which is a piece of code or plugin that provides the technology that some browsers lack in order to make your sites more responsive and adaptable to many different screen environments.
- I have learned about testing your responsive design, and have visited and bookmarked many sites which help you accomplish this. Because, although you can simply minimize and maximize your browser window to test whether your site it reflowing as it should, this method DOES NOT test for the functionality of your site. Here are some of the web sites I have read over and bookmarked for future use on testing my responsive sites:
http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
http://responsinator.com/
http://responsive.is/desolve.com
http://screenqueri.es/
http://mobitest.akamai.com/m/index.cgi - I learned about using “microformats” within my HTML as a way of extending my content and giving it more semantic meaning. They also make your code more searchable. You can find the microformats site at http://www.schema.org. This site contains the schema vocabulary, as well as the microdata format information that you add to your HTML. This site is definitely a MUST READ!
sondrasblog 