Stats: 3,191,879 members, 7,945,829 topics. Date: Wednesday, 11 September 2024 at 07:41 AM |
Nairaland Forum / Science/Technology / Webmasters / Designing A Mobile Site (1026 Views)
Mobile Site Bot: Create Mobile Websites The Easy Way. / Designing A Site With Php And Oracle Tutorial (Oracle 10G) / Designing A Website: For Beginners (2) (3) (4)
Designing A Mobile Site by Koolwilly(m): 8:25am On Jan 21, 2012 |
Please how do i go about designing the mobile version of a site such that the contents of the full site would be the same on the mobile site without updating each of them seperately. |
Re: Designing A Mobile Site by Nobody: 9:37am On Jan 21, 2012 |
Well, this happens to be how my site works. Hmmn, different sections of my site work differently and yet the result is the same. Okay, i know what to do, i will explain only one method. How did you make your website? Is it with direct php coding or cms or a framework? |
Re: Designing A Mobile Site by Koolwilly(m): 10:22am On Jan 21, 2012 |
I designed it with a cms. |
Re: Designing A Mobile Site by Nobody: 10:35am On Jan 21, 2012 |
^^^what cms did you use? |
Re: Designing A Mobile Site by yawatide(f): 12:18pm On Jan 21, 2012 |
1) You can make use of a stylesheet with the "media" attribute set to "handheld" 2) You can take advantage Responsive web design (google it) 3) You can take advantage of CSS media queries Regardless of which of the above you choose, the concept remains the same: You have the same code with the same css styles, only that if your main site had a DIV with ID of "main" is 900px for the main site, it might be 200px for the mobile site. If you are observant, you can see how this can get real messy in a second as there are tons of mobile devices of various screen resolutions. A better, albeit tricky approach is to code using percentages and ems (for font) as opposed to px. I say "tricky" because percentages work well for widths of HTML but not images. In the future, consider using a framework (I prefer jQuery mobile) which does all the dirty work for you. Good luck! |
Re: Designing A Mobile Site by Nobody: 1:35pm On Jan 21, 2012 |
Well, it may not be so so easy like that all the time. But that is the principle. My own site for instance uses different structure entirely for the pages. So despite the content being the same, i detect if the page is mobile with php and render a different TEMPLATE and DIFFERENT CSS. Take a look at mobile version of my home page http://www..net/index.php?mobile=1 Take a look at full version of my home page http://www..net/index.php?mobile=0 Dont be mistaken, the mobile=1/0 was just something i used to test the site back then, and i decided i liked it and left it so. But the automated switching from mobile to full version is done with PHP. Then the technique of allowing uses to specify whether they want full version or mobile version is cookie based. |
Re: Designing A Mobile Site by Koolwilly(m): 4:04pm On Jan 21, 2012 |
Ayam seeing many new things i need to look into, when i get home. Thanks pals for been there |
Re: Designing A Mobile Site by sisqology(m): 6:20pm On Jan 21, 2012 |
passing by |
Re: Designing A Mobile Site by Nobody: 7:01pm On Jan 21, 2012 |
there are tons of tools to use, first if you are using a CMS like Joomla in MVC manner just render a mobile view, second you can create another folder and at the index page at the top put a UserAgent Sniffer that will redirect if they are on a mobile phone, there is Jquery Mobile which is a lot easier, but if you are looking for a structure and modular mobile app try Sencha Mobile or Dojo's Dojox.mobile, but frankly jquery mobile is lots easier, then the next question is what type of mobile browser, wap,xhtml, does the phone support webkit should it ave animation or just a basic view. look at one i did for my aunt http://sourcedepots.com/mobile i made it for webkit and css 2.1 phones with Dojox.Mobile |
Re: Designing A Mobile Site by Nobody: 7:20pm On Jan 21, 2012 |
No redirection @guru, we all know that is easier. He wants something like my website. If you are using CMS, i just do the patches inside the template directly, sniffing and all. Rather than coding custom extensions. |
Re: Designing A Mobile Site by Nobody: 7:22pm On Jan 21, 2012 |
ok same page but different view. |
Re: Designing A Mobile Site by Nobody: 7:57pm On Jan 21, 2012 |
I already gave an example with my website. Take a look at mobile version of my home page http://www..net/index.php?mobile=1 Take a look at full version of my home page http://www..net/index.php?mobile=0 |
Re: Designing A Mobile Site by Nobody: 7:59pm On Jan 21, 2012 |
i've never accessed ur site with a phone maybe that's why i haven't seen that yet |
Re: Designing A Mobile Site by Nobody: 8:06pm On Jan 21, 2012 |
My site has a button that allows you to switch to mobile even if you are in desktop view. If you click this, you will see mobile version of my homepage. http://www..net/index.php?mobile=1 |
Re: Designing A Mobile Site by Koolwilly(m): 10:04pm On Jan 21, 2012 |
@all thanks for your tips and contribution, would take my time to go through them one after the other. |
Re: Designing A Mobile Site by etchel(m): 10:33am On Jan 22, 2012 |
@dhtml. Can u do me a pc nd mobile site diff. muperfectgenius@gmail.com lets talk. Tx |
Re: Designing A Mobile Site by mavtrevor(m): 12:23pm On Jan 22, 2012 |
(1) (Reply)
Greenmouse Website Wears A New Look (review Needed) / I Need Guidance On Becoming A Web Designer / Pros And Cons Of Hosting And Registering A Site On Same Platform Eg Bluehost
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 18 |