Make Responsive Website

Suggest me easy methods to make website responsive.
If u have any tool or plugin for this purpose please share.

 

Making your site responsive isn't just something you can easily do...
The process starts from the moment you type your very first letter of code. There aren't any 'easy methods'. If your developer ignored responsiveness as he was making your site, chances are you better start from scratch, instead of messing about in your html/css. If you're lucky you can solve your problems using some (or alot...) media queries (google that).

You can use frameworks to aid you in the process, as I did, and I found it to be quite helpfull.

It'll probably be easier to just give us the link to your site.

 

Start off with a semantic markup, enhance it PROGRESSIVELY with CSS and juggle with different layouts using media queries. And that's it.

I respectfully disagree.

 

Well, that depends on how, as you said, semantic your site is, how much content does his site have....and yes maybe I spoke too soon, it COULD be fairly easy, but in most cases I wouldn't count on it.

 

The easiest way is to choose a suitable Responsive Template. For example see templatemonster.com

 

Add this line to head tab:
<link href="styles.css" type="text/css" media="screen" rel="stylesheet"/>

Add below CSS for responsive:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Code (markup):

 

In modern conditions based on resolution of the screen is not quite correct, because there are screens with different pixel density.

 

Hi Habibkhan,
If you already know HTML/CSS I assume that it would be handy to make your website responsive yourself. Here are the 2 resources I am sharing with you that I personally took help from when starting responsive themes...

www.1stwebdesigner.com/css/responsive-website-tutorial/

froont.com

I hope this will be helpful for you

Regards
Hassan

 

You can create CSS rules to apply different styles based on the page width or orientation. For example, you can make the menu a fixed width on screens smaller than 768px, and fluid on larger screens. Or make list items float left on screens larger than 1024px.

 

Responsive website are the demand of modern days. These sites are the best because they gave great looks to the site, attracts the more visitor to the site. Today most of the web designer offers good responsive web design services.

 

Do you use Joomla or any open source system?

 

Just replace your template with a new responsive one. It's the easiest method if it's a wordpress.

 

Mate you have 1 super nice video on youtube about making wordpress website and make it responsive and so on .Check it it's 1 hour long.


I hope i helped you

Greetings

 

Use bootstrap. it more easy and helpful. it very new technology. i use it. it very easy to use and helpful.

 

thanks to all for giving these useful tips.

 

u could try with bootstrap

 

If you start from scratch you can play around and test how blocks work before you have content in there.
It gives you a great idea just seeing borders and how boxes with background colors reshape and interact with the page - plus if you get this right, it will save a ton of time once you're adding content.

That said, designing from scratch is more work, but for a truly responsive layout that isn't dodgy and filled with more markup than it should be, it's best to build from the ground up. Not all sites should just 'use bootstrap' because they can.
Rather put the key elements of your site on paper.
Decide what you want on the different devices.
Then get someone who knows what they're doing to build it.

Responsive design is something that should be built from the ground up.
I redesign a lot of static sites and they're garbage. Usually code isn't too neat either, so playing around would be a waste of time. Once you know what the code does, you can just look at a static page and design a responsive page identical to it *if you wanted. Doing this is much quicker than trying to rebuild code and optimise something that wasn't intended to be responsive.

Best of luck

 

I have NEVER found it to be more work -- at least if you give a flying purple fish about sustainability, maintainability, accessibility and so forth. Most 'frameworks' by their very nature encourage inaccessible non-semantic markup, presentational use of classes, and as such are the opposite of the entire point of using HTML to build a website in the first place!

Which is why to me anyone saying to 'use a framework' needs a double helping of sierra tango foxtrot uniform -- with a wee bit of golf alpha foxtrot charlie on the side. Idiotic halfwit BULL like Bootstrap does nothing to make anyone's life easier, no matter how many people out of apathy or ignorance claim otherwise.

A while back I answered one of these threads with a "simple" example of how I develop a site -- using what we should ALL be using in terms of semantic markup, separation of presentation from content, progressive enhancement so it has graceful degradation, and the 'for screen' layout being semi-fluid, elastic and responsive.

https://forums.digitalpoint.com/thr...-and-responsive-design.2657812/#post-18592775

The big thing is that if you've been paying attention the past decade and a half to what things like 4 Strict and the WCAG have been trying to tell us, practicing fluid or semi-fluid elastic layout with semantic markup and separation of presentation from content, adding the new 'responsive' layout is a no-brainer that takes little if any effort. The ONLY reason it's a struggle for most people is their basically still having their head wedged up 1997's ass; with their non-semantic layout, presentational use of classes and tags, inaccessible design and bloated halfwit bullshit frameworks.

Which is why bootstrap is just as likely to bite you in the ass going down the road as anything else, since it too is an inaccessible wreck that pretty much ignores all the progress of the past fifteen years. But then what do I know, I say the same thing about that idiotic halfwit bull known as HTML 5!

 

deathshadow, you totally misunderstood my post, I think???
I was not advocating, at all, that someone should use 'boot strap'.

^ That was in fact my way of saying do not use it (or other frameworks/cms') just because they're there/available/ready to use.
Just you quoted me and I'm guessing you misunderstood, or more likely I failed to use enough words to explain my point in better detail, if that indeed is the case my apologies.

As for suggesting it's easier to build from the ground up, it is *in my experience.
So often I look at a layout or design concept and can build it much quicker, with much less code than I could if I was to delve into code that was already there, but maybe that's me.

I was not suggesting a well known site should scrap and rebuild, but rather if you have the opportunity to have not laid a letter of code, seriously sit back and think about it, all the elements you want and need, especially the ones you don't want on smaller devices. I look at it like building a house, if you've built a house before then the next one you build you can spend more time 'planning' to get it right. And if you've built thousands of houses, then you could build a brand new one much quicker than you could repair all the elements in an old one that is falling apart.

Sorry if I was getting my wires crossed, just reading many of your other posts I agree with you in huge ways. I hope this post clears it up

 

I think you got confused as I was agreeing and disagreeing at the same time. I agree people shouldn't just use "bootstrap" -- at the same time I've never understood how anyone could consider using it to be "easier" or not using it to be "more work"

That was my point... since you said: "designing from scratch is more work -- I'm saying it isn't.