Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    I would like some advice/guidance please.
    I have been working on a webpage which a client would like responsive for mobile viewing, but I have no idea where to start.
    I know that I need a viewport meta tag in my header and also some media queries in my CSS but if you would be able to guide me through this process I would really appreciate it.

    Thanks

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Ok... First things first.

    Mobile accessible and "responsive" seem to be one of the new industry buzzwords. The biggest problem with these buzzwords is their definition is so broad ... That there is a lot of confusion.

    Asking for a realonsive design is like going to a car lot and telling the salesman "I want to buy a new car"... A good salesman is gonna start asking a LOT of questions ... Not because he's a salesman... But because he wants to make sure he gets you something you're gonna enjoy and keep.

    As a designer, you should also ask a ton of questions to help guide you in designing something that he actually wants.

    Another problem with buzzwords, is people ask for them, but don't necessarily need them.

    Still going on today... Almost every one of my clients enquired about having a Facebook page and linkin their sites to all that mess... If after I explain to them, that not all businesses are going to benefit from it, and most times, keeping up with it is not value added to their business, they decide they still want it. I set it up, explain everthing as best I can, provide them step by step instructions.... Blah.. Blah... Blah... Of all the clients that went forward... 2 have actually benefited from it, and those 2 actually provide services that you can promote on Facebook.

    Sometimes an "abbreviated" mobile site is all that's needed . Current industry analytics show avg. smartphone users will browse a mobile accessible web site for 3-4 pages... Find what they are looking for, and move on. An abbreviated site is just that, basic about us stuff and contact information.

    Without knowing the site you're dealing with, and the potential markets... You're only gonna get guesses on what's the next step.

    Another big mistake some people make is to try and make the entire site mobile responsive, in the process, they break stuff and or make other things useless on the main site.

    Again, without knowing much about the site and of target markets, it would be guessing.

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I agree with Webzarus for the most part but there is one thing I would like to say.

    Even though people do tend to break designs while converting to a responsive one, I would personally just plan everything out ahead and start make the website responsive to begin with. The client should also know exactly what they want before starting all this.

    You should have a clear idea of what you want/need to do which will also help with organizing all this and make the site responsive without any major problems.

    I have a tutorial on this site on responsive designs in the tutorial section here: http://www.webdesignforums.net/threa...art-1-2.39536/
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  5. #4
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Excellent reply, thank you.
    I have already thought about what they would need on a mobile version from looking at what I have developed so far, and there isn't alot. Their homepage has an embedded video which would need to be on there, some images which are examples of deals, and some text then some contact details in the footer, that would be it, and as for the pages, they wouldnt need to sub-links in their sidebar etc etc just their text and an image.
    So with this in mind, I would still need guidance on how to start, but then when styling the stylesheet with the media queries, would I just use alot of "display: none" to hide the things i dont want displayed?

  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by adrian jones, post: 248479
    So with this in mind, I would still need guidance on how to start, but then when styling the stylesheet with the media queries, would I just use alot of "display: none" to hide the things i dont want displayed?
    Look at my tutorial on my above post. Explain's everything and includes download files for you to mess with.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  7. #6
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Thanks Andrew, will read through this now, I have just got to the bottom of Part 1 where you have added your media query.
    If I want the media queries to apply to the style of the site on say an iPhone, I presume I would put the width of the iphone screen in the brackets? And if so, would you happen to know what that is?
    And also for iPad? So I could have one set of media queries for ipad with the max width and then another set for mobiles with that max width.
    Thanks

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    The easiest way I've found to deal with a site owner that NOW wants a mobile desing ...

    I used a cName DNS entry to create a http://mobile.theirsite.com , depending on their wants and desires, the mobile site is completely standalone... But just remember ... Duplicate content is a site killer... So unless you're not careful ... ( I typically block search engines from indexing a mobile site )... You could hurt your search rankings going this route.

    But the benefit is... They get their "mobile site", it doesn't affect their main site ... And nothing that is done to the mobile site will ever affect the main site.

    Sure, it'd definately be nice to create 1 design that ALL devices could see... But circa the "browser" wars... No matter how good of a designer you are... You're gonna have problems.

    I go where the big boys play on this one... Meaning... Take a look at any large, well known site that's been around, and has a big following. Just about everyone has a seperate "mobile design" team... Dedicated to just the mobile site.

    Having been in the corporate world the bulk of my adult life... Especially with design, if ou have to coordinate and make changes to something that is going to affect another department... You increase your testing and development time by 10 fold... Add to that the bueauracy of approvals.. And the such... Neither design team would ever get anything done.

    Now... How you gonna handle mobile devices other than iPhone and Android ? Yep... Depending on your target market, you have to deal with and code for "non-smartphone" mobile devices that most of the time won't handle anything but basic JavaScript ... So the design MUST degrade nicely for those visitors, or the whole "responsive" design thing is useless.

    Then there's testing for as many mobile platforms as possible...

    Visit: http://newyorktimes.com on a flip phone ... Last time I did, they had a design that worked. But it was different that iPhone, tablet ...

  9. #8
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by adrian jones, post: 248481
    Thanks Andrew, will read through this now, I have just got to the bottom of Part 1 where you have added your media query.
    If I want the media queries to apply to the style of the site on say an iPhone, I presume I would put the width of the iphone screen in the brackets? And if so, would you happen to know what that is?
    And also for iPad? So I could have one set of media queries for ipad with the max width and then another set for mobiles with that max width.
    Thanks
    You can set as many arguments as you want. If you look at the demo site provided, this tutorial alone works for all sizes.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Not making arguments.. But I've been surfing the web on cell phones for over 10 years, and I'm probably one of the few people you'll ever know that actually coded in WAP BEFORE there was a 2.0, and forget CSS... CSS was not even recognized by any mobile device until WAP 2.0 came out with WAP CSS.

    I wasn't slamming your tutorial ( I've never read it ), and have no desire to, but I am pointing out some obvious things that that someone that may be new to all this may not understand.

    1. There was life and design on the Internet before iPhones and Android devices.
    2. Not all devices are created equal.
    3. Buzzwords just screw with everyone's definition of things.

    The "responsive design" paradigm was a marketing creation to give something old... A fancy smancy techie sounding name. It's called "cross-browser" support.

    Just like the term web2.0 was a marketing creation to give a name to something that already existed for those that have been serious about development and design for years.

  11. #10
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I'm not trying to argue either. I know you are a lot smarter than most of use here, i'm just sharing what I know.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com