Previous month:
May 2018
Next month:
July 2018

June 2018

Mobile Web - Responsive Images - Grunt

One of the things that has been giving the MWS track fits is creating responsive images.  

The course suggests setting up an automated build process using with ImageMagick or ImageOptim.  I'm running a Mac, and I chose ImageMagick.

First you have to install Node.js.  Directions are at https://docs.npmjs.com/getting-started/installing-node.  There are very good directions on this site for installing Node.js .  I used the MacOS installer and updated everything.

I then installed ImageMagick using http://imagemagick.org/script/index.php . They had suggested another link but it indicated that it didn't work with the current Mac operating system.  I am not sure how I originally installed it, but I ended up copying the latest version and putting it in the place the other one was.

ImageMagick automates a lot of the work that GIMP and Photoshop does -- resize images, make animated gifs, crop and other fun stuff.

For a mobile web app, we want to compress the images and make about three different versions, a small, medium and large version basically for phone, tablet or large desktop screens.

The next thing we need is Grunt.  Grunt is a task runner -- if we set up Grunt correctly, then we can take any group of images and make them responsive.  We're also going to use it later to set up our Mobile Web environment. 

I followed this document: https://gruntjs.com/getting-started  to get started.

There is lots of documentation on using Grunt/Imagick/Responsive Images.   The reading that was provided in the course was: https://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

Here's the files I used for the project:  https://github.com/kathweaver/images 

 

 

 

 

 


Udacity - Grow with Google Scholarship

Earlier this year, I won a scholarship to study Mobile Web Applications on the Udacity site.  There were 10,000 scholarships awarded, and there was an opportunity to complete and be selected for Phase 2.  

I won that scholarship also.  

I choose mobile web design because I feel that track is the most flexible.  It's also the most useful in my current life.

I do the website for a non-profit, have done websites for others and believe in the power of mobile websites.

The first phase required us to be active in the community and complete the assignments.  That meant projects for the other strands: Android and IOS especially.

We have access to a mentor, the community of learners -- 1000 recipients for each strand were selected, Udacity staff, and project coaches.  

I've learned a lot, and have successfully submitted my first project.  There are two more before the scholarship period ends next October.

I was selected to be student learner which has been fun.  I've hosted a AMA already, and have helped organize one face-to-face meet up so far.