Browser Compatibility
Any conscientious Web developer should place a high priority on ensuring that their designs are accessible on any platform with a considerable user base.
After all, Internet users now spend as much time on their phones as they do on their computers. Compatibility is key and your Web site must be scrutinized across all relevant platforms as part of the design process.
Recommend tools: About Tech’s mobile devices expert, Priya Viswanathan, published an excellent roundup of mobile Web site testing tools, including W3c mobileOK Checker, iPhoney, Google Mobilizer, iPad Peek, Gomez, MobiReady and dotMobi Emulator.
Whitespace
During this phase, the Web designer needs to make decisions about the Web site content and functionality. It includes a detailed analysis of the content of the Website in terms information covered, processing required, etc.
With the design of responsive Web sites, providing the reader with a comfortable experience is a top priority.
Practically speaking, you need to ensure that padding and margins do not disappear on smaller screens. Font sizes and line spacing should adjust to the relative amount of whitespace on screen.
Recommended tool: Your eyes. There is no commonly agreed ratio that determines the amount of whitespace on a Web page, so browse your Web site with your visitor hat on and trust your instincts on what feels comfortable.
Intuitive navigation
The navigation elements of a responsive Web site are of vital importance, because the quality of the user experience is largely dependent on them.
Users want to intuitively be able to find what they are looking for without hassle.
Menus are essential in defining the navigability of your site.
Optimized images
Despite improvements in Internet speed worldwide, image optimization is still a vital consideration when it comes to responsive design.
A huge percentage of Internet users will access your Web site via mobile connections and not superfast broadband.
There is simply one factor to consider when it comes to optimizing images: time.
Loading time has a huge influence on both the user’s patience and page abandonment.
- Use concise and direct image names
It's really easy to blow through hundreds of product shots and keep the default file names your camera assigns.
When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
- Optimize your alt attributes carefully
Alt attributes are the text alternative to images when a browser can't properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your ecommerce products to show up in Google image and web search.
- Resize your images
When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. (Note: If you’re a Shopify merchant, your Shopify theme automatically compresses images, so this shouldn’t be an issue for you.)
- Choose the right image format
There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.
JPEG (or .jpg) is the de facto standard image file type for the web. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
Consistency
Providing an inconsistent browsing experience across different platforms is almost guaranteed to frustrate visitors to your site, leading to increased bounce rates and page abandonment en masse.
Information should be easily accessible across all forms of your Web site’s design. Most importantly, your navigation menu, contact information and key content should all be a breeze to find.
Recommended tool: Twitter Bootstrap is lauded by many as a highly effective tool for creating mobile-first responsive designs that adapt consistently to devices of all shapes and sizes.
