I am a newbie in web design. I know basic html and css. Want to learn about responsiveness.
How to make a webpage responsive?
What technology I should use beside HTML and CSS?
I hope it will be simple easy and interesting to work with responsiveness.
Thanks in advance
You only need HTML & CSS.
Here is, in it's most basic form, what you need to do:
Other than that, just be creative. Think about what is and isn't needed for mobile, tablet, and desktop and hide/show elements.
Finding the code for the above should be easy but here's more info: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutor ials/
If you use Dreamweaver CS6 or CC, look at the FluidGrid Layouts feature for creating Responsive Web Designs.
Working Example - Resize your browser viewport to see it work.
If you don't have CS6 or CC, there are a number of Responsive Frameworks you can use to jump start your projects.
Project Seven's Page Packs (Commercial CSS Layouts for DW)
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
DMX Zone's Bootstrap extension for DW
i think reponsive is old news ,my take is you need mobile design stand alone.
You have that the wrong way around - creating a stand-alone mobile website is the old method and using responsive design is a little more beneficial these days. The main reason being if you create a mobile only website and a desktop version, you end up managing 2 versions of the same site. Responsive/Adaptive allows you to create 1 website and adjust the content to fit any screen. You can find any number of articles around the web about doing this using media queries and the viewport meta tag.
If on the other hand, you were creating a mobile experience, or app, separate from your website, then yes, you would create this as a stand-alone product.
Yes Rik on the surface, the idea of one website for all screen resolutions would seem to be the way to go, however it’s not good enough for most websites, responsive web design isn’t intended to serve as a replacement for mobile web sites with the main purpose of selling branding a product or service.
“To understand why you need to create a separate experience for your mobile user, you first need to understand that mobile is not just a smaller screen resolution; mobile is a behavior. Think about it for a second: people do not use their smart-phones the same way they use a laptop, desktop, or tablet. The size of their screen is not the only thing that defines them. They are usually on-the-go or distracted by another form of media (sitting in front of the TV). They may be impatient or looking for specific pages, and if your site does not load within 3 seconds 60% of them will simply leave and never come back”
“Responsive design is great, and if you’re planning a website redesign you should certainly consider it. However, if your main goal is mobile optimization, then responsive is simply not enough. Unless your website is just a blog or an online publication, you really should create a separate mobile website. Ultimately, you should ask yourself if the behavior of your mobile users will be different than those of your desktop users. If you know it will not, as is the case with blogs and online newspapers, then responsive may be your Holy Grail after all. For the rest of us, a separate mobile website is the best option.” ( Tim Macchi )
I agree that mobile is about a lot more than just screen size. The way people interact with Touch screens is way different than the way they interact with desktops. For example, navigation needs to be bigger and closer to the bottom left and right sides of the screen (where people's thumbs are). Forms need to be optimized for a better mobile experience. All these things can be done with properly defined media queries. You don't need a separate site to appeal to mobile web users.
Incidentally, fast loading pages are critical to all web sites, not just mobile.
I would say, design with Mobile in mind. But not exclusively. There's still a ton of people who use tablets, laptops, desktops and TV screens to surf the web. It's not a closed system, you know?
Now you are talking. Responsive TV (4k is the new big thing in display tech, and it's coming to a big screen living room TV near you). I Guess you are right as not to design exclusively for mobile what was i thinking ? TV . forget all the past preaching think TV. HO I HEAR YOU SAY, good debate mind you, thank you very much. for hitting (was this helpful) glad i could help.
build mobile first and foremost!
hello pal, the best way is establish in css diferent codes for different resolutions the most commos is three diferent conditionals one for big screen, one for medium and one for small resolution, in this way you can control styles for each or the most screen sizes, any question dont doubt in reply, greetings
You may use any reponsive web design tool. These tools are freely available over internet, with the help of which you can get a responsive website easily. For your reference you may browse few tools here http://blog.pixelcrayons.com/web-design/10-responsive-web-design-tools -to-speed-up-the-workflow/
Responsive web design services by PixelCrayons
The best method for learning about how to create responsive designs is to get to the CSS information that can allow a responsive design to happen. This is the @media rule in CSS, which tells the browser to detect the browser width of the device and can serve up different CSS rules based on the screen size. There is also a meta tag that may need to be added depending upon the browser for this to work.
The @media rule in CSS is one that every website will be using if they are not already so it is at the center of a responsive design. You can work with this within Dreamweaver CS6 and CC versions easily in the CSS Designer panel, but it is important to understand the concept. Different browsers may need the <meta> tag for the viewport added also, learn more about that tag at http://www.quirksmode.org/mobile/metaviewport/.
Learn the basics about media queries at http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html.