I have designed 3 versions of a web page - desktop, tablet and mobile. Content is same but layout is different. Which approach is best to convert the page to responsive html: a) Separate html files b) Separate CSS files c) Single CSS file You can view jpegs of the 3 versions here: Desktop: http://shrineweb.in/other-files/clients/showyourskills/test/Home.jpg Tablet: http://shrineweb.in/other-files/clients/showyourskills/test/Home-tablet.jpg Mobile: http://shrineweb.in/other-files/clients/showyourskills/test/Home-mobile.jpg I am new to responsive web designing, please givew the best advice. NOTE:- Mobile version's navigation (top-right) is different from Tablet and Desktop version. Thanks in advance.
Well, first off you've not designed a website, you've drawn pretty pictures of what a website MIGHT look like; dicking around in Photoshop before you have semantic markup of your content or even a working CSS layout is putting the cart before the horse, and a back-assward approach to design that most always results in inaccessible train wrecks. ... as evidenced by design elements present in your pictures that quite possibly aren't even viable in a responsive layout! (no matter what the ignorant halfwits advocating broken bloated framework garbage like bootstrap might tell you...) Generally speaking responsive layout is about having just one HMTL file and using CSS media targets to customize the appearance... and that's actually nothing new since the MEDIA attribute (which has existed for LINK since LINK was introduced SIXTEEN YEARS AGO) exists for that very reason. HTML is for saying what things ARE (or would be if professionally written), so that the user-agent (aka browser) can best determine how to convey that content. The idiotic bekaptah bull known as HTML 3.2 (and by extension HTML 4 transitional) got away from that, and HTML 4 Strict was supposed to drag everything kicking and screaming back to HTML's original intent, with CSS added to say what things look like. Which is why over the past decade and a half we've been told to STOP writing presentational markup, and STOP focusing on 'what it looks like' before you have even said what things ARE. Separation of presentation from content, semi-fluid layouts, dynamic fonts leading to elastic layout -- these were all the stepping stones that led to responsive layout's creation! As such your first step should be to figure out what the content of the page is, or at least start with a reasonable facsimile, and mark it up semantically. You then create your first (of many) layouts using CSS. Generally speaking you should have only one CSS file per base media target (screen, print, etc) you are customizing for, and then you should have media queries inside each target to customize the layout to the available space. Some people like to make their first CSS layout be the narrow mobile one -- I prefer to start with legacy IE that doesn't know media queries or min/max-width first, and expand/shrink from there -- just makes more sense since there are a hell of a lot more people using legacy IE at desktop resolutions than there are people on mobile devices that can't handle our media queries. Then and only then should you start up your goofy paint program to make the graphics you hang on the layout (if any, thanks CSS3!). Note that I'm saying build your layouts in the CSS, instead of dicking around in photoshop or some other paint program where you can do things that to be frank, most likely have no damned business on a website in the first place. That's a buggy broken garbage approach to design and whoever came up with it needs to be lined up against the wall... So... throw out your pictures, mark up the content semantically, then bend that markup to your will with CSS to make all your different layoutS. ALL of those layouts should be semi-fluid (shrinking to fit but with a maximum width to prevent long lines of text from being hard to read), elastic (shrinking and growing with the default font size which can be different from system to system), AND responsive (adjusting to the available screen space as needed). As I often tell people: Responsive layout is just the next step in a long line of accessibility improvements; if you've embraced HTML 4 Strict (or XHTML 1.0 Strict), semantic markup, separation of presentation from content, semi-fluid elastic design, and have a comprehension of advice laid out in things like the WCAG, it's readily apparent how to use it. If on the other hand you have your head wedged up 1997's backside (using 4 tranny or 5 lip-service -- after all transitional MEANS "in transition from 1997 to 1998 coding practices"), still sleazing out decade and a half out of date methodologies and screwing around drawing pictures in a paint program instead of actually designing, well... everything I've said so far might as well be an alien language. The laugh of it being HTML 5 is the worst of 3.2 / 4 tranny returned to haunt us, delivered at the same time they give us the proper tools in CSS to do everything STRICT was supposed to help us with... of course with the vast majority of people sleazing out websites any old way 1997 style it's hardly a shock the W3C seems to have basically shrugged it's shoulders, given up on DECLARING specifications, and instead just gone "oh well" like they did when 3.2 was created. Finally, a bit of advice: don't forget the golden rule of markup -- if you are choosing your tags based on their default appearance, you are choosing the wrong tags for all the wrong reasons! -- edit -- almost forgot... one bigger piece of advice: STOP thinking about your sizes by 'device'; that's just as flawed as fixed width design or browser sniffing. Media query 'breakpoints' should be chosen on the needs of the CONTENT at different widths, NOT the widths of the devices. Tablets come in a slew of resolutions ranging from 640x400 to 1920x1080. Phones come in a slew of resolutions ranging from 192x256 to 1920x1080 (the high end of that getting a bit ridiculous and pointless -- starting to tread into FLAC-tard scale of placebo bull)... desktops can range from 640x480 up to 4096x2880... Thinking about it as "tablet, mobile and desktop" is broken ideology, your layout should change as needed by screen size; the CONTENT being what you use to determine when to make a change. You don't start out thinking "400x640, 600x800, 800x600, 1024x768" and so forth -- make your break points where they are needed. Even more so when/if you use elastic layout at the same time, since all your measurements will be in EM, a value that has NO direct correlation to pixels. (anyone telling you 62.5% doesn't know enough about fonts to be opening their yap on the topic! Yes Apple developers, I'm looking at you!)
You should 1 HTML file and then a different CSS file for different screen sizes, import the CSS files using media queries.