This project implements a Sample Mockup in jQueryMobile with Responsive Design
The Sample Mockup page consists of
-- Header with Logo and two ad blocks -- Navigation with 5 buttons -- Content with 3 equal sized columns -- A gallery feed fetching images with different heights from a JSONP URL and displaying them in tiles without any gaps/padding/margins. (Involves Javascript)
--The Mockup file is mockup.png -- The jQueryMobile with Responsive Design is in jquerymobile.html & jmobilecss3.css -- The WebApp Mobile Design is in mobiledesign.html & mobiledesign.css
The jQueryMobile and Responsive design has been implemented using the existing HTML5 & CSS3 code @ https://github.com/leader/html5css3 as the base code.
jQueryMobile
-- It uses the stable version of the jQueryMobile Framework V1.2 http://jquerymobile.com/demos/1.2.0/ -- It makes use of the Page, Tool Bars, Buttons, List views and applies some content formatting -- data-role=page, header, navbar, ui-grid-b, footer
Responsive Design
-- Media Queries have been used (optimal for Apple iOS Devices, because a Fanboy doesn't have any other devices ;)
References used
jQueryMobile Framework : http://jquerymobile.com
Responsive Design with jqueryMobile and CSS3 : https://www.ibm.com/developerworks/mobile/library/mo-jquery-responsive-design/
Responsive Design Testing : http://mattkersley.com/responsive/
Responsive Design Frameworks : http://webexpedition18.com/articles/responsive-css-frameworks/
Skeleton Responsive design framework : http://getskeleton.com