Blog:
Week Six: Applied Responsive Design 3-5
What is the property you should use in order to make your images “fluid”.. and how would you use it?
The properties are max-width, width and min-width. Step 1 is to get rid of any specific image size attributes in your html code and put a max-width of 100% for all img in your CSS. From there you can adjust individual images to only take up a certain percentage of its container by using the width attribute. And lastly, by setting the min-width, you can make sure that the image doesn’t get too small.
How would you go about making an image full screen width when you reach a smaller breakpoint?
The way to accomplish this is with a new media query with a max-width set to the smaller breakpoint. Assuming that you made the image float for the larger viewport size, you would first need to give it a float value of none. If the image was inline, you need to change the display to block. Now you specify the percentage of the block that the image should occupy, likely 100% if you want it full screen. You can also set a minimum width that the image wouldn’t shrink smaller than.
Read More
Week Five: Applied Responsive Design 1-2
Did you find anything helpful with the way the instructor used Illustrator tools when designing for responsive layouts?
There were a few good things about how the instructor used Illustrator for designing his responsive layouts. For one thing, you can have multiple workspaces open sized for desktop, tablet and mobile which allows you to look at the layouts simultaneously. The instructor also made use of a layer for callouts so that he could make notes on functionality and changes between different layouts. Not something the instructor mentions, but a advantage that I can see, is that within Illustrator it is easier to copy, place and resize elements, so that would make it easier to create the different sized layouts. Illustrator is also good for if your site will be using vector-based images.
Read More
Week Four: Building Child Themes
Explain in your own words what a child theme is.
A child theme is a way of customizing an existing (parent) theme. A good metaphor for a child theme would be an apartment complex. All apartments have the same basic interior. This is a parent theme. Each tenant can then redecorate the apartment by painting, adding furniture, etc. but can’t change the structure in any way. You can’t change where the lights are or where the outlets are or knock down a wall. This is a child theme. Child themes are customized versions of the parent theme but in general most changes are cosmetic. However there are times when you can use a child theme to make major changes.
Read More