Coding Responsively

Home / Coding Responsively

Coding Responsively

Design Files / Slicing

– Slice all of your images at their largest size (the same size they would appear for desktop). HTML & CSS will help us resize our images for mobile.

HTML

– To hide things for mobile create a div class that you will utilize in your CSS
– So images resize for mobile, take off the pixel widths and heights and do not use a height. Instead give the image a width=“100%;”

CSS

– Always use percentages for widths! This will allow for your content to size dynamically for all devices since pixels are fixed width and we don’t want fixed widths websites with responsive.

– For your wrapper and any other elements you can utilize max-width and min-width. So I would set a max-width on my wrapper to 970px (the size of my full desktop site content area) and then set a min-width of 320px which is the smaller smartphone size for iPhone. This will ensure that your layout is responsive while not distorting image sizes or website element sizes.
– Use CSS media queries for effects that should only happen on mobile – they help things appear differently for mobile and desktop most commonly by hiding elements for mobile such as certain navigation items, images, text, etc. The utilize a max-width such as 640px and if we are hiding a certain class this tells it to hide it if the browser window is smaller the 640px. Most tablets and smart phones fall under 640px and this is a common cut off from desktop to mobile devices.

CSS Media Query Example:

@media only screen and (max-width: 640px) { }

– To hide things on mobile on the class your created, add a display: none;