Click me
Transcribed

Responsive Design: Getting it right

RESPONSIVE DESIGN: GETTING IT RIGHT In today's innovative environment, the number of devices used for browsing the web continues to grow with no sign of slowing down. Responsive design creates an optimal user experience across devices from a desktop to a smartphone, making it easier for consumers to make quick and educated purchase decisions. WHY IS RESPONSIVE DESIGN SO IMPORTANT? 2.1B There are 2.1 billion mobile-broadband subscriptions. 87% of American adults 45% of American adults have a cell phone. have a smartphone, 90% use their phone to go online. 55% use their cell phones to go online, 31% of which go online mostly using their phone rather than a computer or other device. American consumers spend an average of 1.4 hours per day surfing the web on a mobile device. Using smartphones online 37% of cell phone owners and 64% of smartphone owners use their phone to get news online. 74% of mobile visitors will abandon a site if it takes more than 5 seconds to download. THE ANATOMY OF A RESPONSIVE SITE In the development stage, there are 3 technical ingredients of responsive website design: FLUID GRIDS FLEXIBLE IMAGES MEDIA QUERIES 2 3 1. A percentage based design that adapts to the screen size accordingly. Images sized in relative units to prevent them from displaying outside their containing element. A way to apply CSS rules to the page based on the size of the displaying browser. 5 KEY DESIGN ELEMENTS OF A RESPONSIVE E-COMMERCE ENSURE THE BEST USER EXPERIENCE POSSIBLE The Masthead logo Collection Color Fabric Width The Image Gallery Photoston's eLuram lesum. Favide nih vel velit Thin in Photoshop verion of Larem ipaum Proin gravid nibh vel velit Thia in Photoahep'e verion of Larem ipeum Proin gravida nibh vel vet 3 The Product Description Lorem Ipsum. Proin gravida nibh vel velit4uctor The Auxiliary Information The Footer 2 logo Collection Color Fabric 3 Width THE MASTHEAD This is Photoshop's version of Lorem Ipeum. Proin gravida nibh vel velit This is Photoshop's version of Lorem Ipsum, Proin gravida This is Photoshop's version of Lorem Ipeum. nibh vel velit Lorem Ipsum. Proin gravida nibh logo logo This i Phatoahop's eron of Lrpum This a Phatoahop's HEADER PRIMARY NAVIGATION Should be small and simple in order to keep the focus on the core content, but easy to see . Or main menU can be tricky when working in responsive design due to the limited space provided by small phone screens. Try using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests. There are many options to overcome this depending on number of menu options preferred, including: •A simple menu anchor in the header that toggles the main navigation on small screens. •A header anchor that jumps users to the navigation which is placed in the footer. •A left slide nav (like Facebook's) accessed by a menu icon, revealing a tray that slides in from the left and moves the main content over to the right. •A navigation that overlays the main content of the page. 2 THE LOGO Should be larger and scaled down to the final dimensions. SEARCH BOX A search box allows visitors to jump directly to what they are looking for. logo Collection Color Width Fabric THE IMAGE GALLERY This is Photoshop's version of Loremi Ipsum. Proin gravida nibh vel velit This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit This is Photoshop's version of Lorem Ipsum. Lorem Ipsum. Proin gravida nibh logo logo Thiu a Phatohop's This i Phatohop IMAGE NAVIGATION 2 PRODUCT IMAGE Rather than text-based image navigation, show a preview of different product views. Make your product image the focal point of the page. Images should link to their larger counterparts. Try the lightweight script called Swipe.js to create a touch-friendly image carousel, allowing users to swipe between product photos in a touch-friendly way. logo Collection Color Width Fabric This is Photoshop's version of Loremi Ipsum. Proin gravida nibh vel velit This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit This is Photoshop's THE PRODUCT DESCRIPTION version of Lorem Ipsum Lorem Ipsum. Proin gravida nibh logo logo Proin nith val vea PRODUCT OVERVIEW 2 RATING STARS Should appear above the image (in the markup before the image container), providing the visitor with the product name, price, and popularity or rating. Product This way, they can determine if it's the product they're looking for without having to wait for the rest of the page to load. REVIEW COUNT SHARE BUTTON The review count jumps to the reviews below the product details. Sharing content and products on social networks can be a great way to increase exposure. Just keep it simple with one button. This small detail can be valuable to the 79% of smartphone consumers who use their phone to help with shopping, and maybe even make or break a sale. 5 HANDY ADDITIONS Quantity Field, Size Dropdown, and Add to Cart Button logo Collection Color Width Fabric Product Reviews This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec THE AUXILIARY INFORMATION nibh Re logo logo This i Phatoahop Proin nith el vela RELATED PRODUCTS 2 PRODUCT REVIEWS Smartphone Smartphone You might also like: User Review 1: Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh logo Collection Color Width Fabric bibendum auct consequat ipsum, nec sagittis sem nibh id elit Duis sed odio sit amet nibh vulputate cursus a sit THE FOOTER LINK LINK LINK +00 000 000 LINK LK LINK LINK L1 LINK logo LINK LINK [email protected] LINK LINK LINK logo This a Phototop's eron of Lrpum Proin y nith al vela CUSTOMER SERVICE NUMBER AND EMAIL FOOTER NAVIGATION 2 Providing access to the main site navigation is a good way for the user to jump off to another section and avoids leaving them at a dead end. Remember, phones make calls! The visitor may have a question about the product and having the ability to quickly contact a customer service rep could be just what they need to make a purchase decision. 3 BACK TO TOP LINK Again, it's all about user experience and convenience! WholsHostingThis? Sources bradfrostweb.com, johnpolacek.gitub.io, mashable.com, madmobilenews.com, mobilethinking.com, pewinternet.org

Responsive Design: Getting it right

shared by mrchibolin on Aug 27
1,243 views
1 shares
0 comments
With the increase in consumers using mobile devices to access the web, site designers are being forced to adapt by creating an ultimate experience across all platforms. This guide of sorts that not on...

Category

Business
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size