- When designing a RWD site you must think of a design that would work both on desktop & mobile.
When using a layer, just because you resize to a mobile size of let's say 320, does not mean it is going to work on the mobile. Ironically Chrome for example on iOS is a different beast all together than say on the desktop. This is something that [RZ] & and myself have worked hard to test and learn to a point where it would take a whole day to get something working on iOS.
- Use the right kind of navigation. Don't just put a burger menu just because it is trendy. Think and see, maybe the CSS menu would suffice. Sometimes the client wants you to use different menus because they have seen a site that they really like and wan to copy it.
- Google Maps - Experience has showed me that while the google maps is responsive, sometimes, it is best to use an static image of the map in the mobile version with a link that would take the user to Google maps app. This way the user does not get stuck halfway through your site trying to scroll up to see the rest.
- Break Points - Something that Pablo has thought me and it really works is choosing the right break points. For months I used to badger him about mobile phone in landscape mode and finally he gave me some points that really work, however this is also down to your design. If you know me, most my work is based on layers.
So you default should 980, 768, 580, 480, 320
I woulds add 1024 as well for larger monitors: 1024, 980, 768, 580, 480, 320
580 is for iPhone 6 in landscape mode and 480 is for iPhone 5 landscape mode. Although not many people would view sites like that but you want to be sure to cover all eventualities. Version 10.4 remembers these which is handy for your next project.
- Use larger images and resize them via WWB or (in the case of RZ's they have an option to define a size). The retina display on iOS devices are unforgiving and your images will be pixelated. So if you are adding a FaceBook icon for example that is physically 50x50, make the image 150x150 but resize it in WWB to your intended site. This way the iOS will show it crispy and clear.
- If you want to add telephone numbers, make the live links in your mobile site thus enabling the user to get in touch from the website rather than remembering the number and call later. These are little but important touches.
I hope I have not bored you, just sharing what I do almost on daily basis and GOOD LUCK!
