Saikat M
asked on
Can fluid UI design be usefull to web based business application?
I came across this concept called Fluid design. I understand a website can have fluid layout but it is possible to design an business to design based on fluid layout?
If yes, please help me to get some info materials.
thanks,
Saikat
If yes, please help me to get some info materials.
thanks,
Saikat
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Scott Fell and COBOLdinosaur,
i appreciate of of you for your response. Now my question is, we have an application which is design in MVC architecture. Now for each screen i have a view.
Now due to certain restriction we are again creating view for smart devices and other display device. So here question is not about Cognitive vs Adoptive. Here question is if fluid layout possible irrespective of HTML and CSS skills set.
Thanks,
Saikat
i appreciate of of you for your response. Now my question is, we have an application which is design in MVC architecture. Now for each screen i have a view.
Now due to certain restriction we are again creating view for smart devices and other display device. So here question is not about Cognitive vs Adoptive. Here question is if fluid layout possible irrespective of HTML and CSS skills set.
Thanks,
Saikat
>Now due to certain restriction we are again creating view for smart devices and other display device.....is if fluid layout possible irrespective of HTML and CSS skills set.
Is anything possible irrespective of a given skill set?
Would you hire somebody with limited skills to create the schema, business logic and security of your application? However you are going to answer that, would be what you should do for the front end. One option has a good chance of being successful, the other doesn't.
Is anything possible irrespective of a given skill set?
Would you hire somebody with limited skills to create the schema, business logic and security of your application? However you are going to answer that, would be what you should do for the front end. One option has a good chance of being successful, the other doesn't.
ASKER
See the application that i;m talking about is a finance domain related. and it is very complex indeed. So reason why we create multiple view is that UI layout Framework does only 1024 and higher resolution. Now problem is to make it user centric and device independent why would i have to create another new views to support Tabs and Mobile?
My intention is to make the UI layout framework so strong that it will support all the devices and resolutions. But here challenge is not only technology! here challenge is also design concept.
So looking at market trends i found fluid layout would be an option. But i need to think about it's maintainability and excitability.
Any insight would be appreciated.
My intention is to make the UI layout framework so strong that it will support all the devices and resolutions. But here challenge is not only technology! here challenge is also design concept.
So looking at market trends i found fluid layout would be an option. But i need to think about it's maintainability and excitability.
Any insight would be appreciated.
From viewportsizes.com, there are 280 different sizes from the major devices
What you want is a responsive grid that uses media queries to detect the screen size and makes adjustments. You can do this from scratch https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries but it is a lot of work. There are some good libraries that have the core set up and you just need to add your own custom styles.
http://getbootstrap.com/
http://foundation.zurb.com/
Both Bootstrap and Foundation are a mix of a responsive grid, jquery/javascripts and widgets. For either, you can use everything or just portions.
You do have to think about the layout more because you are creating the page for 4 different media queries. Extra Small, Small, Medium and Large http://getbootstrap.com/css/#grid-media-queries. At the minimum you may have 2 columns where one is narrow and one is wide. This could would for tablets and above. But for a phone, it is too much scrolling. Instead, you will want to convert those 2 columns to 2 rows when the viewport is small.
In bootstrap it looks like this
Some very basic examples http://getbootstrap.com/getting-started/#examples and some live sites http://expo.getbootstrap.com/
There are some ui frameworks to be aware of such as
http://www.telerik.com/kendo-ui http://www.telerik.com/aspnet-mvc
http://wijmo.com/
https://jqueryui.com/
Kendo will treat mobile separately so you may not want to go this route. Wijmo is like bootstrap, you can code for all screens and there is a nifty js add on to mimic a spreadsheet http://wijmo.com/demo/spreadjs/samples/ExplorerSample/
For the front end developer that is used to making a 1024 size page and nothing moves, there is going to be a learning curve. The best way to learn is to jump in. Use the bootstrap samples and try and recreate your current page with bootstrap.
There are a lot of questions here for bootstrap and it is worth searching for other's questions on the subject.
Good Luck
[
{
"Device Name":"Acer Iconia Tab A1-810",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2013-05"
},
{
"Device Name":"Acer Iconia Tab A100",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-04"
},
{
"Device Name":"Acer Iconia Tab A101",
"Platform":"Android",
"OS Version":"3.2.1",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2011-05"
},
{
"Device Name":"Acer Iconia Tab A200",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-01"
},
{
"Device Name":"Acer Iconia Tab A500",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"648",
"Landscape Width":"1280",
"Release Date":"2011-04"
},
{
"Device Name":"Acer Iconia Tab A501",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-04"
},
{
"Device Name":"ACER Liquid E2",
"Platform":"Android",
"OS Version":"4.2.1",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-05"
},
{
"Device Name":"Ainol Novo 7 Elf 2",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"496",
"Landscape Width":"1024",
"Release Date":"2012-06"
},
{
"Device Name":"Alcatel One Touch Idol X",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2013-07"
},
{
"Device Name":"Alcatel One Touch T10",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2013-03"
},
{
"Device Name":"Alcatel One Touch 903",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"427",
"Release Date":"2012-08"
},
{
"Device Name":"Alcatel (Vodafone) Smart Mini 875",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-07"
},
{
"Device Name":"Amicroe 7 TouchTAB II",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2013-01"
},
{
"Device Name":"Amicroe 9.7 TouchTAB IV",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2013-05"
},
{
"Device Name":"Archos 70b (it2)",
"Platform":"Android",
"OS Version":"3.2.1",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2012-02"
},
{
"Device Name":"Archos 80G9",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2011-09"
},
{
"Device Name":"Arnova 10b G3",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2012-05"
},
{
"Device Name":"Arnova 7 G2",
"Platform":"Android",
"OS Version":"2.3.1",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2011-09"
},
{
"Device Name":"Arnova 7F G3",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"640",
"Landscape Width":"1067",
"Release Date":"2012-11"
},
{
"Device Name":"Arnova 8C G3",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1067",
"Release Date":"2012-11"
},
{
"Device Name":"ASUS B1-A71",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-01"
},
{
"Device Name":"ASUS Fonepad",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"601",
"Landscape Width":"962",
"Release Date":"2013-04"
},
{
"Device Name":"ASUS MeMo Pad ME172V",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-01"
},
{
"Device Name":"ASUS MeMo Pad FHD10/ME302C 10.1",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-08"
},
{
"Device Name":"ASUS Padfone",
"Platform":"Android",
"OS Version":"4.0",
"Portrait Width":"800",
"Landscape Width":"1128",
"Release Date":"2012-06"
},
{
"Device Name":"ASUS Transformer Pad TF300T",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-04"
},
{
"Device Name":"ASUS Transformer TF101",
"Platform":"Android",
"OS Version":"3.1",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-04"
},
{
"Device Name":"ASUS Vivo",
"Platform":"Windows RT",
"OS Version":"8.0",
"Portrait Width":"768",
"Landscape Width":"1366",
"Release Date":"2012-11"
},
{
"Device Name":"Barnes & Noble Nook HD",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"600",
"Landscape Width":"960",
"Release Date":"2012-11"
},
{
"Device Name":"BAUHN AMID-972XS",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2012-09"
},
{
"Device Name":"BAUHN AMID-9743G",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2013-02"
},
{
"Device Name":"BAUHN ASP-5000H",
"Platform":"Android",
"OS Version":"4.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-09"
},
{
"Device Name":"BlackBerry 9520",
"Platform":"BlackBerry OS",
"OS Version":"5",
"Portrait Width":"345",
"Landscape Width":"691",
"Release Date":"2009-11"
},
{
"Device Name":"BlackBerry Bold 9000",
"Platform":"BlackBerry OS",
"OS Version":"4.0.0.223",
"Portrait Width":"480",
"Landscape Width":"-",
"Release Date":"2008-08"
},
{
"Device Name":"BlackBerry Bold 9780",
"Platform":"BlackBerry OS",
"OS Version":"6.0.0.110",
"Portrait Width":"480",
"Landscape Width":"-",
"Release Date":"2010-11"
},
{
"Device Name":"BlackBerry Bold 9790",
"Platform":"BlackBerry OS",
"OS Version":"7.0.0.528",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2011-12"
},
{
"Device Name":"BlackBerry Bold 9900",
"Platform":"BlackBerry OS",
"OS Version":"7.1.0.342",
"Portrait Width":"356",
"Landscape Width":"-",
"Release Date":"2011-08"
},
{
"Device Name":"BlackBerry Curve 9300",
"Platform":"BlackBerry OS",
"OS Version":"5.0.0.716",
"Portrait Width":"311",
"Landscape Width":"-",
"Release Date":"2010-08"
},
{
"Device Name":"BlackBerry Curve 9300",
"Platform":"BlackBerry OS",
"OS Version":"6.0.0.448",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2010-08"
},
{
"Device Name":"BlackBerry Curve 9320",
"Platform":"BlackBerry OS",
"OS Version":"7.1.0.569",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2010-05"
},
{
"Device Name":"BlackBerry Curve 9360",
"Platform":"BlackBerry OS",
"OS Version":"7.0.0.530",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2011-08"
},
{
"Device Name":"BlackBerry Curve 9380",
"Platform":"BlackBerry OS",
"OS Version":"7.0.0.513",
"Portrait Width":"320",
"Landscape Width":"406",
"Release Date":"2011-12"
},
{
"Device Name":"BlackBerry PlayBook",
"Platform":"Blackberry Tablet OS",
"OS Version":"2.1.0",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2011-04"
},
{
"Device Name":"BlackBerry Torch 9800",
"Platform":"BlackBerry OS",
"OS Version":"6.0.0.353",
"Portrait Width":"360",
"Landscape Width":"480",
"Release Date":"2010-08"
},
{
"Device Name":"BlackBerry Torch 9810",
"Platform":"BlackBerry OS",
"OS Version":"7.0.0.296",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2011-08"
},
{
"Device Name":"BlackBerry Torch 9860",
"Platform":"BlackBerry OS",
"OS Version":"7.0.0.579",
"Portrait Width":"320",
"Landscape Width":"505",
"Release Date":"2011-09"
},
{
"Device Name":"BlackBerry Q10",
"Platform":"BlackBerry OS",
"OS Version":"10.1.0.1910",
"Portrait Width":"346",
"Landscape Width":"-",
"Release Date":"2013-04"
},
{
"Device Name":"BlackBerry Z10",
"Platform":"BlackBerry OS",
"OS Version":"10.0.10.690",
"Portrait Width":"342",
"Landscape Width":"570",
"Release Date":"2013-02"
},
{
"Device Name":"Galaxy Nexus",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2011-11"
},
{
"Device Name":"HP Slate 7 2800",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-06"
},
{
"Device Name":"HP Slate 21",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"1920",
"Landscape Width":"NA",
"Release Date":"2013-10"
},
{
"Device Name":"HP Touchpad",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2011-07"
},
{
"Device Name":"HP Touchpad",
"Platform":"webOS",
"OS Version":"3.0",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2011-07"
},
{
"Device Name":"HP Veer",
"Platform":"WebOS",
"OS Version":"2.1.1",
"Portrait Width":"320",
"Landscape Width":"545",
"Release Date":"2011-06"
},
{
"Device Name":"HTC 7 Mozart",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-10"
},
{
"Device Name":"HTC 7 Trophy",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-10"
},
{
"Device Name":"HTC A620b",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-01"
},
{
"Device Name":"HTC Desire",
"Platform":"Android",
"OS Version":"2.3.3",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-03"
},
{
"Device Name":"HTC Desire C",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-06"
},
{
"Device Name":"HTC Desire HD",
"Platform":"Android",
"OS Version":"2.3.5",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-10"
},
{
"Device Name":"HTC Desire S",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-03"
},
{
"Device Name":"HTC Desire X ",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-10"
},
{
"Device Name":"HTC Desire Z (Vision)",
"Platform":"Android",
"OS Version":"2.2",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2010-11"
},
{
"Device Name":"HTC Droid Eris",
"Platform":"Android",
"OS Version":"2.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2009-11"
},
{
"Device Name":"HTC Evo 3D",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"540",
"Landscape Width":"960",
"Release Date":"2011-07"
},
{
"Device Name":"HTC Incredible 2",
"Platform":"Android ",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-04"
},
{
"Device Name":"HTC Legend",
"Platform":"Android",
"OS Version":"2.2",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-03"
},
{
"Device Name":"HTC MyTouch Slide 4G",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-07"
},
{
"Device Name":"HTC One",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-03"
},
{
"Device Name":"HTC One Mini",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-07"
},
{
"Device Name":"HTC One S",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-04"
},
{
"Device Name":"HTC One SV",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-12"
},
{
"Device Name":"HTC One V",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-04"
},
{
"Device Name":"HTC One X",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-05"
},
{
"Device Name":"HTC One X+",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-11"
},
{
"Device Name":"HTC One XL",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-05"
},
{
"Device Name":"HTC Rio 8S",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-12"
},
{
"Device Name":"HTC Sensation XL",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2011-11"
},
{
"Device Name":"HTC Titan II/4G",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-04"
},
{
"Device Name":"HTC Velocity 4G",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-11"
},
{
"Device Name":"HTC Wildfire A3333",
"Platform":"Android",
"OS Version":"2.2.1",
"Portrait Width":"267",
"Landscape Width":"356",
"Release Date":"2010-05"
},
{
"Device Name":"HTC Wildfire S",
"Platform":"Android",
"OS Version":"2.3.3",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-05"
},
{
"Device Name":"HTC Windows Phone 8S",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-11"
},
{
"Device Name":"HTC Windows Phone 8X (C625b)",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-11"
},
{
"Device Name":"Huawei Ascend G510",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2013-04"
},
{
"Device Name":"Huawei Ascend Mate",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"480",
"Landscape Width":"813",
"Release Date":"2013-03"
},
{
"Device Name":"Huawei U8650 Sonic",
"Platform":"Android",
"OS Version":"2.3.3",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-06"
},
{
"Device Name":"Huawei U8860",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"320",
"Landscape Width":"544",
"Release Date":"2011-12"
},
{
"Device Name":"Huawei Y300-0151",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2013-03"
},
{
"Device Name":"iPad",
"Platform":"iOS",
"OS Version":"5.0.1",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2010-03"
},
{
"Device Name":"iPad 2",
"Platform":"iOS",
"OS Version":"5.0.1",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2011-03"
},
{
"Device Name":"iPad 3",
"Platform":"iOS",
"OS Version":"5.1.1",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2012-03"
},
{
"Device Name":"iPad Air",
"Platform":"iOS",
"OS Version":"7.0.3",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2013-10"
},
{
"Device Name":"iPad Mini",
"Platform":"iOS",
"OS Version":"6.0.1",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2012-11"
},
{
"Device Name":"iPhone",
"Platform":"iOS",
"OS Version":"3.1.3",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2007-06"
},
{
"Device Name":"iPhone 3G",
"Platform":"iOS",
"OS Version":"4.2.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2008-07"
},
{
"Device Name":"iPhone 3GS",
"Platform":"iOS",
"OS Version":"6.0a2",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2009-06"
},
{
"Device Name":"iPhone 4",
"Platform":"iOS",
"OS Version":"5.1.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-06"
},
{
"Device Name":"iPhone 4S",
"Platform":"iOS",
"OS Version":"4.3.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-10"
},
{
"Device Name":"iPhone 5",
"Platform":"iOS",
"OS Version":"6.0",
"Portrait Width":"320",
"Landscape Width":"568",
"Release Date":"2012-09"
},
{
"Device Name":"iPhone 5c",
"Platform":"iOS",
"OS Version":"7.0",
"Portrait Width":"320",
"Landscape Width":"568",
"Release Date":"2013-09"
},
{
"Device Name":"iPhone 5s",
"Platform":"iOS",
"OS Version":"7.0",
"Portrait Width":"320",
"Landscape Width":"568",
"Release Date":"2013-09"
},
{
"Device Name":"iPod Touch 4th Gen",
"Platform":"iOS",
"OS Version":"5.0.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-09"
},
{
"Device Name":"iPod Touch 5th Gen",
"Platform":"iOS",
"OS Version":"6.0",
"Portrait Width":"320",
"Landscape Width":"568",
"Release Date":"2012-10"
},
{
"Device Name":"Kindle 3",
"Platform":"Kindle",
"OS Version":"3.3",
"Portrait Width":"600",
"Landscape Width":"-",
"Release Date":"2010-08"
},
{
"Device Name":"Kindle Fire 2",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"600",
"Landscape Width":"963",
"Release Date":"2011-11"
},
{
"Device Name":"Kindle Fire HD",
"Platform":"Android",
"OS Version":"4",
"Portrait Width":"533",
"Landscape Width":"801",
"Release Date":"2012-09"
},
{
"Device Name":"Kindle Fire HD 8.9",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1220",
"Release Date":"2012-10"
},
{
"Device Name":"Kindle Paperwhite",
"Platform":"Kindle",
"OS Version":"5",
"Portrait Width":"758",
"Landscape Width":"-",
"Release Date":"2012-10"
},
{
"Device Name":"Kobo eReader Touch",
"Platform":"Android",
"OS Version":"2.0.0",
"Portrait Width":"600",
"Landscape Width":"-",
"Release Date":"2011-06"
},
{
"Device Name":"Kogan 42" Smart 3D LED TV",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"-",
"Landscape Width":"1280",
"Release Date":"2013-07"
},
{
"Device Name":"Lenovo IdeaTab A1000",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-05"
},
{
"Device Name":"Lenovo IdeaTab S6000",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-06"
},
{
"Device Name":"Lenovo Yoga Tablet 8",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"602",
"Landscape Width":"962",
"Release Date":"2013-10"
},
{
"Device Name":"Lenovo Yoga Tablet 10",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-11"
},
{
"Device Name":"LG 55LW6500 TV",
"Platform":"Proprietary (TV)",
"OS Version":"5.00.07",
"Portrait Width":"-",
"Landscape Width":"1280",
"Release Date":"2011-03"
},
{
"Device Name":"LG Ally",
"Platform":"Android",
"OS Version":"2.2.2",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-04"
},
{
"Device Name":"LG G2",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-09"
},
{
"Device Name":"LG Optimus 2x",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-02"
},
{
"Device Name":"LG Optimus Black P970",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-05"
},
{
"Device Name":"LG Optimus G E975",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"384",
"Landscape Width":"640",
"Release Date":"2012-11"
},
{
"Device Name":"LG Optimus L3 E400",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"427",
"Release Date":"2012-02"
},
{
"Device Name":"LG Optimus L3 II E425f",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"320",
"Landscape Width":"427",
"Release Date":"2013-04"
},
{
"Device Name":"LG Optimus L7 P700",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-05"
},
{
"Device Name":"LG Optimus L9 P760",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-11"
},
{
"Device Name":"LG Optimus Pad V900",
"Platform":"Android",
"OS Version":"3.0.1",
"Portrait Width":"768",
"Landscape Width":"1280",
"Release Date":"2011-05"
},
{
"Device Name":"LG Viewty KU990",
"Platform":"Proprietary (Java)",
"OS Version":"1.2",
"Portrait Width":"240",
"Landscape Width":"400",
"Release Date":"2008-10"
},
{
"Device Name":"Microsoft Surface",
"Platform":"Windows RT",
"OS Version":"8.0",
"Portrait Width":"768",
"Landscape Width":"1366",
"Release Date":"2012-11"
},
{
"Device Name":"Microsoft Surface Pro",
"Platform":"Windows 8",
"OS Version":"8.0",
"Portrait Width":"720",
"Landscape Width":"1280",
"Release Date":"2012-11"
},
{
"Device Name":"Motorola Defy",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2010-10"
},
{
"Device Name":"Motorola Defy Mini",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-01"
},
{
"Device Name":"Motorola Droid Bionic",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2011-09"
},
{
"Device Name":"Motorola Droid Razr",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2011-11"
},
{
"Device Name":"Motorola Droid 3",
"Platform":"Android",
"OS Version":"2.3",
"Portrait Width":"360",
"Landscape Width":"559",
"Release Date":"2011-07"
},
{
"Device Name":"Motorola Fire XT",
"Platform":"Android",
"OS Version":"2.3.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-09"
},
{
"Device Name":"Motorola FlipOut",
"Platform":"Android",
"OS Version":"2.1",
"Portrait Width":"320",
"Landscape Width":"240",
"Release Date":"2010-06"
},
{
"Device Name":"Motorola Milestone",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2009-11"
},
{
"Device Name":"Motorola Moto G",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-11"
},
{
"Device Name":"Motorola RAZR HD 4G",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2012-09"
},
{
"Device Name":"Motorola RAZR M 4G",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2012-09"
},
{
"Device Name":"Motorola RAZR MAXX",
"Platform":"Android",
"OS Version":"4.0",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-05"
},
{
"Device Name":"Motorola Xoom",
"Platform":"Android",
"OS Version":"4.1",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-05"
},
{
"Device Name":"Motorola Xoom 2",
"Platform":"Android",
"OS Version":"3.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-12"
},
{
"Device Name":"Motorola Xoom 2 Media Edition",
"Platform":"Android",
"OS Version":"3.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-12"
},
{
"Device Name":"Nexus 10",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-11"
},
{
"Device Name":"Nexus 4",
"Platform":"Android",
"OS Version":"4.2.1",
"Portrait Width":"384",
"Landscape Width":"598",
"Release Date":"2012-11"
},
{
"Device Name":"Nexus 5",
"Platform":"Android",
"OS Version":"4.4",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-10"
},
{
"Device Name":"Nexus 7",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"603",
"Landscape Width":"966",
"Release Date":"2012-07"
},
{
"Device Name":"Nexus 7",
"Platform":"Android",
"OS Version":"4.2.1",
"Portrait Width":"600",
"Landscape Width":"961",
"Release Date":"2012-07"
},
{
"Device Name":"Nexus 7",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"601",
"Landscape Width":"962",
"Release Date":"2012-07"
},
{
"Device Name":"Nexus 7 (LCD Density set to 175PPI)",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"731",
"Landscape Width":"1170",
"Release Date":"2012-07"
},
{
"Device Name":"Nexus 7 (2013)",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"600",
"Landscape Width":"960",
"Release Date":"2013-07"
},
{
"Device Name":"Nexus One",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-01"
},
{
"Device Name":"Nexus S",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-10"
},
{
"Device Name":"Nintendo 3DS",
"Platform":"3DS",
"OS Version":"4.3.0-10E",
"Portrait Width":"416",
"Landscape Width":"-",
"Release Date":"2011-02"
},
{
"Device Name":"Nintendo 3DS XL",
"Platform":"3DS",
"OS Version":"1.7455.EU",
"Portrait Width":"416",
"Landscape Width":"-",
"Release Date":"2012-07"
},
{
"Device Name":"Nintendo DSi",
"Platform":"DSi",
"OS Version":"507; U; en-GB",
"Portrait Width":"256",
"Landscape Width":"-",
"Release Date":"2009-04"
},
{
"Device Name":"Nintendo DSi XL",
"Platform":"DSi",
"OS Version":"1.4.4A",
"Portrait Width":"240",
"Landscape Width":"-",
"Release Date":"2010-03"
},
{
"Device Name":"Nintendo Wii",
"Platform":"Wii",
"OS Version":"4.3",
"Portrait Width":"800",
"Landscape Width":"-",
"Release Date":"2007-11"
},
{
"Device Name":"Nintendo Wii U",
"Platform":"Wii U",
"OS Version":"1.0.0.7494",
"Portrait Width":"854",
"Landscape Width":"-",
"Release Date":"2012-11"
},
{
"Device Name":"Nokia 2700",
"Platform":"S40",
"OS Version":"5th Edition",
"Portrait Width":"240",
"Landscape Width":"-",
"Release Date":"2009-07"
},
{
"Device Name":"Nokia Asha 300",
"Platform":"Proprietary (Nokia)",
"OS Version":"07.03 29-11-11 RM-781",
"Portrait Width":"234",
"Landscape Width":"-",
"Release Date":"2011-11"
},
{
"Device Name":"Nokia Asha 302",
"Platform":"Proprietary (Nokia)",
"OS Version":"14.53 20-03-12 RM-813",
"Portrait Width":"314",
"Landscape Width":"-",
"Release Date":"2012-03"
},
{
"Device Name":"Nokia 500",
"Platform":"Symbian",
"OS Version":"Belle",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2011-09"
},
{
"Device Name":"Nokia 700 (Opera Mobile)",
"Platform":"Symbian",
"OS Version":"Belle FP2",
"Portrait Width":"240",
"Landscape Width":"427",
"Release Date":"2011-09"
},
{
"Device Name":"Nokia E61i",
"Platform":"S60",
"OS Version":"Symbian 9.1",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2007-04"
},
{
"Device Name":"Nokia E71",
"Platform":"S60",
"OS Version":"Symbian 9.2",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2007-04"
},
{
"Device Name":"Nokia Lumia 520",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-04"
},
{
"Device Name":"Nokia Lumia 610",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-04"
},
{
"Device Name":"Nokia Lumia 710",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-12"
},
{
"Device Name":"Nokia Lumia 720",
"Platform":"WP7",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-04"
},
{
"Device Name":"Nokia Lumia 800",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-11"
},
{
"Device Name":"Nokia Lumia 820",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-11"
},
{
"Device Name":"Nokia Lumia 900",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-05"
},
{
"Device Name":"Nokia Lumia 920",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-11"
},
{
"Device Name":"Nokia Lumia 925",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-06"
},
{
"Device Name":"Nokia N9",
"Platform":"MeeGo",
"OS Version":"1.2",
"Portrait Width":"320",
"Landscape Width":"496",
"Release Date":"2011-09"
},
{
"Device Name":"Nokia N900",
"Platform":"Maemo",
"OS Version":"5",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2009-11"
},
{
"Device Name":"Nokia N95",
"Platform":"S60",
"OS Version":"Symbian 9.2",
"Portrait Width":"240",
"Landscape Width":"-",
"Release Date":"2007-03"
},
{
"Device Name":"Palm Pixi",
"Platform":"WebOS",
"OS Version":"1.4.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2009-11"
},
{
"Device Name":"Palm Pre",
"Platform":"WebOS",
"OS Version":"2.2",
"Portrait Width":"320",
"Landscape Width":"-",
"Release Date":"2009-10"
},
{
"Device Name":"Panasonic Toughpad FZ-A1",
"Platform":"Android",
"OS Version":"4.0",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2012-12"
},
{
"Device Name":"PendoPad 7"",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2013-11"
},
{
"Device Name":"PendoPad 10"",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-11"
},
{
"Device Name":"Pioneer Dreambook",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2010-07"
},
{
"Device Name":"Samsung Ativ S",
"Platform":"WP8",
"OS Version":"8.0",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-12"
},
{
"Device Name":"Samsung E3210",
"Platform":"Proprietary (Java)",
"OS Version":"-",
"Portrait Width":"128",
"Landscape Width":"-",
"Release Date":"2011-05"
},
{
"Device Name":"Samsung Galaxy 5/Europa I5500",
"Platform":"Android",
"OS Version":"2.1-update1",
"Portrait Width":"320",
"Landscape Width":"427",
"Release Date":"2010-08"
},
{
"Device Name":"Samsung Galaxy Ace S5830",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-02"
},
{
"Device Name":"Samsung Galaxy Ace 2 I8160",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-05"
},
{
"Device Name":"Samsung Galaxy Ace Plus S7500",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-02"
},
{
"Device Name":"Samsung Galaxy Beam I8530",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-07"
},
{
"Device Name":"Samsung Galaxy Camera GC100",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2012-11"
},
{
"Device Name":"Samsung Galaxy Mini S5570",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"240",
"Landscape Width":"320",
"Release Date":"2011-02"
},
{
"Device Name":"Samsung Galaxy Mini 2 S6500",
"Platform":"Android",
"OS Version":"2.3",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-03"
},
{
"Device Name":"Samsung Galaxy Note N700",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"400",
"Landscape Width":"640",
"Release Date":"2011-10"
},
{
"Device Name":"Samsung Galaxy Note 10.1 N8010",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-08"
},
{
"Device Name":"Samsung Galaxy Note 10.1 N8010 (Multiscreen Enabled)",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"800",
"Landscape Width":"637",
"Release Date":"2012-08"
},
{
"Device Name":"Samsung Galaxy Note 10.1 (2014 Edition) P600",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-11"
},
{
"Device Name":"Samsung Galaxy Note 2 N7100",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-09"
},
{
"Device Name":"Samsung Galaxy Note 3 N9005",
"Platform":"Android",
"OS Version":"4.3",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-09"
},
{
"Device Name":"Samsung Galaxy Note 8.0 N5100",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"601",
"Landscape Width":"962",
"Release Date":"2013-04"
},
{
"Device Name":"Samsung Galaxy Note 8.0 N5110",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"601",
"Landscape Width":"962",
"Release Date":"2013-04"
},
{
"Device Name":"Samsung Galaxy S I9000",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2010-06"
},
{
"Device Name":"Samsung Galaxy S Duos S7562",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-09"
},
{
"Device Name":"Samsung Galaxy S WiFi YPG70CW",
"Platform":"Android",
"OS Version":"2.2",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-05"
},
{
"Device Name":"Samsung Galaxy S2 I9100",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-04"
},
{
"Device Name":"Samsung Galaxy S3 I9300",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-05"
},
{
"Device Name":"Samsung Galaxy S3 Mini I8190",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-11"
},
{
"Device Name":"Samsung Galaxy S4 I9500",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-04"
},
{
"Device Name":"Samsung Galaxy S4 I9505",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-04"
},
{
"Device Name":"Samsung Galaxy S4 Active I9295",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-06"
},
{
"Device Name":"Samsung Galaxy S4 Mini I9190",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-07"
},
{
"Device Name":"Samsung Galaxy S4 Zoom SM-C105",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-07"
},
{
"Device Name":"Samsung Galaxy Tab 10.1 P7510",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-07"
},
{
"Device Name":"Samsung Galaxy Tab 2 10.1 P5110",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-05"
},
{
"Device Name":"Samsung Galaxy Tab 2 7.0 P3110",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2012-05"
},
{
"Device Name":"Samsung Galaxy Tab 3 7.0 T210",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-07"
},
{
"Device Name":"Samsung Galaxy Tab 3 8.0 T310",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"602",
"Landscape Width":"962",
"Release Date":"2013-07"
},
{
"Device Name":"Samsung Galaxy Tab 3 10.1 P5210",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-07"
},
{
"Device Name":"Samsung Galaxy Tab 3 Kids T2105",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2013-11"
},
{
"Device Name":"Samsung Galaxy Tab 7.7 P6810",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-01"
},
{
"Device Name":"Samsung Galaxy Tab 7.0 Plus P6210",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"600",
"Landscape Width":"1024",
"Release Date":"2012-01"
},
{
"Device Name":"Samsung Galaxy Tab 8.9 P7310",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-05"
},
{
"Device Name":"Samsung Galaxy Tab 8.9 4G P7320",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-02"
},
{
"Device Name":"Samsung Galaxy Tab P1000",
"Platform":"Android",
"OS Version":"2.3.3",
"Portrait Width":"400",
"Landscape Width":"683",
"Release Date":"2010-10"
},
{
"Device Name":"Samsung Galaxy X Cover 2 S7710 ",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2013-03"
},
{
"Device Name":"Samsung Galaxy Y S5360",
"Platform":"Android",
"OS Version":"2.3.6",
"Portrait Width":"320",
"Landscape Width":"427",
"Release Date":"2011-10"
},
{
"Device Name":"Samsung Galaxy Young S6310",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-02"
},
{
"Device Name":"Samsung Infuse 4G I997",
"Platform":"Android",
"OS Version":"2.3",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-05"
},
{
"Device Name":"Samsung Omnia W I8350",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2011-10"
},
{
"Device Name":"Samsung Omnia 7 I8700",
"Platform":"WP7",
"OS Version":"7.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-10"
},
{
"Device Name":"Samsung Wave S8500",
"Platform":"Bada",
"OS Version":"1.0",
"Portrait Width":"240",
"Landscape Width":"400",
"Release Date":"2010-04"
},
{
"Device Name":"Samsung Wave S8500",
"Platform":"Bada",
"OS Version":"2.0.1",
"Portrait Width":"320",
"Landscape Width":"534",
"Release Date":"2010-04"
},
{
"Device Name":"Scroll Excel",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"480",
"Landscape Width":"800",
"Release Date":"2012-02"
},
{
"Device Name":"Sony BRAVIA 40 EX520",
"Platform":"Proprietary (TV)",
"OS Version":"PKG4.012GAA-0104",
"Portrait Width":"-",
"Landscape Width":"1920",
"Release Date":"2011-01"
},
{
"Device Name":"Sony Ericsson Elm",
"Platform":"Proprietary (Java)",
"OS Version":"1231-1917 R7CA061 100619",
"Portrait Width":"240",
"Landscape Width":"-",
"Release Date":"2010-03"
},
{
"Device Name":"Sony Ericsson Spiro",
"Platform":"Proprietary (Java)",
"OS Version":"-",
"Portrait Width":"240",
"Landscape Width":"-",
"Release Date":"2010-08"
},
{
"Device Name":"Sony Ericsson Xperia Arc",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2011-03"
},
{
"Device Name":"Sony Ericsson Xperia Mini ST15i",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"320",
"Landscape Width":"401",
"Release Date":"2011-08"
},
{
"Device Name":"Sony Ericsson Xperia Neo",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"480",
"Landscape Width":"854",
"Release Date":"2011-03"
},
{
"Device Name":"Sony Ericcson Xperia Play",
"Platform":"Android",
"OS Version":"2.3.4",
"Portrait Width":"425",
"Landscape Width":"974",
"Release Date":"2011-03"
},
{
"Device Name":"Sony Ericsson Xperia X8",
"Platform":"Android",
"OS Version":"2.1.1",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2010-09"
},
{
"Device Name":"Sony Ericsson Xperia X10",
"Platform":"Android",
"OS Version":"2.3.3",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2010-03"
},
{
"Device Name":"Sony PlayStation 3",
"Platform":"PlayStation 3",
"OS Version":"4.25",
"Portrait Width":"-",
"Landscape Width":"1824",
"Release Date":"2006-11"
},
{
"Device Name":"Sony PlayStation Portable",
"Platform":"PlayStation Portable",
"OS Version":"4.2",
"Portrait Width":"-",
"Landscape Width":"480",
"Release Date":"2005-03"
},
{
"Device Name":"Sony PlayStation Vita",
"Platform":"PlayStation Vita",
"OS Version":"1.00",
"Portrait Width":"-",
"Landscape Width":"896",
"Release Date":"2012-02"
},
{
"Device Name":"Sony Tablet P",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"-",
"Landscape Width":"1024",
"Release Date":"2012-09"
},
{
"Device Name":"Sony Tablet S",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-09"
},
{
"Device Name":"Sony VAIO Tap 20",
"Platform":"Windows 8",
"OS Version":"8.0",
"Portrait Width":"900",
"Landscape Width":"1600",
"Release Date":"2013-06"
},
{
"Device Name":"Sony Xperia acro S",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-08"
},
{
"Device Name":"Sony Xperia P",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-05"
},
{
"Device Name":"Sony Xperia S",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2012-02"
},
{
"Device Name":"Sony Xperia Sola",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2012-05"
},
{
"Device Name":"Sony Xperia SP",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-04"
},
{
"Device Name":"Sony Xperia Tablet Z",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2013-05"
},
{
"Device Name":"Sony Xperia Tipo",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-08"
},
{
"Device Name":"Sony Xperia U",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"320",
"Landscape Width":"569",
"Release Date":"2012-05"
},
{
"Device Name":"Sony Xperia V",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2012-12"
},
{
"Device Name":"Sony Xperia Z",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-02"
},
{
"Device Name":"Sony Xperia Z1",
"Platform":"Android",
"OS Version":"4.2.2",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2013-09"
},
{
"Device Name":"Telstra T-Hub 2",
"Platform":"Android",
"OS Version":"2.3.7",
"Portrait Width":"400",
"Landscape Width":"683",
"Release Date":"2012-07"
},
{
"Device Name":"Tesco Hudl",
"Platform":"Android",
"OS Version":"4.2",
"Portrait Width":"600",
"Landscape Width":"799",
"Release Date":"2013-09"
},
{
"Device Name":"Toshiba AT100",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2011-07"
},
{
"Device Name":"Toshiba AT1S0",
"Platform":"Android",
"OS Version":"3.2",
"Portrait Width":"602",
"Landscape Width":"961",
"Release Date":"2012-02"
},
{
"Device Name":"Toshiba AT200",
"Platform":"Android",
"OS Version":"3.2.1",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-02"
},
{
"Device Name":"Toshiba AT300",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"800",
"Landscape Width":"1280",
"Release Date":"2012-06"
},
{
"Device Name":"Toshiba AT330",
"Platform":"Android",
"OS Version":"4.0.3",
"Portrait Width":"900",
"Landscape Width":"1600",
"Release Date":"2012-07"
},
{
"Device Name":"Wiko Cink Slim",
"Platform":"Android",
"OS Version":"4.1.1",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-11"
},
{
"Device Name":"Yarvik Xenta Tab 8c",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"768",
"Landscape Width":"1024",
"Release Date":"2013-08"
},
{
"Device Name":"XBOX 360",
"Platform":"XBOX",
"OS Version":"2.0",
"Portrait Width":"-",
"Landscape Width":"1050",
"Release Date":"2005-11"
},
{
"Device Name":"Xiaomi MI-3",
"Platform":"Android",
"OS Version":"4.2.1",
"Portrait Width":"360",
"Landscape Width":"640",
"Release Date":"2013-09"
},
{
"Device Name":"ZTE Open",
"Platform":"FireFox OS",
"OS Version":"1.0.0B01",
"Portrait Width":"320",
"Landscape Width":"415",
"Release Date":"2013-07"
},
{
"Device Name":"ZTE T22 (Telstra Urbane)",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-08"
},
{
"Device Name":"ZTE T28 (Telstra Active Touch)",
"Platform":"Android",
"OS Version":"2.3.5",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2011-05"
},
{
"Device Name":"ZTE T760 (Telstra Smart-Touch 2)",
"Platform":"Android",
"OS Version":"2.3.5",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2012-02"
},
{
"Device Name":"ZTE T790 (Telstra Pulse)",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"480",
"Release Date":"2013-05"
},
{
"Device Name":"ZTE T81 (Telstra Frontier 4G)",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"320",
"Landscape Width":"533",
"Release Date":"2012-11"
},
{
"Device Name":"ZTE T82 (Telstra Easy Touch 4G)",
"Platform":"Android",
"OS Version":"4.0.4",
"Portrait Width":"360",
"Landscape Width":"598",
"Release Date":"2012-11"
},
{
"Device Name":"ZTE T83 (Telstra Dave 4G)",
"Platform":"Android",
"OS Version":"4.1.2",
"Portrait Width":"320",
"Landscape Width":"534",
"Release Date":"2013-10"
}
]What you want is a responsive grid that uses media queries to detect the screen size and makes adjustments. You can do this from scratch https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries but it is a lot of work. There are some good libraries that have the core set up and you just need to add your own custom styles.
http://getbootstrap.com/
http://foundation.zurb.com/
Both Bootstrap and Foundation are a mix of a responsive grid, jquery/javascripts and widgets. For either, you can use everything or just portions.
You do have to think about the layout more because you are creating the page for 4 different media queries. Extra Small, Small, Medium and Large http://getbootstrap.com/css/#grid-media-queries. At the minimum you may have 2 columns where one is narrow and one is wide. This could would for tablets and above. But for a phone, it is too much scrolling. Instead, you will want to convert those 2 columns to 2 rows when the viewport is small.
In bootstrap it looks like this
<div class="row">
<div class="col-xs-12 col-sm-3">I am a narrow left column for tablets and above. Top row for phones</div>
<div class="col-xs-12 col-sm-9">I am a wide right column for tablets and above. bottom row for phones</div>
</div>Some very basic examples http://getbootstrap.com/getting-started/#examples and some live sites http://expo.getbootstrap.com/
There are some ui frameworks to be aware of such as
http://www.telerik.com/kendo-ui http://www.telerik.com/aspnet-mvc
http://wijmo.com/
https://jqueryui.com/
Kendo will treat mobile separately so you may not want to go this route. Wijmo is like bootstrap, you can code for all screens and there is a nifty js add on to mimic a spreadsheet http://wijmo.com/demo/spreadjs/samples/ExplorerSample/
For the front end developer that is used to making a 1024 size page and nothing moves, there is going to be a learning curve. The best way to learn is to jump in. Use the bootstrap samples and try and recreate your current page with bootstrap.
There are a lot of questions here for bootstrap and it is worth searching for other's questions on the subject.
Good Luck
ASKER
thanks a lot
If you do not have the low level coding skills to evaluate the quality of a piece you are considering, then you should hire a professional to separate the facts from the marketing hype. 90% of the stuff available on the internet is flawed, serious junk or contains malware. Price tag is no indicator. You can spend thousands and end up with trash or find a gem that is totally free. We spend half our time in this topic trying to help folks who made the wrong decision because they lack the skills necessary to evaluate, beyod it looked good on the demo page.
So the bottom line is that if you don't know how to look at a piece and assess its value, level of responsiveness, and maintainability, then you need to bring in a consultant.
Cd&