'Net Features : responsive designhttp://www.websitemagazine.com/content/blogs/posts/archive/tags/responsive+design/default.aspxTags: responsive designenCommunityServer 2008 SP2 (Build: 31104.93)Simple Steps to Optimize Responsive and Adaptive Design Websites http://www.websitemagazine.com/content/blogs/posts/archive/2015/11/12/simple-steps-to-optimize-responsive-and-adaptive-design-websites.aspxThu, 12 Nov 2015 17:47:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:48837Administrator3http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=48837http://www.websitemagazine.com/content/blogs/posts/archive/2015/11/12/simple-steps-to-optimize-responsive-and-adaptive-design-websites.aspx#comments<p>:: Michael Wilson, <a target="_blank" href="http://www.webtrends.com/products-solutions/testing/?WT.mc_id=1100011">Webtrends</a> ::</p>
<p><strong><i>Common <a href="http://www.websitemagazine.com/content/blogs/posts/archive/2015/10/22/best-practices-for-measuring-the-performance-of-a-responsive-website.aspx" target="_blank">goal of responsive design</a> and adaptive design websites: Create consistent, optimized experiences for visitors on any device.&nbsp;</i></strong></p>
<p><strong><i>Common goal of an optimization program: Create good overall visitor experiences that yield business results by testing what works and what doesn&rsquo;t.&nbsp;</i></strong></p>
<hr />
<h4><img style="float:left;" src="http://www.websitemagazine.com/images/blog/subarrow.png" width="20" height="20" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE to Website Magazine - 12 Issues FREE</a></h4>
<hr />
<p>With these similarities in desired outcomes, it seems intuitive that any company investing in a responsive or adaptive design website, would simultaneously run an optimization program. Unfortunately, the dynamic display of content within responsive/adaptive layouts complicates the efforts of testing programs. It is time consuming and almost impossible to create independent variations for each device type, therefore, most companies fail to thoroughly test because it&rsquo;s such a drain on resources.</p>
<p>Below are a few simple steps for optimizing both responsive and adaptive layouts.</p>
<h3>Before You Begin, Understand Your Responsive or Adaptive Experiences</h3>
<p>Responsive and adaptive design share a similar goal, but have slightly different approaches. Responsive sites are built to continuously change to fit any screen or device size. Adaptive sites are designed to adjust based on a pre-defined set of screen sizes, commonly mobile, tablet and desktop. Upon varying your browser&rsquo;s width and height, you will notice alterations taking place gradually or more noticeably, depending on whether responsive or adaptive design methods are being leveraged within the website. These changes are defined as breakpoints making the website adaptable on smart devices like tablets, phones and soon, smart watches. Responsive designs fluidly expand or shrink, whereas adaptive designs hitch as you expand or minimize a browser or viewport. You need to understand the behaviors of all the elements on your site as each breakpoint is reached.</p>
<p>Typical noticeable alterations include:</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Navigation menu &ndash;</strong> usually converted to a dropdown menu</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Typography &ndash;</strong> indent, text dimensions and positioning</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>CTA buttons &ndash;</strong> change in dimensions (for better emphasis) and positioning</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Thumbnails &ndash; </strong>cropped or increase in dimensions</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Top/Header elements &ndash;</strong> size alteration in sliding banners</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Columns (left and right sidebars) &ndash; </strong>placed above or below the main content</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>White space &ndash;</strong> additional space between various elements</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Various elements &ndash;</strong> tend to either appear or disappear</p>
<p>These are few of the typical alterations you may notice in a responsive or adaptive website. The rest is up to the respective Web designer or developer to create custom rules which may differ from website to website depending on content and structure. Work with your team to build your catalog of dynamic elements.</p>
<h3>Focus On the Goals for Optimization to Narrow the Scope of Work</h3>
<p>It is important to understand whether you need to test solely for the desktop or for all viewports (e.g. smartphone and tablet devices). For example, if the goal of a test is to improve the completion rate of a form-based application that visitors mainly complete from a desktop or tablet using the desktop layout, you may be able to focus on testing only that view.&nbsp;</p>
<p>Don&rsquo;t forget to use your analytics solutions to understand the profiles of the visitors you are trying to engage. Remember, the goal with any test is to learn and drive an increase in performance. So if five browsers comprise 90-plus percent of the traffic to your test page(s), then you are assured of attaining statistical significance. Similarly, you could target by most popular screen sizes or devices.</p>
<p>The point is to narrow your focus as much as possible to get maximum benefit without having to test every possible layout for each breakpoint on each device.&nbsp;</p>
<h3>Consider Segmenting Tests by Breakpoint</h3>
<p>Rather than test across all browsers and devices in a single test, you can exclude traffic based on device type or screen size to ensure you test within a consistent content view. This allows you to simplify your testing approach and test as you normally would for a simple fixed or fluid layout. It also allows you to avoid the complexities of recognizing breakpoints and adjusting your testing behaviors, CSS and Javascript depending on the data you have for each visitor or user. This also allows you to plan more easily for future iterations of the responsive site.</p>
<h3>Keep It Simple and Design for Each Breakpoint Layout</h3>
<p>Complex layout changes made through client-side manipulations or transformations require a lot of development and quality assurance. To keep things simple, test content above anything else, such as your classic sort of testing: images, headlines, copy. Even with this simplified testing, there is a lot in play for responsive and adaptive sites.</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Typography is not a one size fits all. </strong>For example, if we have a line of text in Arial font, size 10pt which is readable on a desktop, it won&rsquo;t be readable on a phone. Therefore additional CSS rules are included to avail the text in dimensions best fit for the device.</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Line lengths for paragraphs and texts are other factors to consider.</strong> The eye can handle a limited amount of letters and breaks. Ideally, in order to maintain readability, type should be optimized based on screen width. For desktop websites, 50 to 75 characters per line are considered ideal, but that drops to 35 to 50 characters per line on mobile devices.&nbsp;</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Images like thumbnails tend to get enlarged when viewed through smaller devices. </strong>Create assets of adequate dimensions prior to conducting further tests.</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Elements/Modules/Features need to be weighed against value to the visitors. </strong>Devices like tablets and smartphones can host limited content, unlike a website. In fact, such elements tend to be hidden or collapsed through basic CSS rules. That helps in reducing clutter and cognitive overload.&nbsp;</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Positioning alters in responsive design. </strong>Typical examples include repositioning of sidebars and buttons.&nbsp;</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Spacing between modules and elements provides a sense of ease to the user.</strong> Cluttered content tends to lead users into doubt and confusion as content won&rsquo;t be easily comprehended. In smaller devices, white spacing plays an essential role, especially in accessibility. For example, users with big thumbs require content which is easily touched by their fingertips.</p>
<h3>Reduce Complexity, But Do Not Reduce Optimization</h3>
<p>As I indicated earlier, the difficulties of optimizing responsive and adaptive content often lead to reduced testing in general. However, it is complexity introduced into the layouts that actually suggests organizations should test more, not less. You can mitigate the time and effort by making an inventory of the breakpoints for dynamic elements, testing only the content that is necessary to help you achieve your goals, and reducing the scope of testing through segmentation by device type and screen size. Above all, you should be committed to ensuring the best experience possible by optimizing repeatedly and often.&nbsp;</p>
<hr />
<p>Michael Wilson Bio:</p>
<p>As Senior Director of Product Management at <a href="http://www.webtrends.com/" target="_blank">Webtrends</a> and with 20 years&#39; experience in enterprise software, behavioral targeting, customer experience optimization and conversion marketing, Michael Wilson sets the direction for Webtrends <a target="_blank" href="http://www.webtrends.com/products-solutions/testing/?WT.mc_id=1100011">optimization and segmentation</a> solutions.&nbsp;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=48837" width="1" height="1">webtrendswmfeatureresponsive designwm-designdevadaptive designMichael Wilson6 Unquestionable SEO Benefits of Responsive Web Designhttp://www.websitemagazine.com/content/blogs/posts/archive/2015/02/05/6-unquestionable-seo-benefits-of-responsive-web-design.aspxThu, 05 Feb 2015 17:30:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:40781Administrator2http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=40781http://www.websitemagazine.com/content/blogs/posts/archive/2015/02/05/6-unquestionable-seo-benefits-of-responsive-web-design.aspx#comments<p>:: By Keval Padia, <a target="_blank" href="http://nimblechapps.com/">Nimblechapps</a> ::
</p>
<hr />
<p>With the increasing adoption of smartphones and tablets all across the globe, demand for multiple device compatible websites has reached its peak. A responsive Web design not only maintains and normalizes the same look and feel for a website irrespective of devices, it also take care of factors such as click versus touch, screen size, pixel resolution, support for Adobe&rsquo;s Flash technology, optimized mark-up and several others. The formation of layout, subsequent coding and the final visual presentation is done in such a way that the responsive development provides the optimal viewing experience to any viewer for any website in any device. But, not only a responsive Web design enhances the viewing experience but it also takes care of SEO, which is the central element of any digital marketing strategy.</p>
<p>The following blog focuses on the SEO benefits of a responsive Web design and establishes why it is only logical to go for an SEO-enhancing responsive Web design in these days when mobile searches firmly preside over desktop Internet searches.</p>
<p style="padding-left:30px;"><strong>It&rsquo;s what Google demands</strong></p>
<p style="padding-left:30px;">There is no doubt about the fact that Google is the most effective and useful search engine of the lot and in terms of customer or user preference it holds the undisputed no 1 position. Now as the proverb goes &lsquo;if you are in Rome, do as the Romans do&rsquo; you also need to abide by the regulations set up by Google. As the effectiveness of the SEO that you have implemented depends largely on your search engine, there is no point in going against the wish of the search engine itself. Google, in no ambiguous terms, <a target="_blank" href="https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config">always clearly say</a> that the configuration that they recommend should mandatorily be that of a responsive design. So don&rsquo;t hesitate and make your Web a responsive one as per Google recommendations.</p>
<p style="padding-left:30px;"><strong>No risk of duplicity</strong></p>
<p style="padding-left:30px;">If you are not making a consolidated responsive design that necessarily mean that you are developing two different sites for two different mediums, one for website and one for mobile. Doing this means that on Internet you are releasing duplicate content for the same product. Now running same pages twice for different setups is not an easy thing to do, neither it is advisable as it inherently possesses the risk of uploading a wrong version at some point of time or updating one version without doing the same for the other, leading to a mismatch.</p>
<p style="padding-left:30px;"><strong>Links built are undoubtedly stronger</strong></p>
<p style="padding-left:30px;">As we have already discussed, in case of a responsive Web design the URL for each page is a unique entity. Therefore the link which guides you to the master site also leads you to the mobile site. Absence of multiple URLs for the same page helps in non-dilution of page rank and the back-end profile for both mobile and desktop remains the same making it stronger and user effective.</p>
<p style="padding-left:30px;"><strong>Reduction in bounce rate</strong></p>
<p style="padding-left:30px;">Quite often it happens that you open a website and that does not work proper in a sense that it requires unending horizontal scrolling with lots of minuscule copies coming within. This happens due to the bounce rate. If the customer engagement features of your website are not proper and users are leaving your page after a few clicks then the Big G or Google as we know him is going to decrease your rating due to an increased bounce rate. Reduction of your rating means that you will go down in appearance preference and this will reduce the traffic of potential customers in your site. Now a responsive design helps to reduce bounce rate as bounce rate increases due to opening pages in non targeted viewership medium and responsive design nips that possibility in the bud. A responsive design will rearrange it as per the medium and will cause no horizontal scrolling and eventually your ratings may go up in Google&rsquo;s list and you will get the maximum effectiveness out of your SEO.</p>
<p style="padding-left:30px;"><strong>Reduces time to get a page loaded</strong></p>
<p style="padding-left:30px;">The average time required by a mobile page to get loaded is over <a target="_blank" href="http://www.byreputation.com/Average-Web-Page-Load-Times_a/452.htm">7 seconds</a>, whereas Google requires it to <a target="_blank" href="http://searchenginewatch.com/sew/news/2288095/google-issues-new-mobile-speed-guidelines-updates-pagespeed-insights-tool">come down ideally to 1 second</a>. As a responsive design does not require a redirection of queries to reach a certain URL, because of its unique URL system,the time for one mobile page to get loaded in this scenario can be significantly less. Therefore it is evident that a responsive design means less loading time and, possibly, increased SEO.</p>
<p style="padding-left:30px;"><strong>Improve mobile search rankings</strong></p>
<p style="padding-left:30px;">This is another case where the preference of Google comes into play. Mobile searches have almost overtaken Web searches in all over the world and Google ranks URLs optimized for mobile higher in rank as far as mobile searches are concerned. Therefore a responsive design, which is best for mobile search, is also the best for your SEO. &nbsp;</p>
<p><strong>Time to Work</strong></p>
<p>With the above list by our side we can now easily say that in these days for remaining on the top, SEO is inevitable, and with the change in viewership mediums it is also required that we remain on top positions in both mobile searches and desktop searches. To achieve all this as per our SEO objectives, there cannot be anything better than a responsive Web design.&nbsp;</p>
<hr />
<p>Author Bio</p>
<p><a target="_blank" href="https://twitter.com/nimblechapps">Keval Padia</a> is a Founder &amp; CEO of Nimblechapps, a fast-growing mobile app &amp; <a target="_blank" href="http://nimblechapps.com/">website development company</a>. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.</p>
<div></div>
<h4><img style="float:left;" src="http://www.websitemagazine.com/images/blog/subarrow.png" width="20" height="20" alt="" />&nbsp;<a href="http://www.websitemagazine.com/scripts/sub/email_newsletter.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent-oct14">Request Website Magazine&#39;s Free Weekly Newsletters&nbsp;</a></h4><div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=40781" width="1" height="1">seoresponsive designwm-designdevRWDKeval PadiaNimblechappsResponsive Design and the Variable of Onehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/10/23/responsive-design-and-the-variable-of-one.aspxThu, 23 Oct 2014 12:50:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:37966Administrator0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=37966http://www.websitemagazine.com/content/blogs/posts/archive/2014/10/23/responsive-design-and-the-variable-of-one.aspx#comments<p>By David Cervantes &amp; Areos Ledesma of<br /><a href="http://aimconsulting.com/" target="_blank">AIM Consulting</a></p>
<hr />
<p>Today&rsquo;s consumer gets his or her information on the go. Mobile devices are being utilized at a rapidly increasing rate, whether it&rsquo;s for grabbing directions, purchasing shoes or checking the news. According to <a href="http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/" target="_blank">Smart Insights</a>, one in four Americans only use mobile devices to access the Internet and, in 2012, over half of all local searches were done on a mobile device.</p>
<p>The rapid growth of the mobile Internet has also resulted in rapid changes to its supporting technologies. Just a few years ago, a mobile website was considered cutting edge. Sometimes known as an &ldquo;m-dot site,&rdquo; it was one of the first ways to create a mobile-friendly version of an existing website. Visitors to a website via mobile phone would be automatically redirected to an m.dot subdomain that would render a modified (or entirely different) site. This approach had several problems, however, and fell out of favor in 2012 when <a href="http://googlewebmastercentral.blogspot.ca/2012/06/recommendations-for-building-smartphone.html" target="_blank">Google stated its preference</a> for a single URL for Web content.</p>
<p>M-dot sites were mostly a temporary solution to mobile Web, but in most cases they are no longer the best solution. With the latency in 3G and 4G networks, the redirects in m-dot sites cause delays, and lost time is lost money, particularly for e-commerce sites. <a href="https://blog.kissmetrics.com/loading-time/" target="_blank">KISSmetrics</a> estimates a site earning $100,000 per day could lose up to $2.5 million per year with just a 1 second load delay. Moreover, m-dot sites hosting mobile content on a subdomain of the main website force managers to oversee essentially two sites instead of one.</p>
<p><img style="vertical-align:middle;margin:5px;" src="http://www.websitemagazine.com/images/blog/responsive-web-design-large-image.png" width="550" height="233" alt="" /></p>
<h2>One Website, One URL</h2>
<p>Responsive Web design (RWD) offers a solution. Responsive Web design is implemented using new technologies that automatically resize, reprioritize and reorganize content according to the dimensions of your screen. With RWD, the same content can be viewed across desktop screens, tablets and mobile smartphones, all originating from one code-base.</p>
<p>Responsive Web design overcomes the mobile ecosystem&rsquo;s fragmentation and enables both marketing and IT to leverage the concept of the Variable of One: <strong>one strategy, one content, one code base to maintain, one deployment, one user experience, one set of metrics</strong>. And while there is still some debate on the merits of m-dot versus RWD, there is no doubt that, from an SEO perspective, RWD is the better route to take.</p>
<p>However, not every organization feels ready to make the leap. There can be daunting roadblocks, especially at the enterprise level, ranging from lack of compatible infrastructure to lack of skilled resources; however, it&rsquo;s critical for companies to provide a positive mobile user experience, and Responsive Web design provides both marketing and development teams with a solution that is holistic, integrated and for the most part &ndash; when done right &ndash; easier to maintain. Most objections to implementing RWD can be overcome. Here are just a few common objections to responsive Web design as well as how a capable consultancy can help resolve them.</p>
<h3 style="padding-left:30px;">1.<span> </span>&ldquo;We disagree over who owns the process to become responsive.&rdquo;</h3>
<p style="padding-left:30px;">As businesses grow, there are an increasing number of stakeholders that must work together to effect change. For example, IT might have jurisdiction over the development team and network improvements while marketing and sales are the ones driving the need for an improved mobile user experience.</p>
<p style="padding-left:30px;"><strong>Solution:</strong> A committee approach to project management is not always effective in situations like this. Groups should certainly collaborate by providing input on their priorities and feedback on the approach, but the project has to be driven by somebody who has done it before. The key to a resolution is a plan and the key to a successful plan is the experience to understand all of the variables that will come into play during execution. When multiple groups are impacted by a proposed change and can&rsquo;t agree on what is needed or how to implement it, an experienced and objective party, such as a consulting team, can create and execute the plan necessary to develop an integrated, holistic solution that will ensure all goals are met and change is managed throughout the organization.</p>
<h3 style="padding-left:30px;">2.<span> </span>&ldquo;Our infrastructure can&rsquo;t support responsive design.&rdquo;</h3>
<p style="padding-left:30px;">Old technology can certainly be an obstacle, especially as responsive Web design leverages new technologies that may not yet be supported by IT. Other challenges include new methods for data exchange (e.g. Web services) and the broader spectrum of browser support that may be required.</p>
<p style="padding-left:30px;"><strong>Solution: </strong>When upgrades in infrastructure are necessary to support the needs of the business, consultants such as architects and lead developers with responsive Web design experience can gauge the best technologies to leverage and which ones to have IT consider for early adoption and testing. Seasoned technologists with the right experience will be able to keep the biggest risks top of mind, such as security, performance and scalability, and come up with a final solution to support the redesign.</p>
<h3 style="padding-left:30px;">3.<span> </span>&ldquo;We don&rsquo;t have people with the right skills to implement responsive design.&rdquo;</h3>
<p style="padding-left:30px;">It&rsquo;s true that RWD requires specialists, including business analysts, user experience designers and developers who understand responsive design and can properly build the new customer-facing experience. It&rsquo;s rare for organizations to have all the required resources available with the right background to implement this type of technological change in an aggressive time-frame. More importantly, the organization must also be able to maintain the product that is built as an outcome of a redesign.</p>
<p style="padding-left:30px;"><strong>Solution: </strong>Technology consulting companies that offer flexible engagement models can help tackle a large redesign by providing skilled resources that blend with your current team. Over time, with the right approach, your internal resources will be trained by the consultants to become more familiar with the technologies involved. As the consulting team phases out, your people will be able to own and maintain the product moving forward.</p>
<p style="padding-left:30px;">When your website can be accessed with any device, you reach more customers and ultimately more conversions. With RWD, content is managed in one place, resulting in more efficiency. With a single URL, tests can be run across all device platforms equally, analytics will be consolidated and data can be more easily aggregated.</p>
<h2>The Future of Responsive Design</h2>
<p>As digital experience continues to evolve and more devices are put on the market for accessing the Web, it&rsquo;s important for organizations to think ahead. How will consumers view your website two years from now? Will it be on wearable devices such as the Apple Watch? Will websites respond to mobile devices differently, serving better content based on location-based context? How big or small will mobile phones be in the future? What about Smart TVs? Responsive Web design can tackle the challenge presented by an increasingly fragmented ecosystem of devices by uniformly serving web content to consumers regardless of hardware, platform or screen size.</p>
<p>In the future, optimizing for different devices will be easier, with new tools to help with selective loading and device capability detection. As we move forward, organizations must seriously consider responsive experiences or risk falling behind in their respective markets and verticals. Now is the time to take a hard look at what RWD can do for your business &ndash; and get the ball rolling. Responsive Web design is future-ready. It is a proven method to deliver digital experiences, and in the long run will be well worth the initial investment.</p>
<hr />
<p>David Cervantes is a seasoned User Experience professional at AIM Consulting. He has led initiatives with major corporations and brands to define the overall <a href="http://aimconsulting.com/solutions-services/digital-experience-and-mobile/" target="_blank">digital user/customer experience</a> including user research and analysis, usability studies, profile modeling, information architecture/wireframes, mock ups, prototypes, and more. He can be reached at <a href="mailto:dcervantes@aimconsulting.com" target="_blank">dcervantes@aimconsulting.com</a>.</p>
<p>Areos Ledesma is the Director of Corporate Development at AIM Consulting. Previously the Solution Director for Digital Experience and UX Design Consulting Engagements, he is well versed in managing all aspects of large-scale initiatives spanning digital strategy, UX and visual design, rapid prototyping, content strategy, development, testing and measurement. &nbsp;He can be reached at <a href="mailto:aledesma@aimconsulting.com" target="_blank">aledesma@aimconsulting.com</a>.</p>
<hr />
<h4><img height="20" width="20" src="http://www.websitemagazine.com/images/blog/subarrow.png" style="float:left;" alt="" />&nbsp;<a href="http://www.websitemagazine.com/scripts/sub/email_newsletter.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent-oct14">Request Website Magazine&#39;s Free Weekly Newsletters&nbsp;</a></h4>
<hr /><div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=37966" width="1" height="1">wmfeatureresponsive designwm-designdevresponsive web designAIM Consulting ChicagoStrip Responsive Lightbox In Focushttp://www.websitemagazine.com/content/blogs/posts/archive/2014/10/17/strip-responsive-lightbox-in-focus.aspxFri, 17 Oct 2014 12:50:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:37811Pete Prestipino0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=37811http://www.websitemagazine.com/content/blogs/posts/archive/2014/10/17/strip-responsive-lightbox-in-focus.aspx#comments<p>Modern Web designers (and the visitors and users of sites they develop) are familiar with lightboxes, a JavaScript technique that is used to display images - or any Web content - using modal dialogs where the asset (image, video, text) is shown filling a portion of the screen while the rest of the window is dimmed out. </p>
<p>Using lightboxes can be effective, but poor implementation can lead to a terrible overall user experience. Fortunately, there&#39;s no shortage of plugins and scripts which work well to put the user first and enable Web designers to really show their stuff. </p>
<p>One such lightbox script is <strong><a href="http://www.stripjs.com/">Strip</a></strong>. What&#39;s unique about Strip is that it only partially covers the page (see images below); and since it&#39;s responsive in nature, users are able to interact with the webpage on larger screens while giving smaller devices (i.e. smartphones) a more traditional lightbox experience. </p>
<p>Another aspect of the Strip jQuery plugin is that it supports not only images, but YouTube and Vimeo files as well. </p>
<p>There are of course dozens of other similar responsive lightboxes including <a href="http://trentrichardson.com/examples/jQuery-Rebox/">Rebox</a> and <a href="http://www.shadowbox-js.com/">Shadowbox</a>.</p>
<p>
<img height="313" width="400" src="http://www.websitemagazine.com/images/blog/stripjquery1.jpg" style="margin:7px;" alt="" />&nbsp;<img height="313" width="400" src="http://www.websitemagazine.com/images/blog/stripjquery2.jpg" style="margin:7px;" alt="" /></p>
<hr />
<h4><img style="float:left;" src="http://www.websitemagazine.com/images/blog/subarrow.png" width="20" height="20" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4>
<hr />
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=37811" width="1" height="1">responsive designwm-designdevlightboxstrip10+ Reasons to Use Responsive Web Designhttp://www.websitemagazine.com/content/blogs/posts/archive/2014/07/24/10-reasons-to-use-responsive-web-design.aspxThu, 24 Jul 2014 13:00:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:35542Administrator4http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=35542http://www.websitemagazine.com/content/blogs/posts/archive/2014/07/24/10-reasons-to-use-responsive-web-design.aspx#comments<p>By Ryan Holman, <a target="_blank" href="http://www.websitedesign.com.au/website_design_sydney.html">Website Design Sydney</a>
</p>
<hr />
<p>Before discussing anything about responsive Web design, we should first know about what responsive Web design actually is. Responsive Web design is the final result of one URL + single content + one code + <a target="_blank" href="http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/">CSS3 queries</a> all into various multiple devices. It is a Web design approach that is aimed at crafting various sites in order to provide an optimal viewing experience for easy reading as well as navigation with just minimum panning, resizing as well as scrolling of contents across wide range of devices. These devices could be mobile phones, desktops, laptops or even tablets.&nbsp;</p>
<p>In this modern Internet world, responsive Web design is now a basic requirement for almost all the websites. Each single Internet user is accessing various websites through various types of devices and so it is now advisable to implement responsive website design on different websites. There are several other reasons that are needed of responsive website design. Let us have a look on that:</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Responsive website design is strongly recommended by Google:</strong></p>
<p style="padding-left:30px;">One of the most important reasons for opting for responsive website design is that it is being recommended by Google itself. Google prefers this, as the content that is being made live on the website as well as on one URL is easier to read, share, interact and link to the content that is located on separate mobile site.</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>One website can be viewed on many devices:</strong></p>
<p style="padding-left:30px;">This is one of the most tempting aspects of responsive Web design. The responsive Web design provides a great user experience through various devices and screen sizes. One can view a particular site on different devices thus resulting into better viewing experience of the site.&nbsp;</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Less bounce rate:</strong></p>
<p style="padding-left:30px;">The responsive websites have very far lower bounce rates as compared to their non-responsive or non-optimized counterparts. The website usually does not have anything that could compromise its functionality as well as the content when it usually appears on different devices. So this proves to be helpful for many of the sites.</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Easier to manage:</strong></p>
<p style="padding-left:30px;">Having a separate desktop as well as mobile site requires dealing with a separate SEO campaign. It is a natural thing and most obvious fact that managing one site as well as one SEO campaign is much better and easier as compared to managing two sites and having two SEO campaigns.&nbsp;</p>
<p style="padding-left:30px;"><strong>&bull;<span> </span>Reduces the page load speed:</strong></p>
<p style="padding-left:30px;">Google prefers loading various mobile pages in order to load it in just one second or less than that. Usually a responsive website design does not require any kind of queries in order to redirect the users to a different URL. This as a result significantly reduces the load time of the page.&nbsp;</p>
<p>Other than all the above factors, there are several advantages of the responsive Web design. They are being listed as follows:</p>
<p style="padding-left:30px;">&bull;<span> </span>Enhancing the user&rsquo;s offline browsing experience.&nbsp;</p>
<p style="padding-left:30px;">&bull;<span> </span>Increasing the sales as well as conversion rates of the website.&nbsp;</p>
<p style="padding-left:30px;">&bull;<span> </span>Increasing one&rsquo;s reach toward tablet as well as mobile audiences.</p>
<p style="padding-left:30px;">&bull;<span> </span>Saving the time as well as cost based on the site management.</p>
<p style="padding-left:30px;">&bull;<span> </span>Saving time as well as cost on various mobile developments.&nbsp;</p>
<p style="padding-left:30px;">&bull;<span> </span>Consolidating ones analytics as well as reporting.</p>
<p style="padding-left:30px;">&bull;<span> </span>Increasing the visibility over the search engines.</p>
<p>As business searches on mobile are being increasing rapidly, companies need to customize their websites according to the requirements of mobile Internet users. This ultimately, along with increase in the brand visibility, saves the time as well as the cost on the mobile site development.</p>
<hr />
<p><a target="_blank" href="http://blog.templatemonster.com/author/ryan-holman/">Ryan Holman</a> is working with leading <a target="_blank" href="http://www.websitedesign.com.au/website_design_sydney.html">Web designers in Sydney</a> since last few years. In the above post he is sharing the best practices of the responsive Web design.&nbsp;</p>
<h4><img height="20" width="20" src="http://www.websitemagazine.com/images/blog/subarrow.png" style="float:left;" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4><div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=35542" width="1" height="1">web designwmfeatureresponsive designwm-designdevRyan HolmanWeb designers in SydneyThe Sad State of Responsive Email Usehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/07/03/the-sad-amp-sorry-state-of-responsive-email.aspxThu, 03 Jul 2014 16:45:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:35019Pete Prestipino0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=35019http://www.websitemagazine.com/content/blogs/posts/archive/2014/07/03/the-sad-amp-sorry-state-of-responsive-email.aspx#comments<p><strong>Despite the obvious benefits, email marketers haven&#39;t adapted to consumers increased mobile usage.&nbsp;</strong></p>
<p>YesMail&#39;s Q1 Benchmarks (released in mid-May 2014) revealed that even though there is a 21 percent positive difference in click-to-open rates for emails with a responsive design, only 1 percent of marketers surveyed send responsive emails exclusively (44 percent use RD in less than half of emails, while 31 percent don&#39;t use RD at all in their emails).</p>
<p>&ldquo;Adopting responsive design is a crucial email best practice that enables marketers to engage consumers whose behavior may change not only annually, but on a seasonal basis,&rdquo; said Matt Caldwell, VP Creative and Agency Services, Yes Lifecycle Marketing. &ldquo;Marketers who don&rsquo;t want to be blindsided as seasonal events cause a temporary change in behavior should implement responsive design consistently, in every email they send.&rdquo;</p>
<hr />
<h4><img height="20" width="20" src="http://www.websitemagazine.com/images/blog/subarrow.png" style="float:left;" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4>
<hr />
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=35019" width="1" height="1">responsive designwm-designdevwm-emailMobile Load Times for Responsive Sites Unacceptablehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/04/24/mobile-load-times-for-responsive-sites-unacceptable.aspxThu, 24 Apr 2014 13:00:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:33138Pete Prestipino3http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=33138http://www.websitemagazine.com/content/blogs/posts/archive/2014/04/24/mobile-load-times-for-responsive-sites-unacceptable.aspx#comments<p><strong>Many responsive sites are experiencing sluggish load times and image size is being reported as the principle cause of the under-performance.</strong></p>
<p>Trilibis, which just so happens to offer a server-side responsive design technology solution, surveyed 155 responsive sites and found that just 21 percent were loading in less than four seconds on a smartphone. What&#39;s worse, 32 percent of the sites surveyed took between 8-48 seconds to load. I sure hope I&#39;m not alone here in thinking that page-load times of that extensive length are simply unacceptable.&nbsp;</p>
<p>The survey revealed that the aforementioned primary cause of the slowness and delay, images, was responsible for upward of 50 percent of the overall page weight for 69 percent of the survey sample. Page weight isn&#39;t nearly a significant an issue for desktops, but it sure is on mobile.&nbsp;</p>
<p>Trilibis also explored whether server-side processing could lower overall page weight and improve performance on mobile devices and found that, using its own image optimization solution, it could reduce page weight by 57 percent for desktop sites, 74 percent for tablets and 77 percent for smartphones.&nbsp;</p>
<p>&ldquo;The mobile Web is considerably slower than its wireline counterpart,&rdquo; said Ted Verani, SVP of sales and marketing at Trilibis. &ldquo;By serving images and pages that are optimized for mobile devices, we see dramatic improvements in page-load time, which translates to a much better overall user experience.&rdquo;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=33138" width="1" height="1">responsive designwm-mobilewm-designdev15% of Websites are Responsivehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/04/03/15-of-websites-are-responsive.aspxThu, 03 Apr 2014 14:00:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:32599Pete Prestipino4http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=32599http://www.websitemagazine.com/content/blogs/posts/archive/2014/04/03/15-of-websites-are-responsive.aspx#comments<hr />
<p><b>Web performance optimization solution Restive released findings from its inagural State of the Mobile Web report recently which detail the readiness for an &quot;increasingly mobile device operating environment.
</b></p>
<p>The most compelling findings reveal that 36% of all Websites are Responsive i.e. customized to work on mobile devices; 60% of these Responsive websites are hosted on dedicated mobile sub-domains, sub-folders, or domain names. This means that only about 15% of all Websites are Responsive to a single web address i.e. require no mobile redirection. In addition, only 6% of all Websites are considered Fast i.e. meet higher website performance optimization standards. Only 3% of all Websites are both Responsive and Fast. The report also finds that the majority of Websites require significant performance optimization with 67% requiring GZIP Compression and up to 83% requiring Minification of either HTML, CSS, or Javascript.</p>
<p>&quot;The takeaway from this report is that Enterprise Websites, and perhaps Websites in general, still have a long way to go to attain readiness for a world where the Smartphone or Tablet is the primary Web access device,&quot; said Obinwanne Hill, Founder and CEO of <a target="_blank" href="http://restive.io/">Restive</a> LLC and author of the report. &quot;It&#39;s hard to believe that almost 4 years after Responsive Web Design and 10 years after Web Performance Optimization came to prominence, there is still very low adoption of these important techniques. Websites need to be both Responsive and Fast to deliver an awesome experience for mobile users and we&#39;re currently working on user-friendly tools and technologies to help Web designers and developers make this happen sooner rather than later.&quot;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=32599" width="1" height="1">responsive designwm-designdevrestive6 Tips for a Bulletproof Responsive Websitehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/03/27/6-tips-for-a-bulletproof-responsive-website.aspxThu, 27 Mar 2014 14:30:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:32185Administrator1http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=32185http://www.websitemagazine.com/content/blogs/posts/archive/2014/03/27/6-tips-for-a-bulletproof-responsive-website.aspx#comments<p>:: By Tiny Yeung, <a target="_blank" href="http://growthspark.com/">Growth Spark</a> ::
</p>
<hr />
<p>Understanding the importance of responsive Web design (RWD) is to realize that the Web &ldquo;canvas&rdquo; is not static. It&rsquo;s not like a printed book or magazine where you know how much space is on the page and it will not change. Users can view a website through various devices. The best way to accommodate the best-fit for this multitude of screen sizes is to make it respond to the display.&nbsp;</p>
<p>While the conversation is growing louder about how to go about creating a responsive site, here we offer six most important design and development techniques to keep in mind when creating a responsive website. These key tips will help ensure a successful Web experience for all users from desktop to mobile.</p>
<hr />
<h4><img style="float:left;" src="http://www.websitemagazine.com/images/blog/subarrow.png" width="20" height="20" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4>
<hr />
<h2>The Six Tips for a Bulletproof Responsive Website:</h2>
<p style="padding-left:30px;">1. Prioritize Content</p>
<p style="padding-left:30px;">2. Follow a Mobile First Approach</p>
<p style="padding-left:30px;">3. Design for Fingers, Not Just Cursors</p>
<p style="padding-left:30px;">4. Compress Files for Low Bandwidth</p>
<p style="padding-left:30px;">5. Use a Fluid Grid Framework</p>
<p style="padding-left:30px;">6. Use Flexible Images/Video</p>
<h3>1. Prioritize Content</h3>
<p>We should practice prioritizing content in Web design as a whole. Don&rsquo;t build the house without knowing how many rooms and what goes in it. As the screen size narrows, it&rsquo;s obvious we cannot have the same amount of content as we do when viewed on the desktop. Keep in mind not everything on a desktop needs to be on its&nbsp;<img height="892" width="320" src="http://www.websitemagazine.com/images/blog/bulletproof-responsive_1.png" style="float:right;margin:5px;" alt="" />mobile version. Remove ads and archives to save space or place them in a dropdown navigation so it is only seen when the user wants to see it. More is less, and less must be more focused. We need to switch and reposition content as the screen size compresses to emphasize the important information, which leads to our next point, which is mobile-first.</p>
<h3>2. Mobile-First Approach</h3>
<p>As some of you might have already heard the buzz around having a mobile-first approach, it&rsquo;s the notion of thinking for small screens first. However, the mobile first approach is also a mindset; the realization that we should design not just for small screens but with the understanding that people are viewing your site on various devices. They may be outside. They may be doing the laundry. The world is full of stimuli and cutting through the clutter is difficult.&nbsp;</p>
<p>Your viewers and audiences are most likely going to be in a mobile state while viewing your site, so it is critical to keep that in mind and make sure your content is consolidated and focused. Think as if your viewers are scanning your site for relevant information. They don&rsquo;t want to take the time to read everything on the page. They just need to find out how to get to what they want from your site in the first place.&nbsp;</p>
<p>The Mobile First (from the Book Apart series) by Luke Wroblewski is a great reference that explains how to take the mobile first approach.&nbsp;</p>
<p>As an example, we used the mobile-first approach on our own site (see image). The site, whether on mobile or desktop is linear. There is only one direction that the reader can scroll. Using this, we&rsquo;ve directed the readers&rsquo; attention in one direction with content that flows one after the other. These carefully prioritized content bites tell a short story. We like to tell stories. The content is a story about us, what we do, how we do it, what we have done, who we are as individuals, and how to contact us. The image shows a snippet of the mobile version of the site but even viewed on a desktop, it is still linear. The reader is directed to read one thing after another, carefully making them focus from one section to the next.&nbsp;</p>
<h3>3. Design for Fingers, Not Just Cursors</h3>
<p>This is not just for the tech-savy grandmothers out there. Everyone can appreciate a good-sized button that works the first time they click it. On the other hand, besides creating larger buttons on mobile, making a content area clickable is another way to solve the problem.&nbsp;</p>
<p>As a reminder, when playing with those awesome hover effects to note that an area is linked and clickable, there is no hover effect on touch devices (at least not yet). Hover effects can be really cool. You can <img height="668" width="320" src="http://www.websitemagazine.com/images/blog/bulletproof-responsive_2.png" style="float:left;margin:5px;" alt="" />change the color, the size, anything. But since touch devices will not get these effects, keep in mind not to rely too much on hover effects to denote a link because it may be overlooked.&nbsp;</p>
<h3>4. Compress Files for Low Bandwidth</h3>
<p>No matter how cool your site, if it doesn&rsquo;t load fast enough, the user won&rsquo;t be impressed. The user might even think your site doesn&rsquo;t work and have left already before your site loads. That&rsquo;s something we don&rsquo;t want when we think about building a responsive site. Your site also needs to respond to the lowest bandwidths.&nbsp;</p>
<p>There are a few ways to do this.&nbsp;</p>
<p>1.<span> </span>Consolidate as much code as you can using media queries. That&rsquo;s why a mobile first approach works better. The core of the code loaded is used for mobile and media queries are used to adjust for the bigger screen sizes. One simple thing I read that is useful is to apply the &ldquo;not mobile&rdquo; class and have it display none when it&rsquo;s not mobile.</p>
<p>2.<span> </span>Compress images. There are many sites that can help compress image sizes. <a target="_blank" href="https://tinypng.com/">TinyPNG</a> is one. It&rsquo;s also available as a Photoshop plugin.&nbsp;</p>
<p>3.<span> </span>Use a plugin that will delay image loading instead of having the images load all at the same time.&nbsp;</p>
<p>4.<span> </span>Specify smaller image files using media queries for smaller screen sizes.</p>
<p>We encountered this problem working on the Aerolife site (see image). The site, especially the homepage, is a collage of beautiful, high-resolution images. However, it would take great toil to load on a mobile phone. We used the <a target="_blank" href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a> plugin and a combination of smaller image files for mobile screen sizes.&nbsp;</p>
<p>(Left: The Aerolife Homepage is a concept of a collage of interactive content areas with images and text.)</p>
<h3>5. Use a Fluid Grid Framework</h3>
<p>To set the big picture, all content we see on a website is contained within a box. That is how we tell the browser that one section is ending and another is beginning. In the HTML language, these indicators are called tags. Using a fluid grid framework will provide many advantages. A lot of work is done for you when you utilize the frameworks that are constantly iterated. It will also allow you to rapidly create prototypes and really think about how you want to rearrange the content when it responds to the browser.&nbsp;</p>
<p>Check out popular frameworks such as <a target="_blank" href="http://foundation.zurb.com/">Foundation</a>, <a target="_blank" href="http://gumbyframework.com/">Gumby</a>, <a target="_blank" href="http://www.getskeleton.com/">Skeleton</a> and many more. This <a target="_blank" href="http://designinstruct.com/web-design/responsive-css-grid/">article</a> includes a comparison table of 13 responsive frameworks. &nbsp;</p>
<h3>6. Use Flexible Images/Video</h3>
<p>With a flexible grid, we will want flexible images that respond to browser size accordingly. Having flexible images means they are able to resize respective to the browser, but it is also guided by the styles that the designer/developer set. For example, when we want an image to fill the width of the container (it can be the full body width), we will set the image width to 100 percent but sometimes images become pixelated if they are stretched beyond their actual size. Using max-width will ensure that an image will only resize to 100 percent of its actual dimensions and not stretch beyond.&nbsp;</p>
<p>In some cases, mobile devices will render pixelated icons or images. This is because these mobile devices have a higher ppi (pixel per inch) resolution than desktops. This <a target="_blank" href="http://www.jisaacks.com/why-background-images-look-blurry-on-mobile-devices">article</a> explains why this is so. For a responsive site, we need to consider this factor. We want to maintain a clean, crisp look for all devices. In this situation, we can opt to use SVG (scalable vector graphic) files or icon fonts. Using a SVG file is like using a PNG or JPEG file. It can be used directly in an &lt;img&gt; tag. For more browser support information and more ways to use SVG files, there is a very informative <a target="_blank" href="http://css-tricks.com/using-svg/">CSS Tricks</a> tutorial.&nbsp;</p>
<p>There are increasingly more icon font libraries. There&rsquo;s a huge <a target="_blank" href="http://css-tricks.com/flat-icons-icon-fonts/">list of fonts here</a>. The idea is treating these icons like fonts. We can use them with the @font-face method or some libraries can be used through simply including a snippet of code in the &lt;head&gt; like you would use Typekit or Google fonts. Of course, you can even generate your own and use them on your site. An application like <a target="_blank" href="http://fontastic.me/">Fontastic</a> makes it easy, generating the code and the necessary files for you to turn your icons into fonts.&nbsp;</p>
<p>Video can also be resized. Here is a great tutorial and article from <a target="_blank" href="http://alistapart.com/article/creating-intrinsic-ratios-for-video">A List Apart</a> about scaling videos.</p>
<h3>Think Responsive</h3>
<p>There are many more factors to consider when creating a responsive website. You will always stumble onto a roadblock and you might uncover better solutions than the tips we have here. There is an ongoing learning process when building responsive websites. There will always be more than one solution to the problem. In this article, we&rsquo;ve addressed a few points to keep in mind and a few solutions we&rsquo;ve worked with successfully. If we just keep in mind that the site is not always going to be viewed the same way you, the designer, views it, it will bring up more questions and force us to prioritize some things over others, which in turn is the benefit of being responsive. It leads to a more focused site in the end.&nbsp;</p>
<hr />
<p>Tiny Yeung is a designer and front-end developer at <a target="_blank" href="http://growthspark.com/">Growth Spark</a>, a Cambridge-based agency dedicated to helping e-commerce companies enhance operating efficiency and improve profitability through strategic design and innovative technology.</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=32185" width="1" height="1">design and developmentwmfeatureresponsive designresponsive web designGrowth SparkTiny YeungResponsive Web Design Simplified [Infographic]http://www.websitemagazine.com/content/blogs/posts/archive/2014/02/20/responsive-web-design-simplified-infographic.aspxThu, 20 Feb 2014 15:30:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:31382Amberly Dressler7http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=31382http://www.websitemagazine.com/content/blogs/posts/archive/2014/02/20/responsive-web-design-simplified-infographic.aspx#comments<hr />
<p>The benefits of responsive Web design (RWD) are clear. </p>
<p>RWD provides a seamless cross-device experience, which both users and the search engines (namely Google) prefer. Still, <a href="http://www.websitemagazine.com/content/blogs/posts/pages/stat-watch-the-search-experience.aspx" target="_blank">most websites today are not responsive</a>. So, if you are on the fence about whether to respond to responsive, check out the infographic below from <a href="http://www.whoishostingthis.com/#." target="_blank">WhoIsHostingThis?</a> to get a simplified rundown of what responsive Web design is, the user experience benefits and more.&nbsp;</p>
<p><a href="http://www.websitemagazine.com/images/blog/Whoishostingthis-responsiveinfographic_large.png" target="_blank"><img style="vertical-align:middle;margin:5px;" src="http://www.websitemagazine.com/images/blog/Whoishostingthis-responsiveinfographic_small.png" width="600" height="2910" alt="" /></a></p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=31382" width="1" height="1">responsive designwm-designdevresponsive web designWhoIsHostingThis?Usablenet Shows APIs Are the Future of the Multichannel Experiencehttp://www.websitemagazine.com/content/blogs/posts/archive/2014/01/14/usablenet-responds-to-apis-rwd.aspxTue, 14 Jan 2014 15:21:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:30286Amberly Dressler0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=30286http://www.websitemagazine.com/content/blogs/posts/archive/2014/01/14/usablenet-responds-to-apis-rwd.aspx#comments<hr />
<p>APIs are the future of multichannel experiences, according to <a href="http://www.usablenet.com/" target="_blank">Usablenet</a> Chief Innovation Strategist Jason Taylor.</p>
<p>With that forward thinking in mind, the mobile and multichannel company announced its Usablenet API Service, which uses the technology platform&rsquo;s capabilities to convert any Internet content to RESTful-based API. Based on the company&rsquo;s Agile Web Services technology, Usablenet API Service enables businesses to become more agile in creating native apps and expanding to other multichannel projects.</p>
<p>&ldquo;Every business must create multichannel experiences for their customers,&rdquo; said Carin Van Vuuren, CMO of Usablenet. &ldquo;It is a necessity. But to be effective, companies need to have the appropriate technology resources to create these experiences -- whether via native app, mobile Web, tablet, or other.&nbsp;</p>
<hr />
<h4><img style="float:left;" src="http://www.websitemagazine.com/images/blog/subarrow.png" width="20" height="20" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4>
<hr />
<p>&ldquo;API Service makes it possible to quickly develop the services from Web-enabled functionality and use it to create services that can power apps or other multichannel experiences. We give clients more agility so they can build what they need to engage with their customers.&rdquo;</p>
<p>According to Taylor, Usablenet API Service is designed to make it very easy for businesses to produce Web services that are optimized for external audiences, alleviating a significant burden on IT and freeing marketing from constraints that prevent them from creating a differentiated customer experience.</p>
<p>&ldquo;We provide a much needed service in an area that is complex and resource-intensive for companies to develop,&rdquo; said Van Vuuren. &ldquo;We are able to provide API Services with limited impact on client resources, saving time and giving them speed-to-market. The Usablenet API Service also makes it possible for clients to leverage expensive investments they have already made in building key functionality, like checkout, and create a Web service from this capability to power apps and other multichannel experiences.&rdquo;</p>
<p>In addition to releasing its API Service, Usablenet also announced U-Campaign, a new element of its U-Experience Platform that, according to the company, allows marketers to plan, execute and easily manage mobile landing pages and campaign sites in real-time.&nbsp;</p>
<p>This offering is in direct response to the rise of responsive design as a development trend. U-Campaign provides the ability for marketers to create channel-specific campaigns within responsively designed websites for the first time.</p>
<p>&nbsp;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=30286" width="1" height="1">responsive designwm-mobilecarin van vuurenJason TaylorUsablet API ServiceAgile Web Services technologyU-CampaignResponsive Design a Hot Topic in E-Commerehttp://www.websitemagazine.com/content/blogs/posts/archive/2013/11/21/responsive-design-continues-to-be-a-hot-topic-in-e-commere.aspxThu, 21 Nov 2013 13:45:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:29026Allison Howen0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=29026http://www.websitemagazine.com/content/blogs/posts/archive/2013/11/21/responsive-design-continues-to-be-a-hot-topic-in-e-commere.aspx#comments<hr />
<p><strong>Responsive design has certainly been one of the top tech trends of 2013 - and platforms such as CoreCommerce have definitely taken notice. The e-commerce shopping cart provider recently released an update that features several responsive themes.</strong></p>
<p>The new design themes, which offer fluid and adjustable-width layouts, will enable merchants to deliver a consistent digital experience for consumers on any type of device - from Web to mobile. Ideally, this will increase a consumers&#39; familiarity with a brand, as well as the confidence required to buy (which with any luck will lead to actual sales). The initial launch will include just two responsive themes, but the company noted that many more will follow in the coming months.</p>
<hr />
<h4><img height="20" width="20" src="http://www.websitemagazine.com/images/blog/subarrow.png" style="float:left;" alt="" />&nbsp;<a href="http://www.websitemagazine.com/content/blogs/subscribe/default.aspx?utm_source=website&amp;utm_medium=content&amp;utm_campaign=WMcontent">SUBSCRIBE FREE to Website Magazine - 12 Issues&nbsp;</a></h4>
<hr />
<p>&ldquo;Our new responsive design themes will bring a consistent web design across all devices, from smartphone to tablet and beyond,&rdquo; says Matt DeLong, <a href="https://www.corecommerce.com/" target="_blank">CoreCommerce</a>&nbsp;CEO. &ldquo;This will improve user experience, positively impacting our CoreCommerce merchants by reaching the maximum number of customers, no matter what device they&rsquo;re using.&rdquo;</p>
<p>In addition to responsive design, the new CoreCommerce update includes PayPal&rsquo;s Bill Me Later feature, which allows merchants to be paid up front for orders while giving customers the option to have more time to pay on a purchase. This feature is also optimized for mobile shoppers and requires no additional cost or integration work. Plus, the new software features an integration with abandoned shopping cart solution AbandonAid. This solution helps merchants recover abandoned shopping carts through real-time and customized cart recovery emails. That said, only the first $500 recovered with AbandonAid is free, but merchants can purchase pay-as-you-go credits after that.</p>
<p>&quot;We&#39;re delighted to integrate so closely with CoreCommerce,&rdquo; says James Oppenheim, AbandonAid CEO. &ldquo;AbandonAid clients have successfully recovered millions of dollars with our powerful and easy-to-use tools, and we&#39;re confident CoreCommerce customers will see a great immediate benefit from them as well.&quot;&nbsp;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=29026" width="1" height="1">responsive designwm-ecommercecorecommercesoftware updateResponsive Design Adoption Dangerously Low Among Retailershttp://www.websitemagazine.com/content/blogs/posts/archive/2013/11/13/responsive-design-adoption-dangerously-low-among-retailers.aspxWed, 13 Nov 2013 17:05:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:28814Pete Prestipino1http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=28814http://www.websitemagazine.com/content/blogs/posts/archive/2013/11/13/responsive-design-adoption-dangerously-low-among-retailers.aspx#comments<p><strong>More than any time in the Web&#39;s digital history, this holiday season will be one defined most greatly by the use of smartphones and tablets in the consumer shopping experience.</strong>
<br /><br />
One of the main challenges for retailers today, and there are obviously many, is that 85 percent of consumers start shopping on one device but finish on another - and retailers are struggling to keep up, particularly when it comes to providing a consistent visual and interactive design experience. It&#39;s a big problem for retailers already challenged in giving consumers the confidence to buy.
<br /><br />
A recent audit of retailer websites and emails by Bronto, which examined responsive and adaptive design trends among retailers, confirms just how big a problem it could be. Bronto examined how various mobile email clients, apps and operating systems display email messages and the findings, well, weren&#39;t exactly inspiring. Just 4 percent of retail websites used responsive design when viewed on a traditional computer and just 8 percent of emails from retailers used responsive design.
<br /><br />
&ldquo;The online audit clarified the fact that while responsive and adaptive designed sites and emails are becoming increasingly important for engaging shoppers, marketers need to remember there is no cure-all,&rdquo; said Jim Davidson, Bronto&rsquo;s manager of marketing research.
<br /><br />
&ldquo;Instead of blindly relying on one technique, retailers should first better understand which devices shoppers are using at various stages of the purchase path. Based on testing insights, retailers can make adjustments such as website adaptive design improvements or using responsive design in the mobile inbox to increase engagement and sales for multi-device customers.&rdquo;
</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=28814" width="1" height="1">brontoresponsive designwm-ecommercewm-emailadaptive designwm-design“Beyond Responsive” Mobile Solution Comes to Wixhttp://www.websitemagazine.com/content/blogs/posts/archive/2013/10/07/beyond-responsive-mobile-solution-comes-to-wix.aspxMon, 07 Oct 2013 17:05:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:27834Allison Howen0http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=27834http://www.websitemagazine.com/content/blogs/posts/archive/2013/10/07/beyond-responsive-mobile-solution-comes-to-wix.aspx#comments<hr />
<p><strong>HTML5 website development platform Wix has launched a new &ldquo;beyond responsive&rdquo; mobile solution for its 38 million registered worldwide users.</strong></p>
<p>The solution automatically converts a traditional website, including design elements, content, integrated apps and e-commerce capabilities, into a responsive mobile site. However, the solution goes beyond responsive by providing users with the ability to customize mobile sites&nbsp;<span>further</span><span>&nbsp;</span><span>via a WYSIWYG mobile editor. With the WYSIWYG editor, users can change their responsive sites by altering the design, hiding content and moving features.</span></p>
<p>&quot;There are many responsive design solutions out there that work in blocks, scaling and rearranging components based on screen size. Wix, however, is built on flexible layers so we set out to create an infinitely flexible and customizable mobile offering to match and augment the Wix platform,&quot; said Avishai Abrahami, <a target="_blank" href="http://www.wix.com/">Wix</a> co-founder and CEO. &quot;Our goal has always been to put the power of the Web into the hands of our users by providing tools to create and manage a professional and comprehensive online presence. The new mobile solution is the latest addition to the Wix suite, allowing SMBs, entrepreneurs and creative professionals to compete effectively however the market evolves.&quot;</p>
<p>It is important to note that the new Wix mobile offering complies with Web and mobile best practices, including using a single URL structure across versions, a single source code and single source of content. These best practices not only help with SEO efforts, but also make it easy for Wix users to maintain and manage their Web presence on both desktop and mobile from a single location. Moreover, the new mobile solution ensures that mobile sites are automatically updated when a user&rsquo;s desktop site is changed.</p>
<div><img height="615" width="630" src="http://www.websitemagazine.com/images/blog/Wixbeyondresponsive.jpg" style="vertical-align:middle;margin:5px;" alt="" /></div>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=27834" width="1" height="1">mobilewixwebsite builderresponsive designwm-mobilewm-designdevMaking Color Considerations for Mobile Designhttp://www.websitemagazine.com/content/blogs/posts/archive/2013/09/19/making-color-considerations-for-mobile-design.aspxThu, 19 Sep 2013 17:00:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:27519Administrator1http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=27519http://www.websitemagazine.com/content/blogs/posts/archive/2013/09/19/making-color-considerations-for-mobile-design.aspx#comments<p>:: By Calvin Sellers ::
</p>
<hr />
<p>Web design is a key part of any successful company&#39;s marketing strategy. It&#39;s rare nowadays to find a thriving business that doesn&#39;t have a well-oiled, expertly designed website that turns potential customers into loyal clients, and question marks into dollar signs.</p>
<p>With the modern age of smartphones, tablets, and other Wi-Fi-enabled devices, this idea has spread pretty seamlessly into the mobile market as well. Most sites these days offer mobile versions in addition desktop versions of their websites, as well as apps that complement both to create a smooth navigation experience for users.</p>
<p>It&#39;s done so much now that, to those who don&#39;t know what goes into setting it up, it seems easy as pie. The design process is fairly simple, if you are accustomed to the nature of the mobile market, and the way it interacts with Web design. To this end, here are a few points to consider when designing a mobile site.</p>
<h3>Colors Should Enhance, Not Define Messages</h3>
<p>&nbsp;<img style="vertical-align:middle;" src="http://www.websitemagazine.com/images/blog/flickr_color_samples.png" width="500" height="335" alt="" /></p>
<p>Image via <a href="http://www.flickr.com/photos/thedalogs/3313870454/sizes/m/in/photolist-63Qseu-6rLvrW-6tQ3NX-6x5xHR-6x9HvL-6x9HNG-6MPe3z-6NcFn4-6NgQBL-6SNBwa-6SNWXD-6STafd-6STb4A-6STgVG-6STkdb-6UHR9X-6WsJr9-6XqgC8-71XnSk-749j3o-7bXjDd-7k5TRG-7kax7e-7qgzVV-7qnkue-7REdxD-7yQc8P-99T9w7-7QqusJ-7Aoy7Y-82Kv76-8Gnvui-8vcGFb-anwHcV-bATYCo-dpGBio-7BDi6w-cQjjfN-9UgRn9-a19zbB-eRCijF-fwESHo-8afFsQ-aamnff-9Qc6wt-cEuR9o-8t1aG2-eMun5A-7KzKWk-8WvMvx-9X1sxG/" target="_blank">Flickr</a> by thedalogs</p>
<p>Thanks to the limited space issue, mobile sites generally focus on a certain aspect of the main site, with options to navigate to more in-depth areas. Before you even start to think about the design and color of your mobile design, you should determine which messages are most important to get across on this platform.</p>
<p>When you focus on the fundamental message and overall purpose of your mobile site, you will be able to keep them as top priorities. You&#39;ll also be less likely to let the design take away from the message. Because there are so many variables when it comes to viewing mobile sites, the content found on the sites should stand on its own.</p>
<h3>Mobile vs. Desktop Design</h3>
<p>Most companies want their mobile Web design to mirror their desktop design. It creates a sense of unity between the two platforms. It&#39;s important that they are similar, not identical.&nbsp;</p>
<h3>Coordinate, Don&#39;t Match Full-Sized Sites</h3>
<p>Due to their very nature, mobile and desktop website designs should be different from each other. A mobile version of a website should be designed for best viewing on smaller devices, with coordinated color schemes and similar layouts, to make them easier for users to identify and navigate.</p>
<p>While the idea is to coordinate the desktop site as seamlessly as possible, it&#39;s easier said than done when it comes to accommodating for various mobile devices. Mobile screens are simply not as powerful as desktop monitors. They&#39;re used differently too; many mobile users set the contrast and brightness settings low to accommodate for use in the sunlight and to conserve energy.</p>
<p>Keep this in mind when you&#39;re deciding on design principles, and use high-contrast colors with clear designs that will display coherently regardless of the device settings.</p>
<h3>Not all Devices are Created Equal</h3>
<p>As mobile technology progresses, screen resolutions and color support have improved at breakneck speed. Compared to devices that emerged five or 10 years ago, today&#39;s mobile devices are astoundingly more advanced.&nbsp;</p>
<p>You want to make sure that the mobile version of your website is readable, and the design is kept intact. To do this, be certain to design it in such a way that varying levels of mobile phone technology will display it with minimal color distortion. A few ways to do this are by using dark font on light backgrounds, and steering clear of abstract colors that aren&#39;t represented consistently across all devices.</p>
<h3>Be Wary of Gradients and Background Images</h3>
<p>Considering the varying levels of color presentation available on mobile devices, certain gradients and background images can prove to be problematic. Generally speaking, background images should be used sparingly, if not avoided all together, to prevent creating a confusing, cluttered viewing experience.</p>
<p>In addition to screen resolution and color variance, gradients and background images are tricky when used in such small design spaces as smartphone and tablet screens to begin with. Keep in mind the size of the space you&#39;re working with as you&#39;re designing your mobile sites.</p>
<h3>Implications of Responsive Design on Colors&nbsp;</h3>
<p>As opposed to designing a website for a specific device, responsive design is an approach that aims to create websites that provide ideal viewing experiences &ndash; easy reading and navigation &ndash; for all devices including mobile phones and desktop computers. A website designed with responsive design techniques is able to adapt to any device it&rsquo;s viewed from, using flexible images, proportion-base grids, and media queries.&nbsp;</p>
<p>With media queries, designers can create multiple layouts using HTML documents and selectively provide style sheets based on various features including color. When these style sheets are loaded to a browser, they adapt to the device they&rsquo;re being viewed on and present the information on the website accordingly. While other design methods offer a more customizable approach, this one offers flexibility.&nbsp;</p>
<p>Never before has there been such a need to create miniature versions of websites as there is today. The mobile landscape is forever changing and advancing, and Web designers will have to keep one step ahead of the curve to keep up. Remember these principles, and your mobile design efforts will quickly pay off.</p>
<hr />
<p>Author Bio: Calvin Sellers is a mobile technology and social media writer from Tampa, FL. He hopes to provide valuable information in his articles that can help people streamline their lives using technology. Currently he is conducting a head to head battle between the keyboard of the <a target="_blank" href="http://us.blackberry.com/smartphones/blackberry-q10.html">Blackberry Q10</a> and capacitive touchscreen keyboards from a user-performance perspective. Follow him on Twitter <a target="_blank" href="https://twitter.com/CalvinTheScribe">@CalvinTheScribe</a>.</p>
<p>&nbsp;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=27519" width="1" height="1">htmlmobile designwmfeatureresponsive designwm-designdevcolor considerationsCalvin Sellers