Screen Sizes for Web Designers

[noy.juan]

---

@noy.juan

Thanks for sharing bro,.. nice info.

ask lng ko, compatible na ang @media sa tanang browser bro?

Dli d i pwde gamitan nako ug jQuery or javascript nga mo auto detect sya sa screen width/height din add class or something nga mo fix ang iyang width during sa pag resize sa window or sa pag load perhaps?

Unsay ika advice nmu bro? mas nindot ang CSS or jQuery?

Thanks

you need javascript to make it work on non compatible browser... but most browser that didnt support are already outdated... it is might just not support it completely...

using javascript for detecting display dimension is a bad idea some network, plugin blocked JS... wala pako kadungog nga gi block ang css

[0kimangel0]

@noy.juan

Thanks for sharing bro,.. nice info.

ask lng ko, compatible na ang @media sa tanang browser bro?

Dli d i pwde gamitan nako ug jQuery or javascript nga mo auto detect sya sa screen width/height din add class or something nga mo fix ang iyang width during sa pag resize sa window or sa pag load perhaps?

Unsay ika advice nmu bro? mas nindot ang CSS or jQuery?

Thanks

Naa daghan approach bro. Pwede ni siya ang gi ingon nimo. Mao ni ang implementation ani Adapt.js - Adaptive CSS. Or gamit ka ani The 1140px CSS Grid System · Fluid down to mobile for responsive design.

[noy.juan]

1140 grid that you posted is the bare minimum of all framework naa pay daghan kuwang niya but its a nice way to practice responsive layout.... i use that alot before...but i started to create my own css based from that one...

[harvz111]

^i would not suggest the 1140 grid, i've found out naa mga limitations in terms of being responsive.

naa pa may mga mas nindot, try these

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Foundation: The Most Advanced Responsive Front-end Framework from ZURB
Bootstrap

[shik@m@ru]

^i would not suggest the 1140 grid, i've found out naa mga limitations in terms of being responsive.

naa pa may mga mas nindot, try these

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Foundation: The Most Advanced Responsive Front-end Framework from ZURB
Bootstrap

unsay mga simulator para testing sa responsive na website?

[blackdream]

kadaghan d i ninyog resources nuh, nindot jd ning responsive nga layout. naa man gd ko gi develop krn nga personal site nako. nag libog lng ko unsa ang maaung gamiton CSS or jQuery/javascript ba kaha? Kay dli man jd nato ma deny nga dghan pa nag gamit ug lower version nga browsers. Kining @media... compatible na bani sya sa IE7 and up?

[blackdream]

you need javascript to make it work on non compatible browser... but most browser that didnt support are already outdated... it is might just not support it completely...

using javascript for detecting display dimension is a bad idea some network, plugin blocked JS... wala pako kadungog nga gi block ang css

thanks kaau sa imong advice bro... nag lisod pd ko gamay sa imong ghatag nga snippet,. dli man mo detect kung naa koy width nga 700px and down? mo diretso sa 400px? pero na resolve nman nako. btw, naakoy follow up question.. kanang duha ka @media sa kinalasan unsa na sya bro? para asa mana sya?

Thanks again, black

[noy.juan]

^i would not suggest the 1140 grid, i've found out naa mga limitations in terms of being responsive.

naa pa may mga mas nindot, try these

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Foundation: The Most Advanced Responsive Front-end Framework from ZURB
Bootstrap

1140 is bare minimum it is the most basic implementation, its not full... so dont expect it to perform better against other framework... 1140's limitation is its inability to work on nested rows... but i have solutions for that... quite simple...

bootstrap maybe cool but i junk it over 1140, bootstrap its too restrictive... i use bootstrap on our startup project then junk it after i stumble some issues, stupid issues (i let you guys figure it out para makat-on mo sa solution by experience)... well 1140 does the trick since it is very basic... i have room to manipulate it more...

i would rather recommend to check first your target user then decide which is best for you... going directly to framework because it is endorsed or used by many is wrong... be specific... their requirements is different from you...

for flexibility in coding go for bare minimum 1140 is just one.. there are others out there... or just build one for you own... like what i did...

[harvz111]

^i know its bare minimum, so as the other grids they have a seperate css file for their grids, no?

it's up to you if you want to use their full framework.

im just saying that their is a limitation on the 1140 grid system in terms of being responsive and there are better grids out there

css - 1140px grid alignment issues - Stack Overflow

css frameworks - 1140.css grid system has flaws. How to fix? - Stack Overflow

its just a small problem, so good luck with the fix

[0kimangel0]

Yes I agree that 1140px is a minimum but it is a good starter because I find it lightweight and I am not dependent to the framework. Responsive design requires skill and hardwork and it is not as simple as using a single framework. You need to consider a lot of things, the screen size, how the image would display on smaller screens and you need to decide if you would make a mobile version of your site (using e.g. jQuery Mobile) or make a mobile iOS or Android App for your website.

Our fellow istoryans are asking for our expert advice so we don't have to argue which framework is the best. It is really just using the right tool for the right job.

If you want bigger frontend frameworks, I would suggest using twitter bootstrap: Base · Bootstrap.

I have just found this tool in Windows 8 App Store and I find it interesting. If you are looking for a Responsive Design Tester tool maybe you can try this.
Responsive Design Tester app for Windows in the Windows Store

If you have iOS or Android devices, I also find this tool very helpful (formerly Adobe Shadow):
Cross-browser testing, mobile | Edge Inspect | Edge Tools & Services | Adobe & HTML