I have decided to base my project solely on responsive design, where I will produce the homepage & hopefully search page of my assignment so that it can be viewed on both web and mobile. I guess the next step for me is researching how to create fluid designs (Grids and images) that are flexible across both devices. I have been reading smashing magazine and it made reference to an interesting research article about mobile screen size trends, which can be found HERE. Funnily enough it didn’t mention the iPhone so I have a feeling the article was written before 2008. More links on the topic are:
- Responsive Web Design: What It Is and How To Use It
- Fluid Images
- Fluid Grids
- Foreground images that scale with the layout
- Flexible Web Design
- 70+ essential resources for creating liquid and elastic layouts
- The Orientation Media Query
- Responsive Web Design
- Responsive Design Image
Examples of responsive design:
I also found a useful article on CSS 3 properties and support in browsers. You can read it HERE. I also read in A List apart that when designing for the mobile, you should try to stick to some of Apples standards… so best to follow their lead in:
- Use Helvetica.
- Use bold
font-weightto maximize readability (remember, your design will often be used in daylight conditions).
- Use normal
font weightfor secondary information.
- Each row should be 44 pixels high.
- Set text at 20px.
- Inset text 10px from edges, and center vertically in row.
- Make controls 29px high, with 12px bold text and a 5px border radius, centered vertically in row.
- Group items in a 300px wide box with 8px radius (10px on each side of box).
- Set text at 20px.
- Inset text 10px from edges.
- Place labels above group box.
- Inset labels 20px (so that they line up with 10px inset for group box and 10px inset for text within the box).
- Use #d9d9d9 for borders and list dividers.
- Use #c5ccd3 for light blue (background).
- Use #4c566c for dark blue (group box header).