Design epiphanies for mobile web development

This past week has been one in which I’ve made real strides in my knowledge and understanding of mobile web design. ¬†I’ve been familiar with the term responsive web design for some time and in the past couple of weeks I’ve put that knowledge to use in a live project.
 
In my latest blog, I share some of my thoughts on responsive web design and some crucial things I’ve taken away that makes life for a web designer much simpler.¬†
 

Media Queries

Responsive design refers to a technique that allows a website (one website) to adapt to its screen size no matter what device it is being viewed in. 
 
This until recently has presented me with some real challenges.  How could I design a page that fitted with so many devices on the market. What is the correct pixel size for each resolution? Just how do I wrap my head around it all?
 
These were challenges that frankly I’d needn’t have worried about. It is the sort of epiphany that makes me sit and think… “What was I thinking?”
 
I thought I’d got a measure of the syntax of¬†media queries¬†of CSS and learned everything I’d needed to know. I was naive and leading myself for so long up the wrong path; far from where I needed to be.
 
Sure, many of my worries were reasonable enough. I don’t and can’t afford so many mobile devices to test web pages and I don’t fancy the idea of bugging my family and mates for their phones and Ipads every time I have a website to test, but with a little¬†flexibility¬†most of these problems simply disappear. ¬†
 
In my current project, I tried to tie every last pixel down and spent hours trying to fix widths and element sizes for just one resolution.  I could have continued that way in time and got the job done. But it is tiresome, unnecessary and there are better ways which thankfully I have now learned, to do the job.
 

Flexible Model

No… what is required is flexibility in design. ¬†That means allowing elements to do the work for you in playing to minimum and maximum widths of the viewports or surrounding elements. And once I did life became so much simpler.
 
To achieve this flexibility and fluidity in my design. all I needed was:
  • Fluid Images¬†
  • Fluid Grids (% widths and heights)
  • Media queries
I love responsive web design and I love media queries. They’re such a powerful tool and take away the need to purchase more than one domain which saves on content duplication for the benefit of your website in the search engines. ¬†
 

At breaking point

I got the media query part right. Just about. Another eye opener for me was the breakpoint idea. For the longest time, I’ve been making my breakpoints by querying both the maximum and minimum widths of a device resolution….
 
But it’s not really needed. So the following really optimum media rule code.
 
@media screen and (min-width: 480px) {

  body {
       background: navy;
  }
}

 
rather than 
 
 @media screen and (
“Cascading Style” does what it says on the tin. ¬†Rules cascade against each other so if for whatever reason you have more than one styles assigned to the same selector, the style at the bottom (the second set of styles) overrides the first, which let me tell you has caused me some fair old problems in my time.
 
But this utilised very well with media queries in which you create your alternative styles.¬†It’s best to put your responsive styles in an external file ans make it the last CSS file you link to, as the cascade tree will have all your ¬†regular styles to look through. It matters and it’s in the name, cascading.
 
So an element with the style color:red in normal styles can be restyled to a blue colour on devices up to 320px wide like so. 
 
@media screen and (min-width: 480px) {
 
  body {
       color: blue;
  }
} 
 

No more scrolling

However to get it right, you have to go through each and every last style and make sure it has a style that is suitably overridden. What I like to do, is write down each element used, along with any class or id assigned and put them in a media query with a display: none style. If they have disappeared from view, I know that the style has been¬†overridden¬†and I can happily use any style I want in addition to the default “parent” style.
 
When I was playing with the photo background image in my project and trying to create a flexible design like so.    
 

background-size: 98% 270px;

background-size          

background-repeat: no-repeat;

background-image: url(../images/annholy.png);

width: 98%;

height: 270px;

 
What this does is sizes the size of the image on the screen and also sizes its containing element. 
 
I kept seeing the horizontal scroll in my test device which had me scratching my head wondering why the browser was treating element space as if the background had not been styled at all.   
 
It wasn’t doing it at all. ¬†I’d made the mistake of not styling a certain element in my responsive design meaning that the browser was still rending an element in it’s original desktop style.
 
So I’ve learned so new things and gained some insights I’d never really had before, which I owe to my so far short time on team treehouse. ¬†It’s really opened my eyes to some things I’ve been doing wrong, things I’ve been doing right and¬†reinvigorated¬†my¬†desire¬†to keep learning and improving myself.
 
I hope this blog has taught you some things too. ¬† ūüôā
 
 

An update on what I’ve been up to!

I’ve been rather busy in the past week or so, so I’ve been blogging a little less lately. I decided to blog today because today I’m discouraged but also hugely excited. ¬†My focus this week has been completing a mobile design project for my client with varying results. (More on that in a moment).

I’ve joined Teamtreehouse.com. ¬†In my industry, you never ever stop learning and there is always something different to learn and my web design education goes on and on. I don’t underestimate the importance of my degree in getting me to where I am today in terms of my web design skills but something happened today which made it clear to me that I still have some way to go. ¬†I think Team treehouse can put me back on a level playing field.¬†

I’ve been thinking about Team Treehouse for a while. ¬†Their website is pretty to look at, which is always a good first impression. The range of courses is very wide and very impressive. Their testimonials are very encouraging. People following their passions, learning their skills, getting their dream jobs, making careers out of their hobbies, increasing their employability and crucially for me, gaining the confidence to start their own business.

Now of course I’ve already gone one step ahead on that last front. ¬†I’ve got my business. The exciting thing for me is the thought that I can increase my market potential and offer more for my customers. ¬†I’m thinking this through already as I’m looking at my website and revising my business structure.¬†

I’ve not given up on Codecademy by any means but once my 2 week trial is over and I become a paid customer, I would hope that I can make the same leaps forward with Treehouse as I made at University and keep up with current design practices.¬†

Now I can present my current update to my client and hopefully what I’ve done will be good enough to go forward. I have set up a web page that¬†does¬†adapt to different screen widths and the major devices will respond to; responsive web design. But when I looked at reputable online generator to measure my mobile web skills, my score was rather discouraging.

What do I want specifically for my money? ¬†I want to learn how to specifically target my designs for particular devices. Obviously you can’t design for all¬†the devices out there but it’s time I learned the proper foolproof tricks for design mobile apps and responsive design from desktop to the smallest smartphone in the land.

I’m excited and very much looking forward to the improvements my Team Treehouse education will give me.

What you need to know Google Web Designers’ most advanced components

I want to talk again about Google Web Designer.

I have still no doubt GWD will empower designers in the future.  The free innovation from Google has been available, albeit through BETA for over 5 months and in that time perhaps one of the few remaining blank spots if you like have been the use of the more advanced aspects of GWD  The Gallery and map components.  So I made an interstitial file with 4 pages with examples of each.

Having spent enough time now on the gallery components I feel I have enough knowhow now to stress one important thing more than any other.

Optimise the images beforehand.

Know the size of the images you want to include in your galleries.  As you would any other project, plan your exact sizes.  How big are your images?  Is there consistency in their physical sizes?  You might want to make sure your images are the same size as the area of the gallery you create in GWD.  Some strange things will happen to your images otherwise.

For example you may get, stretched and pixellated (new word?) images, misplaced images positionally so you only see part of an individual image on the screen which are things I would say caused the system having to work through extra variable it needn’t otherwise have to work out and seemingly the glitches are quite random and nothing that can’t be working out by going through the process again and again.

Types of gallery

There’s the 360 degree and Swipable galleries which in comparison to the third gallery type, are relatively straightforward with no advanced settings to worry about. All you have to worry about are the size of your gallery area and images contained in the component.

To access the property controls you simply need to look for Component Properties.

Now, the Carousel gallery is a different kettle of fish indeed.¬† There’s access to a wide range of controls here to tailor your component to exactly the way you want.

Advanced Settings

You have at your disposal:

    * Transition controls
    * Framewidth and Frameheight controls
    * Starting frame
    * Neighbour Rotation
    * Neighbour scale
    * Neighbour Height

Let me go over these quickly one by one.

Transition:  Speed of the animation of transition between one image and the other. I estimate 1000 is equal to one second of real time.

Frame width and height: This denotes the size of the image space not size of component area.  Note that this does not pay regard to the acrual image size so will resize the image accordingly.

Start frame:  Input the number in order you want the gallery to start.  If you type the number 5 into this box, the gallery will show the 5th image first.

Neighbour rotation: Neighbour rotation is about how the images physically interact as a carousel. I found that the best setting to me appears to be 80 to 100 as this gives a genuine feeling of carousel motion.

Neighbour separation:   Neighbour separation controls the space between one frame and another. I found 100 rotation and 200 separation works very well.  But the best way ot learn is to experiment. By getting into the nitty gritty you can achieve some wonderful effects.

height:  height  Controls direction of swipe as the user goes through the images in the gallery.

Neighbour scale: neighbour scale¬† The best effect seems to be the default -80 as all other images seems tro be hidden from view.¬† This is i think the number you should aim for in most projects and you may need a different setting. Ultimitely however it’s a case of finding out the setting that fits your individual project needs.

The only other point left is the map component which is relatively straight forward. As a minimum you only need to input latitude and longitude values and the Map component will lookup the prescise location on Google Street view.

Very impressive, yes?

I think so.¬† But I’ll leave you to look at the result here on my site, and you can also get in and see what the fuss is about with Google Web Designer. Enjoy¬† ūüôā

http://www.google.com/webdesigner
http://www.jonniegrieve.co.uk/gwd/galleries-int/index.html