This post was written by Emily Gutierrez and Steph Laba, former HackerYou Web Development students and current HackerYou web design and development interns.
This is the second post in a three-part series where we will document our progress as we design and develop a responsive web page. If you haven’t done so yet, feel free to check out our first post here.
This week we tackled the tablet-sized screen design for our responsive web page. Rather than creating a minified version of the desktop site we designed a tablet -specific site. Even though this screen size is considerably smaller than the desktop counterpart the tablet-size bares it’s own unique set of challenges and considerations when developing and designing for it.
Concept & Design:
As with any responsive tablet page there are several design considerations one needs to take into account. The layout needs to be simpler, buttons must be large enough to “tap” rather than click and there are no “hover” states. Though the look of the tablet site would have to be simplified, we wanted to retain an interactive element. We felt the best way to achieve this was to carry over our existing “plus” signs and use them as buttons. By tapping these buttons users could expand and close our students’ testimonials. Not only were we able to retain a level of interaction but by using our existing assets we could relate our tablet design to our desktop design. Here are some of our progress shots:
Sketch of our tablet design concept.
Setting up our margins.
Adding names and assets.
Screenshot showing the active state of our mobile layout
Development: Development definitely gave us a run for our money this week. To allow for our buttons to function the way we envisioned we employed the use of jQuery. We are both just beginning to learn jQuery. Needless to say our pal, Google was as invaluable as ever. Another big challenge we faced concerned the positioning of our “plus” buttons. We used a CSS sprite sheet to create the rotating effect of our buttons. (To learn more about CSS Sprites click here.) Sprites can be a touchy. This week was no exception. As we mentioned we ran into a lot of issues when it came to positioning the sprites individually as well as relatively to other elements on the page. Our solution: to break up our tablet views into slightly bigger and slightly smaller tablet screen sizes, to ensure that the symbols would remain in their correct location.Progress clip showing our work so far. [youtube http://www.youtube.com/watch?v=NQeOLb1F3yk&w=620&h=400\]
Clip showing the dropdown menu in action, still need to tweak the margin and padding!
Be sure to check out the blog next week for the third and final part our series, where we will be covering our design/development process for mobile screens. - Steph and Emily