Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 03-26-2013, 05:53 PM
CountryNaturals's Avatar
CountryNaturals CountryNaturals is offline
Contributing Member
 
Join Date: 09-26-07
Location: California
Posts: 147
iTrader: 0 / 0%
Need Design Help for Mobile & Big Screen

I'm trying to design a simple website that looks good on a smart phone as well as a regular computer screen. I'm just getting started. This rough draft looks great on a smart phone, but the client wants it bigger on a regular screen. When I make it bigger, it requires scrolling on a smart phone. Any suggestions?

http://pawsitivetrainingcenter.com/z.html

Last edited by snakeair; 03-26-2013 at 09:25 PM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 03-27-2013, 03:15 PM
smanaher's Avatar
smanaher smanaher is offline
v7n Mentor
 
Join Date: 03-04-13
Location: Oneonta, NY
Posts: 329
iTrader: 0 / 0%
countryNaturals,

Have you considered developing with a CMS at all? Its super easy to find responsive templates that will have the mobile version squared away for you already.

If you want to continue using the custom HTML you have made, I would suggest building another site for regular computers and keep your current version for mobile devices. You will have to employ a custom script to detect when a mobile device visits the site and trigger a different style sheet when this happens.

Something like this,

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld"/>

Here is a post on redirecting mobile visitors,

http://www.webhostinghub.com/support...obile-redirect

Hope that helps,

Shawn
 
Reply With Quote
  #3  
Old 03-27-2013, 03:58 PM
CountryNaturals's Avatar
CountryNaturals CountryNaturals is offline
Contributing Member
 
Join Date: 09-26-07
Location: California
Posts: 147
iTrader: 0 / 0%
Thx, Shawn. If I'm understanding you, the custom script does the redirect seamlessly, but it doesn't reformat anything. I guess the bottom line is that no matter what I do, I will have to develop 2 versions of the site. Is that right? My temporary workaround is just to have an opening page, where visitors click their viewing preference.

http://pawsitivetrainingcenter.com/y.html

Is that a turn-off for visitors?

Last edited by J. H. Rasmussen; 03-27-2013 at 04:48 PM.
 
Reply With Quote
  #4  
Old 03-27-2013, 05:00 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
Suz,
You can do something like this for the mobile people instead of doing double work.

First of all start with a fleixble (liquid) design. i.e. it adjusts to different browser window width sizes without scroll bars when you get smaller. Old technique ignored by a lot of web designers. They prefer fixed size design and don't consider anyone below their chosen fixed width design (or elements). Same technique can be used today except we have to make it work for less than 640px wide now.

Once you get it adjusting nicely for down to 640px, you can further tweak with the following for phones/devices that are not smart enough to render without a little help.

Place in the head section
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet"> <!--[if IEMobile]> <link media="screen" rel="stylesheet" type="text/css" href="css/mobile.css" /> <![endif]-->
Then edit the mobile.css as necessary. You don't need to redo the CSS file, just the parts that need help on the small screen.

Now for the big screen TV, in the original CSS file you can use max-width for the container the surrounds the whole design along with a percentage width.
 
Reply With Quote
  #5  
Old 03-28-2013, 10:39 AM
CountryNaturals's Avatar
CountryNaturals CountryNaturals is offline
Contributing Member
 
Join Date: 09-26-07
Location: California
Posts: 147
iTrader: 0 / 0%
Great. This forum ROCKS! Thanks for all the help.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Stop designing for screen width, design for content HTMLBasicTutor Web Design Lobby 4 12-12-2012 05:18 PM
Mobile Website Design Service-Don't Ignore Your Potential Customers on Mobile Phones SEOGiant Sell Web Services 0 08-09-2012 08:09 PM
Mobile Web Design zeruel Web Design Lobby 9 11-20-2009 01:32 AM
Screen Resolution & Width of the Screen for Business Applications jelumalai Web Usability 1 12-21-2008 04:13 PM
Screen design Mrblogs Web Design Lobby 4 06-21-2006 11:22 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 05:51 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC