Hello Friends... i want to know When talking about responsive web design, what are the differences between the Mobile First and the Desktop First approaches? Where does each excel and what are some of the issues it leads to?
Mobile First or Desktop First for this, we must give the good design view also clean fast site to load in mobile and also desktop. Because if our site have good design and fast loading, visitors will stay long time in our site. We give best experience to the visitors. In mobile and desktop, have different point in design (compile code n css) but have the same aim. that is give best experience to the visitors.
Disregard the broken engrish BS answer above. There is no such thing as "mobile first" - or, rather, there shouldn't be. If the site is coded for the least common denominator, which will be the desktop (less differences between setups, browsers that is using the "default" styling, mostly, etc.), then making it fit on a mobile screen is a piece of cake, and usually involves a few lines of CSS in @media-queries to cater for different breakpoints. Talking about breakpoints: having them set to specific px-widths are idiotic and useless, since it doesn't do anything if the user is using the site with non-standard settings for font-size or similar (125% zoom in Windows, for instance). Use measures that aren't fixed, like % or "em", when creating breakpoints, and create them when the page needs changing, not based on what size the screen is on a given device. Given the above sentiments, you always code for desktop first. Or, rather, what you do first is create a pure HTML-site. No styling, no server-side code (except for outputting the basic HTML, if needed to pull data from DB or similar), and make it work. Then you add CSS to that, basing it mostly on the elements you have in your semantic HTML. If need be, add <span> or <div>-elements, which are semantically neutral, for extra elements to style, and add IDs and classes as need be. Don't fall for the scambait that is Bootstrap, for instance. It's a bloated wreck, and while it does provide some neat features for noobs trying to make specific layouts, it doesn't teach you anything about web-design, proper markup or correct use of CSS.
I don't agree with the above answer, because i have couple of years experience in mobile app designing. Generally when you are doing RWD(Responsive Web Design), Its always good to start with mobility than desktop. The reason behind this is if your able to fit a design in a mobile where the width available is minimized, then its very easy to fit the same design in a desktop where you will have the max width. One more thing is its always advised to use a responsive framework like Bootstrap for RWD because in a frame work more frequently used elements are predefined, means you don't need to redefine them using media quieries and also Bootstarp is one of the best RWD framework since its also gives good compatibility with IE and also inbuilt JS functionalities. If you still have anymore questions you are always welcome.
Your apologia makes no sense. First of all, if you're going to play the experience card, you'd better have more than that. Yours haven't dropped yet, youngster. The html document, in its native state, is pretty much automagically responsive to viewport width, naturally reflowing to fit whichever UA it's on. The new @media queries simply allow us to pick the reflow points, or even alter the nature of the document. Where your small to big progression fails is in the media breakpoints being neither obvious nor explicit. Nothing breaks with increasing size. You must make decisions on a nebulous artsy-fartsy basis. That means you will probably make your changes based on UA guesswork rather than content. Going the other way (desktop to mobile sized UAs) means it becomes obvious when a breakpoint is reached, and that breakpoint is explicit; you can see exactly what broke and how it needs to be fixed. Breakpoints are based on the documents content and not on the UA. Puh-leeze, Bootstrap? Even at only two years experience, you should recognize crap markup and crap css when when you step in it. Bootstrap (Bs, hereinafter) is a further abstraction of what are simple declaratory markup and presentation languages; making what are simple languages difficult by adding tons of silly markup and even sillier css. With Bs's markup and its stupid (let me repeat that), stupid choices of non-semantic id and class tokens, it nearly always means you're fitting content to a predetermined layout, where content should always precede markup and style. Bs is so effed up, I don't think you could apply it to a well organized document and appropriate semantic markup. All Bs based pages I've ever seen have been bloated by unnecessary, deep nested markup, numerous style sheets and jQuery support to the point that debugging and maintenance are uneconomical. In a nutshell, Bs is BS. gary
Shouldn't all websites be responsive and look great across all platforms? Over half of all web searches are done from mobile devices now so why would anybody design around a desktop site?
Yes, they should be responsive, and the best way to get there is to start large and work your way down through different layouts for the smaller viewports. You do it in that direction for the reasons (and more) I stated above. Cruise through @deathshadow's various posts on the subject for a more expansive explanation. gary
You missed the question -- that of the process to REACH being great across all platforms. In that way, I go with a legacy PRE CSS3 capable desktop layout before I worry about taking it responsive. Said layout having all those stepping stones to accessibility that should be in place BEFORE you even THINK about making it responsive like using dynamic fonts, semantic markup, separation of presentation from content, with the result being semi-fluid and elastic. Then and ONLY then do I think about adjusting the layout for modern browsers and screen sizes. The reasoning for this is simple, we can TARGET modern browsers with media queries, we CANNOT target legacy browsers that don't even know what a media query IS. Why the hell would anyone START with what we CAN customize for instead of what we can't?!? In that way the "mobile first" mentality, is exactly that -- MENTAL. Utterly and completely back-assward since all you're doing is telling desktop and legacy users to sod off, and completely missing the point of HTML. Though to be frank "mobile first" and "desktop first" is an IDIOTIC dumbass mindset since neither of those should be "first". It reeks of presentational thinking and dicking around in paint programs calling it design, without knowing enough about HTML, CSS, or accessibility to be qualified to design a Joe-blasted thing! CONTENT FIRST is the approach I advocate -- taking your content or a reasonable facsimile of future content and putting it into a text editor in a logical order as if HTML didn't even EXIST. Then you add your semantic tags (headings, rules, lists, paragraphs) to say what things ARE and not what they look like since the FIRST step of building your HTML is NOT about addressing the needs of people with perfect sight on the same size/resolution display you are seated in front of. WEBSITES are SUPPOSED to be about "content for everyone!" -- non-sighted, partially sighted, deaf, people on less capable hardware, limbless... and of course, search engines don't have eyeballs so it's not like they should ACTUALLY give a flying **** what you do for layout. Though the check for mobile usefulness is a good idea, wish they'd factor in other accessibility issues like garbage font sizes.. Since that's second step is about MEANINGS the semantically-neutral tags like DIV and SPAN wouldn't be added yet since they mean dick. Also why I dislike HTML 5's idiotic halfwit dumbass pointless "structural" tags like NAV, SECTION, ASIDE, etc, that are nothing more than code bloat BS that pisses on logical document structure an accessibility whilst claiming to provide same. Then and ONLY then do you get so far as creating your legacy desktop layout... once that's complete you add media queries to add/remove/relocate the layout to meet smaller (or even larger) display needs. Only after all that would any JavaScript enhancements be added. It's called progressive enhancement, and is the approach you should use to be certain your page "gracefully degrades" so should any fancy doo-dads be missing or blocked, the user still gets the CONTENT in a useful fashion. CONTENT first, then legacy desktop, then CSS3 desktop, then responsive layout. Anything else is usually a poorly coded bloated slow loading inaccessible mess slopped together by PSD jockeys who know shit about shit and order their pansy limp-wristed artsy-named burnt foul-smelling "coffee" at Starbucks where suddenly we're calling cashiers "barista's" like you're at some fancy 1890's french cafe run by a gourmet and not some post-conjunction chain store waited on by some special snowflake teen with their pants around their ankles. Choke on this you danceteria types.
One of the reasons I go online other than for work related stuff, is to improve my command of English as I am ESL. But *only* on DP can I find English like this!
I paint pretty pictures with words. Friend of mine is from China, and he says it's odd dealing with English speakers as we have and even encourage the use of colloquialisms -- apparently the CONCEPT itself is frowned upon by the State over there. Made all the stranger by the fact you can apparently make good money teaching English in China on little to no credentials. I think I said "Well tie me to an anthill and smear my ears with jam!" as a simple interjection, and he sat there in deep thought just digesting the phrase trying to figure out what that had to do with anything. At least European languages HAVE the concept...