1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem in creating responsive website

Discussion in 'HTML & Website Design' started by Shubanshi, Feb 22, 2013.

  1. #1
    Can anyone tell me how to create a responsive website? What are the steps needed to do it?
    Shubanshi, Feb 22, 2013 IP
  2. somendra

    somendra Greenhorn

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    8
    #2
    Responsive website is one which is easily readable and provide easy navigation in various devices like desktop, smartphones and mobile phones without much resizing, scrolling and panning. You can find many blogs from google about how to create a responsive website design. I found many blogs but one of which I found really useful is this: PSD to HTML Conversion to Create a Responsive Website for reference http://www.wpintegration.com/blog/is-responsive-design-profitable-for-b2b-marketers/
    Last edited: Feb 22, 2013
    somendra, Feb 22, 2013 IP
  3. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #3
    Step one -- semantic markup of your content saying what things ARE, NOT what they look like. If you choose ANY of your tags based on appearance, you're choosing the wrong tags.

    Step two -- plow HTML 5 and the WhatWG it rode in on. Most of it's allegedly semantic new tags are redundant if you are using numbered headigns PROPERLY and quite often get in the way of making a responsive layout.

    Step three -- create a semi-fluid layout (typically targeting "screen,projection,tv") and try to keep ALL design elements fluid. If you are fixing the width of ANYTHING or the height of anything past a horizontal menu up top, you may be shooting yourself in the foot. A few extra DIV may be added to the code at this point to let you apply that layout -- and it's important you use DIV for this -- DIV is semantically neutral, it doesn't change the meaning of it's content; As such if you have semantic markup and just want to apply style, that's DIV or SPAN's job. Hence what's wrong with the dipshits abusing HTML 5's "ASIDE", throwing "HEADER", "SECTION" and "ARTICLE" around things that are none of the above, etc, etc... (and don't even get me STARTED about hgroups)

    Step four -- use media queries to strip away formatting as needed from your layout as the width narrows. You might have a header image that doesn't fit -- kill that image and use your images off graceful degradation.... you do have that right? (Oh wait, most people don't even know what that is).... as it gets too narrow you can make a column no longer float and instead drop below the content... you can change how the menu is built, etc, etc..

    There are also some things that IMHO have no business on websites in the first place, but are even LESS appropriate if doing responsive layout. Endless pointless scripting libraries for goofy animated crap isn't just annoying on mobile, it sucks the battery dry faster. Massive images everywhere sucks down the RAM when many of these devices end up with barely 256 megs free once the OS is up and running...

    Really it just comes down to good coding practices -- if you've been building elastic, fluid or semi-fluid layouts with dynamic fonts using media queries for responsive layout is just the next logical step. On the other hand if you've been crapping out fixed width layouts with fixed metric (px) fonts with zero regard for anything but "What does it look like on my screen" -- mated to outdated HTML 3.2 with either 4 tranny of 5 lip-service around it alongside endless pointless 'gee ain't it neat' scripting crap -- Well, I might as well be talking an alien language.

    you put that all together, and you end up with a website like this:
    http://www.ewiusb.com/

    Which works great on pretty much everything I've thrown at it for screen size.
    deathshadow, Feb 22, 2013 IP
  4. Currency Trader

    Currency Trader Member

    Messages:
    176
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #4
    Thankfully, more and more responsive templates and themes are being offered for sale

    Unfortunately, the choice is still very limited compared to the wide variety of non-responsive designs

    But at least things are moving in the right direction, for people who buy in ready made templates and themes, because they neither have the skill, or patience to build themes and templates from scratch - like me!
    Currency Trader, Feb 22, 2013 IP
  5. creativewebmaster

    creativewebmaster Active Member

    Messages:
    641
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    53
    #5
    Dear Subanshi,

    Here the some of the steps for the responsive website design will help you to build responsive site.

    - First of all you should be aware to create HTML strcutures as per the different browsers screen that mean HTML should be created in 100% width and font should be in % or EM.

    - Use HTML5/CSS3 Stanard

    - CSS3 Media queries is the trick for every responsive web design

    - All images need have maximum width set

    Thanks,
    creativewebmaster, Feb 23, 2013 IP
  6. Currency Trader

    Currency Trader Member

    Messages:
    176
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6

    Is it straightforward to go through an existing template/theme and change it to responsive?

    That would probably be quicker than trying to find something I like and ready-made from the limited choice of commercially available responsive designs
    Currency Trader, Feb 23, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #7
    That usually hinges on if it was written "properly" in the first place -- if it was built with a fluid or semi-fluid layout, using semantic markup (aka choosing tags based on their meaning and NOT their default appearance), with an eye towards minimalism and went easy on the 'gee ain't it neat' animooted javascripted bullshit, then sure... easy enough done.

    If some photoshop jockey crapped out a pretty picture of a website, had the cojones to call themselves a designer, and then some slicer divvied it up into bits and pieces with no regard to making the layout adjust to the content, resulting in an inaccessible half-assed moronic fixed width fixed font-size everything absolutely positioned disaster -- Not so much.

    ... and you have the full gamut of designs that fall between those two extremes. I know with my own sites which have been fluid or semi-fluid for over a decade, and because I had been using mcSwitchy (which is kind-of a javascript precursor to media queries) responsive layout barely even warrants a new name, it's what I've been trying to do for a decade. It is the next logical evolutionary step... but again, for the people who still crap out fixed width layouts, have no clue what semantic markup actually means even when they claim to use it, and in general have their heads wedged so far up 1997's backside you'd need an orthodontist to handle the extraction -- all of these concepts may as well be an alien language.
    deathshadow, Feb 23, 2013 IP
  8. Currency Trader

    Currency Trader Member

    Messages:
    176
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #8
    OK, looks like I'm just going to have to try a few likely-looking themes and see if I can tweak them

    Just that I'm looking for responsive hotel themes for a specialist CMS platform, where no suitable ready made themes are available
    Currency Trader, Feb 23, 2013 IP
  9. kulik

    kulik Member

    Messages:
    162
    Likes Received:
    18
    Best Answers:
    1
    Trophy Points:
    45
    #9
    This is a cool little test you can use as you try to make your site responsive http://mattkersley.com/responsive/

    You may also want to Google "grid system for responsive design", there's a bunch out there you can play with to learn different grid system methods.
    kulik, Feb 23, 2013 IP
  10. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #10
    I always kind of laugh at tools like that -- since all you have to do for testing is resize the browser window... but that's one of the reasons I like the web developer extension of FF -- in addition to the document outline showing just how broken someone's heading orders are and just how many files and how big they are, it has a window sizing control where you can set all sorts of custom resolutions.

    Though I still suggest where possible using the developer emulators and/or real devices just because the differences in how things like scrolling, zooming and font-rendering work. For testing iOS the iPhone/iPad emulator built into xCode is great -- hard to get to being OSX only, but I've found the Server edition of Lion runs just fine under VirtualBox. Likewise the Android emulator that comes with the Android SDK is great too... The droid one will also let you install Opera mini -- important to test since just a year ago it was still the number one mobile browser, and hovers around 30% at the moment. (and may go UP once they switch to webkit)

    Of course that Opera Mini has lost share and at the same time gained users is another of those cautionary tales of "Don't let people use percentages to lie to you".

    In any case, like any other aspect of web development, test, test, test some more, and when you think you've tested enough, you're halfway done.
    deathshadow, Feb 23, 2013 IP
  11. kulik

    kulik Member

    Messages:
    162
    Likes Received:
    18
    Best Answers:
    1
    Trophy Points:
    45
    #11
    Hah, I'm horrible with design and a newb to responsiveness like OP, but thought that was a useful site when I try things. Thanks for pointing out the Add Ons and emulators, those seem like they will be very useful.
    kulik, Feb 23, 2013 IP
  12. Currency Trader

    Currency Trader Member

    Messages:
    176
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #12

    I also use the web developer firefox extension - just for a quick test

    For a more thorough test I use Mobilizer - a free desktop app which tests in 4 smartphone simulators
    Currency Trader, Feb 23, 2013 IP
  13. -0-

    -0- Active Member

    Messages:
    48
    Likes Received:
    20
    Best Answers:
    1
    Trophy Points:
    55
    #13
    I would post a link to what I have been using to test things including the responsive xenforo style I am working on but I don't want to go ahead and get myself a warning or something on my first day that I am really posting, but short of sharing that link...

    You can do what I did a while back (on windows) and install a vmware product and create a virtual installation of whatever OS you would like to test in off of your installation disc/image...with a little tweaking you can even get a mac OS image running on top of it (I know every person who uses a mac wants to shoot me for suggesting that right now...sorry) which a lot of people who have used vmware say can't work but here to save that argument from happening...


    and then as deathshadow pointed out, xcode has the iOS emulator/simulator which you can use on top of that to target apple mobile products...

    Point is you can make a virtual appliance for each OS version you need which will include 3 versions of windows:xp, 7, 8 to cover all of IE's madness because you can't really go back and forth between ie versions and compatibility mode is complete trash for one and two xp can run ie6 ie7 ie8, win7 can only run ie8 and ie9 and windows 8 only runs ie10. Then you can go install all your other browsers to those windows images....you also install all the browsers you can on your mac image and any mobile emulators that you can. If you want to go and get fancy you can go install a linux distro as well.

    If all that is too much work you need a paid service that will handle all of the virtual stuff for you so you just login and test stuff.

    Any time you make a major change check in a few of the most common browsers, catching a problem early will save you a LOAD of time later if you are new to doing this stuff...I in fact got lax with testing the other day and found myself with 10 times more work in the end...all because I didn't take the necessary steps.
    -0-, Feb 23, 2013 IP