Responsive mobile landing page

[darrylyoung]

Hey everyone,

I have the task of creating a mobile landing page for a website and I have a few questions. The specification from the client is:

– coloured header bar at the top containing a logo
– the logo should be SVG so it can scale clearly (they currently use a JPG which looks bad on an iPhone 4 res)
– below the header will be a 100% width image (of the product) which will obviously scale with different resolutions
– there will then be a basic form with a select box and an input field (email)
– a button below the select/input which will be created using CSS (it will have a coloured gradient)

There’s not really much else to the page as once the user signs up/signs in they’ll go to the current mobile site. I guess they’re just trying a new idea just for a landing page for now. Basically, as the screen resolution gets larger the content should enlarge accordingly. I’ve seen this done with JS where every element had a CSS width set by a script which calculated it using the body width. This was extremely slow and seemed over the top. I imagine that you don’t need to make it perfect for every device but rather have a select few widths where things then have different styles (media queries?).

Here are my questions. I want this to look good in all mobile devices (up to the new iPad, I guess) so it needs to be responsive. If the user views it on a small screen I’d like the text to be x size (small) and then be larger as the resolution is larger. Obviously the image will be 100% so that’s not an issue. I’m just not sure the best way to approach this. Should I use media queries for certain resolutions, i.e. max-width: 400px, max-width: 800px etc? I’ve never used these but I’ve seen them on a few articles. Is it a good idea to use SVG for the logo? How is the support for this file type? I’m very new to the world of mobile web development but I’d really like to do a good job on this so any advice/articles will be much appreciated.

Am I thinking about this the right way or not? I just need to make sure that it looks good enough on all devices, regardless of their resolution, so that means original iPhones, Android devices, various tablets etc. How would you approach this?

Thanks in advance!

[Mottie]

I haven’t done much mobile development, but I do know that there are two mobile boilerplates:

• h5bp mobile boilerplate
• 320 and up

Hopefully that will get you started.

Oh and yes SVG has good support in modern browsers.

[Author]

Posts