First,im newbie to responsive design.So far from my reading about responsive design, I have
learnt ,its about
flexible layouts
media queries
media queries came with CSS3
But where ever i have read about responsive designs on internet HTML5 ,CSS3 and Responsive design has been spoken together.My Question is
Is HTML5 necessary for a Responsive design ?
Does HTML5 tags like header or footer tag help in anyway to make the design responsive or its all about semantics ?
What about html4 and responsive design ?
thanks
Responsive design isn't specific to web pages, but that's where you'll most commonly hear that term used. I can make a responsive design in a Windows Form application via TableLayoutPanels, that is, the form scales nicely so it looks good full screen, and when it's only 1/8 of the screen.
But really, for desktop applications, there's not as much of a need for a responsive design, since most screens for a desktop / laptop aren't smaller than 13 inches or so, especially when writing business applications.
Mobile applications / web applications (for the most part) are the only things that get accessed on a wide range of devices with varying screen sizes, which is why HTML5 and CSS get talked a lot about when discussing responsive design.
There are a lot of mobile-friendly, responsive frameworks out there for developing for the web, one of which, my personal favorite, is Twitter Bootstrap. Using some media queries, but also defining widths as percentages of the screen, not pixels, is key in responsive design.
Hope that helps. Basically, responsive design isn't just about the web, but that's the most common place for it to be put into practice.
Related
I got a requirement! I would like to convert Normal Web Sites for Mobile Web Sites.
Actually I want a on premise software recommendation that has the capability to do the same as www.dudamobile.com for example.
Kind regards.
(Sorry for my English)
one of the things you could do is implent the Bootstrap CSS Framework (or any other CSS Framework), to style the website more mobile freindly.
Alot of CSS Frameworks are made to auto-adjust more freindly to native mobile browsers and other mobile browsers, and work for various screen sizes.
see: http://getbootstrap.com/css/#overview-mobile
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I want to learn some basics in website development so that I can control the look and design of my site.
My website developer says that a full screen header with a gradient left to right won't work because screen size differs from 1920 down to 420 for mobile phones. My website is being optimised for browsing on mobile phones. Is there a way around this?
I have an image of what I am referring to. How do I post it for users to see here? (My website is a customised Magenta Go website.)
The question is not extremely clear, but it's possible that what you're looking for are CSS3 Media Queries and "responsive design".
I really recommend looking at how Twitter Bootstrap is doing it: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Basically, you modify your CSS for different screen widths, possibly in your case providing different gradients for each case. And screen categories defined by Twitter Bootstrap in the aforementioned documentation seem pretty reasonable for most cases.
A general way to get a horizontal gradient to work on both large screens and mobiles is using CSS gradients, like this example. You can find an indication of browsers that support CSS gradients on the Can I Use website.
How to make a website layout and website content fix when the size of our monitor changes???Just like from 15" monitor change to 21" monitor...all of the content in website doesn't change.
Sometimes when we see our website in another laptop with different monitor size, the content of the website fall apart.
I make an application in which I use div tag but one problem is that in other or big resolution monitors it shows different view and some other monitors show another view of my Website. So how can I fix the view for all the monitor resolution.
I think media queries sound like they could be your saviour. You can use them to create a responsive site - from mobile to tablet to desktop etc. With media queries you can target different resolutions and fix/sort/adapt your design using CSS to make the best viewing experience for the user. This approach would be called Responsive Web Design, which is quite the buzzword(s) at the moment.
Some quick links for info:
Link 1
Link 2
If you feel like buying a book/e-book, I would recommend:
Responsive Web Design
Well come to the world of responsive web design, Your perfect solution lies in here
You need to explore Media Queries, Responsive Images as well.
I have created one HTML5 mobile web app and tested in different devices like iphone,ipad,android phones and tablets.How I can optimize the size and resolution for this app in all these different devices?
You could use CSS media queries to optimize your web app for different screen sizes rather than optimizing it for different devices.
Responsive Web Design is what you want. The Responsive Web Design article on MDN is good introduction and includes links to many other helpful articles.