FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Responsive design





medesignz
Does anyone know of any good tutorials on responsive design?!
kacsababa
With a google search you can see, there is many.
If you check out the first few hits, you will see those are already good articles.

For example second hit is a Line25's article, which site I actually like.
This one mostly just do basic explanation, but linking a bunch of articles for you to go through.
Responsive Web Design Articles, Tutorials & Guides

Although I don't prefer video tutorials for webdev, but many people do, so the first hit is a video explanation too from Andrew Gormley at nettuts+. His explanations are clear and simple, although many times he doesn't touch some important stuff (I don't know about this one).
Responsive Web Design: A Visual Guide

I linked these two, but just learn to use search engines. This is a popular subject, there are tons of articles around.
medesignz
Obviously if I am aware of Responsive design I am fully aware of Search Engines...

I wanted some personal input about articles that have been used by users, not just the first 10 results from Google
sonam
Maybe you will like to read this:
11 Reasons Why Responsive Design Isn’t That Cool!
http://www.webdesignshock.com/responsive-design-problems/

It is quite interesting and I find few good points about responsive design.

Sonam
medesignz
Thanks for the read Sonam.

I am going for the mobile first approach... isnt new web design exciting Very Happy
sonam
medesignz wrote:
Thanks for the read Sonam.

I am going for the mobile first approach... isnt new web design exciting Very Happy


Yes it is! Very Happy I am also reading few sites about mobile design. Now I am looking for php script what will detect all mobile platforms and redirect on different subdomain if is site open in mobile devices.

Sonam
medesignz
sonam wrote:

Yes it is! Very Happy I am also reading few sites about mobile design. Now I am looking for php script what will detect all mobile platforms and redirect on different subdomain if is site open in mobile devices.

Sonam


As I am doing responsive design, I no longer need to worry about browser detection
sonam
medesignz wrote:
sonam wrote:

Yes it is! Very Happy I am also reading few sites about mobile design. Now I am looking for php script what will detect all mobile platforms and redirect on different subdomain if is site open in mobile devices.

Sonam


As I am doing responsive design, I no longer need to worry about browser detection


I don't know what is best way for me in this moment but I think I will create some simple version of site with responsive design for mobile devices instead of full site. In that case I need redirection to separate mobile browsers from computer browsers. But maybe this is not good way? Rolling Eyes

Sonam
medesignz
that seems to be defeating the object of RD.

basically knowing what is important and what is fluff on your site would be the best way to start.
sonam
You are right about RD but my new site is very complicated and liquid design is not at possible on all instances. This is reason why I think about simple version for mobiles.

Sonam
medesignz
Then the next question should be, is a mobile version essential?
sonam
medesignz wrote:
Then the next question should be, is a mobile version essential?


I am sure it is. Sad Maybe I will wait for month or two to see how is growing site but on the end the mobile version is definitive necessary.

Sonam
medesignz
Are you getting mobile visitors to your site?
sonam
Not enough. Thanks for information's I will think about all.

Sonam
medesignz
what does your site do?
sonam
medesignz wrote:
what does your site do?


The site is in testing mode on my computer, but in future will gain social network of unemployed people in my country.

Sonam
medesignz
so there would be huge benefit to having a mobile version
sonam
medesignz wrote:
so there would be huge benefit to having a mobile version


Right! Very Happy But the programs (PHP, Javascript, Ajax, etc.) what running on this site is quite challenging. For example I have drag and drop divs on it. I don't think I can code this for mobiles. This is reason why i would like to have one simple version for mobiles.

Sonam
medesignz
Im sure there is a way round it... Because ultimately the divs are placed within the site structure, and positioning can be done drag-able on the larger screens, but on the smaller screens they could be fixed?
sonam
medesignz wrote:
Im sure there is a way round it... Because ultimately the divs are placed within the site structure, and positioning can be done drag-able on the larger screens, but on the smaller screens they could be fixed?


Me too, but I will think about it if my site will gain enough visitors. Otherwise I don't want to loose time for programming. This is big project and I am working few month on it. The February is dead line because I must start. If I am not ready then I will not get extra money for starting and project is dead.

Sonam
medesignz
Always good to have a dead line Smile
sonam
How to deal with images. For example if I have logo 200px and one banner 730px and gap between 20px this is all together. This is 950px all together. How I can display this on 600px display? Load smaller images or use width:100%; and squash existing images.

Sonam
medesignz
Well with the responsive design CSS I'd put a banner logo as a background image.

I'd suggest that you create different size logos both in size and quality to increase loading time and decrease download size.

for example my site that I am working on shall a full size banner, to a certain width, as the screen size gets smaller, it flicks to another logo... my smallest width (only used for WAP enabled old school mobiles) is actually just a business card.

if you want to see the work in progress you can go to my site (http://www.sharedentertainments.com)
sonam
I can do it this with all my images. But what with this paid banner landscape 728x90. I cannot insert this in background.

Sonam
medesignz
Whats stopping you from doing it with the paid banners?
sonam
medesignz wrote:
Whats stopping you from doing it with the paid banners?


Never mind. This is theoretically. If someone paid for 728px banner how I can display this on 600px. Only if I resize it.

I am visit your site and see how you are deal with RD. It is looking great. I will try to redesign my site to something useful but I am not sure am I have enough knowledge and time. The main css is done Sad and I am not sure did I like to start new one.

I sow you have five different css. And there is different definition for screens width. Did you have any site where I can find mobile devices screen dimensions or good site for testing (localhost).

Sonam
medesignz
sonam wrote:
Never mind. This is theoretically. If someone paid for 728px banner how I can display this on 600px. Only if I resize it.

A way around this is I would suggest you have advertising space listed as Premier in dominant areas.

Thus you are not saying for this $$$ you get a big banner, but for $$$ you get premier ad positioning

sonam wrote:
I am visit your site and see how you are deal with RD. It is looking great. I will try to redesign my site to something useful but I am not sure am I have enough knowledge and time. The main css is done Sad and I am not sure did I like to start new one.

I sow you have five different css. And there is different definition for screens width. Did you have any site where I can find mobile devices screen dimensions or good site for testing (localhost).


I didnt use a site, but used sizes that would scale well. I *for instance* have a blackberry smartphone, so I can test on that size resolution, also a smaller laptop connected to a monitor so I can test that size too, as well as my main tower unit, so I personally can test how the res works, but you should be able to do that by just resizing the window now Smile

As for a host, I host on my Frihost account all my sites, and just create a constant connection using Filezilla Very Happy
sonam
I find this site good for testing. http://quirktools.com/screenfly/
The best is what I can check localhost, too.

Sonam
medesignz
That is a nice site there, good find
riteshk1
Good discussion, i get so much help from here about the responsive website. Smile
mehtabhk
the best tutorial is bootstrap 3... its awesome framework with a lot of good examples...
crazsantatra
mehtabhk wrote:
the best tutorial is bootstrap 3... its awesome framework with a lot of good examples...


I use Bootstrap and it's very easy, may be the best solution for a responsive website. But it's useful to kwon how responsive works. Smile
Insanity
Responsive design is very important nowadays with mobile phones being on the rise and everything.
Related topics
Do you use css to design a website?
world war2 design?
Verify your site's design on a mac (Safari, IE, Mozilla)
Design forum
overflow:auto not working on mobile devices
Offering the full site to mobile users
Background images not displaying in FF
I need guidance with Joomla..
How often do you access Frihost on mobile?
Suggest me a design
My portfolio
Website Design
Do you take a class or school after your work?
Responsive Web Design Tips
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.