imo, you should just avoid using animations for mobile devices. Apart from the tricky animation situations, there's also a risk of a choppy experience as phones are not as well equipped to handle graphic intensive tasks as.. say, a desktop system. This though, is changing. Phones are becoming fast and snappy literally every day so it's not actually a bad idea to deliver a rich experience to your mobile users. Val Head has written a really amazing guide on handling responsive animations which you can follow: 24ways.org/2015/animation-in-responsive-design/ Hope it helps! 😊

I think it's a pretty nice addition. Adding to the last quote you mentioned, what I would say is: I think it's good to have flexibility in the UI solutions that are available to us. Each one of these has a specific use case they address. No one solution is perfect for everything. Plus, it will be pretty good for designers and users as well. The way I understand it is: Hamburger : Major sections in a larger app Tab Bar : Sub-sections within a view, to split content types for instance Kebab : Contextual actions for the current view (refresh, help, etc.)

Two ways to do this without using Javascript: using <picture> tag for images As @krazzeniru20 explained in his answer, you can use the <picture> tag in your markup which goes something like this: < picture alt = "description of image" > <!-- low-res, default --> < source src = "small.jpg" media = "(min-width: 400px)" > <!-- high-res --> < source src = "large.jpg" media = "(min-width: 800px)" > <!-- Fallback content --> < img src = "small.jpg" alt = "description of image" > </ picture > Here, the image mentioned inside the <source> tag would load up as the browser hits the breakpoint mentioned in its media attribute, which is pretty simple and straightforward. more info here: css-tricks.com/on-responsive-images/ Another way to do this would be: using srcset attribute with img If, on responsive screens, you are switching between different versions of the same image, you can just put in an srcset attribute on the <img> tag. here's the syntax: < img src = "small.jpg" srcset = "medium.jpg 1000w, large.jpg 2000w" alt = "description" > More info here: css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ So.. the question arises, When to use what? Here's a little help with that : The reason that image tag with srcset would need different variants of same images is cause the browser actually calculates and load up the best possible image for the user's screen size instead of just replacing the image for a breakpoint. If you are trying to show a different image for a different breakpoint, <picture> is the solution for you. <picture> with explicit sources, the browser has to do exactly what you say and not make choices for itself. Hope it helps! 😊

I doubt if one can change the internal properties of an SVG when used as a background image. The internal elements of an SVG are visible only when you put it inside the markup as an <svg> tag; Since the SVG elements are not accessible in the DOM when used as a background, you cannot edit it.

You can perhaps play with border-radius and :before, :after psuedo elements to achieve something like this. The amount of curve can get would be limited.. but it's achievable nonetheless. Try adding a border-radius to make the div edges rounded and use :before and :after with their own border-radius and a background to make up for the top and the bottom curve. upvote if it helps :)

Yeah.. Big projects have much complexity involved, they need a planned development effort which i guess these tools can never provide. They can be pretty useful for the little guy though :)

I think you can use something like foundation joyride to replicate the behaviour like your screenshot.. http://foundation.zurb.com/sites/docs/v/5.5.3/components/joyride.html foundation is a whole framework but you can find many jquery implementations of joyride

Exactly! but that's the thing, These websites are not 'simple'..there are fairly complex websites listed here: http://muse.adobe.com/site-of-the-day and if people are able to make these kind of websites using a tool, I think they have a good chance of stealing the game from front-end developers.

Not sure what you're trying to do exactly. If you want the website to look the same way it looks in smaller screens, Then perhaps you should consider replacing this code in the first top container <div class="row"> <div class="col-lg-7 nopadding" align="left">...</div> <div class="col-lg-5 nopadding" align="left">...</div> </div> with this: <div class="row"> <div class="col-lg-12 nopadding" align="left">...</div> </div> <div class="row"> <div class="col-lg-12 nopadding" align="left">...</div> </div> So the elements would appear in different rows and would take up the full width of the page instead of appearing adjacently. in case i misunderstood the issue, let me know in the reply so i can help you better! ;)

Yes, I am totally excited about swift being open sourced. I think it has great potential to be a very good general programming language for many platforms, not only iOS. Looking at stats, Swift is the most loved language of 2015 according to stackoverflow survey . I haven't tried swift hands-on but I am definitely looking forward to using it in future.