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.

Why is it important to make sure your galleries are “swipeable”?

With more people using their smartphones and tablets for web browsing, those people want an experience that they are familiar with and swipeable galleries are the norm. So if your gallery is not swipeable it will likely frustrate anyone going to your site on a mobile device.

What are some important HTML5 attributes useful for responsive design with form elements?

To help mobile users fill out forms on your website, you should use different “input types” to open keyboards specific to what kind of data is being entered. An input type of text will give the basic keyboard. An input type of email will give you a keyboard with the @ symbol. An input type of url will give you a keyboard with “.”, “/” and “.com”. An input type of search will change the “go” button to “search”. You can also use the placeholder attribute to preload the form with dummy copy to better describe the info you are looking for.

How do you make a telephone mobile friendly?

Assuming that you mean a telephone number (since telephones are already mobile friendly), you can make a phone number on your site clickable so that a smartphone can call that number. To do so you create an “a href” with the value of “tel:” and the phone number. You can also add a class to the link so you can style it in CSS and make it appear unclickable except from a mobile device.