'Net Features : mobile designhttp://www.websitemagazine.com/content/blogs/posts/archive/tags/mobile+design/default.aspxTags: mobile designenCommunityServer 2008 SP2 (Build: 31104.93)Making 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 SellersHow Touchscreens Changed the Way Designers Designhttp://www.websitemagazine.com/content/blogs/posts/archive/2013/05/23/how-touchscreens-are-changing-the-way-designers-design.aspxThu, 23 May 2013 19:10:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:25205Michael Garrity3http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=25205http://www.websitemagazine.com/content/blogs/posts/archive/2013/05/23/how-touchscreens-are-changing-the-way-designers-design.aspx#comments<hr />
<p><strong>Ever since it was reported in April that Microsoft is planning on launching a smaller 7-inch version of its Surface tablet to compete with the iPad Mini, Web designers have had to refocus their efforts to accommodate the user experience on a variety of touchscreen devices.</strong><br /><br />Needless to say, this gradual change from desktop/laptops to touchscreens will have numerous ramifications for designers.<br /><br />&ldquo;Top navigation elements common to most websites is tricky to duplicate on a touchscreen device,&rdquo; explains Jeremy Durant, the business principal at the San Diego Web design agency <a href="http://www.bopdesign.com/" target="_blank">Bop Design</a>, before adding, &ldquo;Particularly hybrid touchscreen/keyboard combinations like those found on the Surface tablet.&rdquo;<br /><br />The gradually increasing use of touchscreen devices has led to a number of common new design techniques meant to appease all visitors, regardless of the tool they&rsquo;re using to access a site. For instance, many mobile-conscious site designs now put navigation tabs at the right- or left-hand side of a screen, or even at the bottom in some cases, to make them easier to view and use. Another common trope is the inclusion of a button that lets users jump right to the bottom of a page, to allow more space for important content up top.<br /><br />More sites are also starting to have &ldquo;triple-tap&rdquo; features in the upper corners of their homepages that display menu bars or sitemaps, as well as &ldquo;pinch gesture&rdquo; functionality that reloads a page, rotating gestures that (obviously) rotate pages and now include instructions like &ldquo;Drag this icon to continue&rdquo; or &ldquo;Tap here for more info&rdquo; instead of buttons that say things like &ldquo;Click here to continue.&rdquo;<br /><br />Another important consideration that designers have to take, however, is the size of the various elements on their Web pages. According to MIT Touch Lab, the average thumb size is around 72 pixels in width, and the average finger is anywhere between 42 and 57 pixels. <br /><br />This is something that designers should be weary of, says Durant, to make sure that the key elements of a Web page accommodate these dimensions. Otherwise, users may inadvertently click on too many links or the wrong buttons, which will end up causing them to become frustrated and disengaged. So, for instance, links should be easy to identify and distinct from other graphic elements on touchscreen.<br /><br />&ldquo;Touch-navigation and other impending design changes suggest that, in the future, simple wins out over complex or flashy,&rdquo; said Durant. &ldquo;The designer&rsquo;s first priority must be: On a tablet, mobile device and/or desktop, how easy is it for the users to access important links?&rdquo;<br /><br />He then added, &ldquo;Color schemes, typeface and background imagery should take a back-seat to this essential element.&rdquo; Of course, the main consideration should still be readability, especially since users hold these devices at different distances while they&rsquo;re browsing, and forcing them to zoom in or out to better read content makes the process even more laborious.<br /><br />But the fact of the matter is, the best way to truly discover the effectiveness of your design is just to try it out. As Durant said, &ldquo;The only way to know for sure that your touchscreen designs work is through rigorous user testing.&rdquo;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=25205" width="1" height="1">mobiledesign and developmentmobile designwm-designdevbop designtouchscreen devicesThe Web's Most Gorgeously Designed Websiteshttp://www.websitemagazine.com/content/blogs/posts/archive/2013/05/09/the-web-s-most-gorgeously-designed-websites.aspxThu, 09 May 2013 17:00:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:24839Administrator22http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=24839http://www.websitemagazine.com/content/blogs/posts/archive/2013/05/09/the-web-s-most-gorgeously-designed-websites.aspx#comments<p>:: By DJ Miller ::
</p>
<hr />
<p>Stagnant websites simply can&#39;t keep up in the continually evolving online world. Those that update often and experiment bravely with an eye to gorgeous, yet functional design are sure to grab visitors&#39; attention. These top sites feature striking design elements that help them stand out at the head of the pack.</p>
<h2>BBC &ndash; Design Across Platforms</h2>
<p>
<img src="http://i.imgur.com/QJrgbzU.jpg" width="500" height="241" alt="" /></p>
<p>Image via <a href="http://www.bbc.com/" target="_blank">BBC.com</a></p>
<p>BBC&#39;s most recent page design features a look that&#39;s strikingly similar to what you expect in a mobile app. Don&#39;t be surprised if you&#39;re tempted to swipe your finger across your computer screen, even though you don&#39;t have a touch-screen monitor. The Web page features eye-catching images that quickly grab your attention and pull you into the stories. The site uses this same design across all platforms including tablets and smart phones.</p>
<h2>Elysium Burns &ndash; Bold Typography</h2>
<p>
<img src="http://i.imgur.com/SCW1uMz.jpg" width="500" height="240" alt="" /></p>
<p>Image via <a href="http://www.elysiumburns.com/" target="_blank">elysiumburns.com</a></p>
<p>A diverse choice of eye-catching sans serif fonts gives Elysium Burns a memorable look. Article titles and site headings sit against subtle CSS image backgrounds. The simple white on charcoal color scheme really allows the shape and flow of the typography to take center stage on this page.</p>
<h2>Disney &ndash; Highly Responsive Video Design</h2>
<p>
<img src="http://i.imgur.com/azf682w.jpg" width="500" height="244" alt="" /></p>
<p>Image via <a href="http://disney.com/" target="_blank">disney.com</a></p>
<p>Responsive design is essential for any site, but creating a page that&#39;s user-friendly on any platform is more difficult for some features than others. Disney&#39;s site prominently features high-quality videos, so the challenge of their redesign was maintaining video size and quality across platforms. The result is a simple streamlined design that showcases video beautifully on any device.</p>
<h2>Web Design Ledger &ndash; Where Serif and Sans Serif Meet</h2>
<p>
<img src="http://i.imgur.com/Spq6H16.jpg" width="500" height="229" alt="" /></p>
<p>Image via <a href="http://webdesignledger.com/" target="_blank">webdesignledger.com</a></p>
<p>The intriguing look of Web Design Ledger combines both serif and sans serif fonts. The striking difference in font styles throughout the site effectively draws your eye to certain features, such as reader comments. Though this is an unconventional choice of typography styles, it works well in this simple text-heavy layout.</p>
<h2>Combadi &ndash; High-Impact Images</h2>
<p>
<img src="http://i.imgur.com/X1dK4KN.jpg" width="500" height="238" alt="" />
</p>
<p>Image via <a href="http://combadi.com/" target="_blank">combadi.com</a>
</p>
<p>A growing number of sites now use large, high-impact images on their home pages to draw customers in. Though typography has its place, designs like these allow the eyes to rest a bit and take in something refreshingly different. Combadi features both a large image at the top of the page and a series of smaller images for added eye candy further down.
</p>
<h2>The Verge &ndash; Story Collage Layout</h2>
<p>
<img src="http://i.imgur.com/5ofntlL.jpg" width="500" height="243" alt="" /></p>
<p>Image via <a href="http://www.theverge.com/" target="_blank">theverge.com</a></p>
<p>The Verge features a story collage that highlights top features in a clean and visually pleasing way. Each headline is given ample space in its own candy colored box so the titles don&#39;t crowd each other out. Though the site has lots of content, visitors don&#39;t feel overwhelmed thanks to this simple design choice.</p>
<h2>USA Today &ndash; Customizable Experiences for Every User</h2>
<p>
<img src="http://i.imgur.com/HWa71Zq.jpg" width="500" height="237" alt="" /></p>
<p>Image via <a href="http://www.usatoday.com/" target="_blank">usatoday.com</a></p>
<p>USA Today&#39;s design is simple and clean, making it easy to browse massive amounts of information in a short amount of time. This rigid layout is perfect for a site where readers want to navigate to items of interest as quickly as possible. One of the highlights of USA Today&#39;s site design is the viewing option, which allows readers to choose from a list or grid format. This allows for fast and easy customization to suit the tastes of each visitor.</p>
<h2>A List Apart &ndash; Extreme Readability</h2>
<p>
<img src="http://i.imgur.com/fN4P1Ln.jpg" width="500" height="232" alt="" /></p>
<p>Image via <a href="http://alistapart.com/" target="_blank">alistapart.com</a></p>
<p>With so many flashy and colorful design options available, it&#39;s easy to get swept away in the visual aspects of site design and forget about the finer points of readability. This is where A List Apart truly excels. The headlines, subheadings, quotes, and article body all feature clean fonts chosen with reader comfort in mind. The content itself is well-organized and flawlessly edited as well so your eye travels easily from one short digestible paragraph to the next.</p>
<h2>Mea Cuppa Sweets &amp; Coffee &ndash; Striking yet Simple Color Choice</h2>
<p>
<img src="http://i.imgur.com/T2pacDq.jpg" width="500" height="248" alt="" /></p>
<p>Image via <a href="http://meacuppa.be/" target="_blank">meacuppa.be</a></p>
<p>The stunning color choice of Mea Cuppa immediately grabs the visitor&#39;s attention. With a clean palette of black, white, and yellow, the imagery doesn&#39;t take away from the content, but rather makes the viewer want to hang around and feast on the delicious visuals for a while longer. This design proves that less is more and simplicity isn&#39;t inherently boring.</p>
<h2>Postable &ndash; Fast Functionality</h2>
<p>
<img src="http://i.imgur.com/dV6qi1J.jpg" width="500" height="239" alt="" /></p>
<p>Image via <a href="https://www.postable.com/" target="_blank">Postable.com</a></p>
<p>Postable&#39;s purpose is simple. Users sign up for the free service which sends links out to their friends and family asking for updated contact information. Fittingly, the site design for this service is simple and easy to use as well. Three points clearly lay out everything the service does and a short sign up form lets you start in seconds. There&#39;s no clutter, no confusion, and no excess in this functional design.</p>
<h2>Oliver Russell &ndash; Sleek Graphics and Simple Color Choice</h2>
<p>
<img src="http://i.imgur.com/HPCQDrJ.jpg" width="500" height="245" alt="" /></p>
<p>Image via <a href="http://oliverrussell.com/" target="_blank">OliverRussell.com</a></p>
<p>Oliver Russell&#39;s page highlights his marketing services in a sleek design that speaks to his professionalism and Web expertise. The palette features bold warm oranges and yellows with a bright touch of cyan. Finding what you want is easy so visitors never get lost on this well-designed page.</p>
<h2>University of Notre Dame &ndash; Strong Graphics and Cutting-Edge Design</h2>
<p>
<img src="http://i.imgur.com/Wabj2M7.jpg" width="500" height="241" alt="" /></p>
<p>Image via <a href="http://www.nd.edu/" target="_blank">nd.edu</a></p>
<p>The University of Notre Dame handily broke out of the college website mold with their new design. Bold images highlight the campus in a visually enticing way that can&#39;t help but draw visitors in. A simple static toolbar at the top makes navigation easy from anywhere on the page. The responsive design looks just as striking on mobile phones as it does on a standard desktop.</p>
<h2>Starbucks &ndash; Meeting Mobile Needs</h2>
<p>
<img src="http://i.imgur.com/FV1bwTs.jpg" width="500" height="243" alt="" /></p>
<p>Image via <a href="http://www.starbucks.com/" target="_blank">Starbucks.com</a></p>
<p>Not surprisingly, Starbucks found that a growing number of visitors were accessing the site on mobile devices. In answer to the clear need for a better mobile site, they moved to a responsive design that&#39;s equally functional across platforms. The images are simple and deliciously enticing while the functionality is everything users need, allowing visitors to find a store or check gift card balances right on their phones.</p>
<p>Web design is a continuously evolving field and innovation is essential for any business to stay at the top. Browsing these beautiful sites will give you plenty of inspiration for enhancing your own page design.</p>
<hr />
<p><strong>Author Bio:</strong></p>
<p>DJ Miller is a graduate student at the University of Tampa. He is an avid gadget geek who spends most his time writing on anything tech related. His specialty is Web design and optimizing sites for mobile devices and <a href="http://www.lenovo.com/products/us/convertibles/" target="_blank"> ultrabooks</a>. You can follow him on twitter <a href="http://twitter.com/MillerHeWrote" target="_blank">@MillerHeWrote</a>.</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=24839" width="1" height="1">starbucksbbcmobile designwmfeatureresponsive designwm-designdevDisneypostableMea Cuppa Sweets &amp; Coffeecombadicutting edge designWeb design ledgerDJ Millerultrabooksthe vergea list apartElysium BurnsUniversity of Notre Damebest designed websitesusa todayOliver RussellHooked! Mobile Design Interaction on the Webhttp://www.websitemagazine.com/content/blogs/posts/archive/2013/03/14/hooked-mobile-design-interaction-on-the-web.aspxThu, 14 Mar 2013 19:09:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:23808Pete Prestipino3http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=23808http://www.websitemagazine.com/content/blogs/posts/archive/2013/03/14/hooked-mobile-design-interaction-on-the-web.aspx#comments<p><strong>You have to admit that the modern &ldquo;mobile&rdquo; world is changing all sorts of things about the traditional Web &ndash; and not just that we&rsquo;re now all designing with a &ldquo;responsive&rdquo; mindset. It&rsquo;s bringing some rather creative UI/UX features into the mix too.
</strong><br /><br />
A good example of this comes in <a href="http://usehook.com" target="_blank"><strong>Hook.js</strong></a>, a rather lightweight javascript file, which provides &nbsp;&ldquo;pull-to-refresh&rdquo; capabilities for Web pages. While it has its roots in mobile, I at least expect that it will soon make its way onto websites that need to encourage their users to refresh a page &ndash; such as real-time news and information sites, or perhaps even for a few online publishers looking to tack on a couple more additional ad impressions &ndash; wink, wink.
<br /><br />
There are actually a few other instances when developers were able to take features once thought of as exclusively for the mobile experience and port them over for use in traditional desktop Web experiences. Website Magazine will be profiling some in an upcoming issue but one things remains certain - it&rsquo;s certainly a rather exciting time to be a designer.</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=23808" width="1" height="1">mobilehookmobile designwm-designdevResponsive Design: Not So Simplehttp://www.websitemagazine.com/content/blogs/posts/archive/2013/01/31/responsive-design-not-so-simple.aspxThu, 31 Jan 2013 20:30:00 GMT1e469e21-c924-44fa-a132-47b5d0a8ad47:23091Administrator17http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=23091http://www.websitemagazine.com/content/blogs/posts/archive/2013/01/31/responsive-design-not-so-simple.aspx#comments<p><span style="font-weight:bold;font-size:10px;">By&nbsp;</span><span style="font-weight:bold;font-size:10px;">Mike DiMarco, Director of Media for</span><span style="font-weight:bold;font-size:10px;">&nbsp;</span><span style="font-weight:bold;font-size:10px;">FiddleFly</span><span style="font-weight:bold;font-size:10px;">, Inc.</span></p>
<p>Sometimes, a good idea on paper can blossom into a great idea in practice. Other times however, a seemingly great idea on paper can quickly turn into a wastebasket full of unexpected and unnecessary frustration. Such can be the case for those who decide to build a responsive website for their business.</p>
<p>If you&rsquo;re not familiar with responsive Web design, it is at its most basic a website that is coded to reformat to fit whatever device screen it is being viewed on. While this may seem like a no-brainer solution, responsive design poses quite a few more hassles than it may at first seem.</p>
<p>Before we dig into the little (and a few rather large) things that have people pulling their hair out over their responsive sites, let&rsquo;s take a second to acknowledge some real benefits. Of course the most obvious upside would be the necessity to build only one site versus building a site for desktop and a site for mobile. On top of this, responsive design only calls for one set of code, so redirects and links are much easier to organize and sync. With many users accessing a site from different devices, having a single site that is consistent can help streamline branding as well.</p>
<p>While all of this may seem like Web design Nirvana, it&rsquo;s time for the bad news. Simply put, different features are more appropriate for different devices.</p>
<p>Responsive sites can be formatted to include or exclude certain content based on what device they are being viewed on, however the actual content itself remains the same. This means to build an ideal responsive site, designers need to build with mobile in mind first and then work around it. This mindset makes for great mobile versions of responsive sites, but can restrict the creative license designers allow themselves for desktop versions.</p>
<p>Another major issue with responsive design is that mobile users and desktop users have very different needs to consider. While desktop users may be researching your business and comparing prices or features, mobile users are more likely to be looking for things like directions or quick product information. As we mentioned, sites can be designed to show certain features depending on device. Designing specific sites for each platform however, allows for much more efficient and user-friendly versions of each versus a responsive site where small sacrifices must be made in both directions.</p>
<p>This is all by the way assuming that the responsive coding is done properly. Sure we could make this argument for any element that is not executed well, but responsive coding is simply much more difficult than most endeavors and often ends up not fully developed. There are plenty of developers out there doing responsive design, but unfortunately not a whole lot doing it well which is why we see far too often sites with images and text rendering on top of one another, or loading improperly due to a few misplaced lines of code.</p>
<p>If you are just starting a new business and intend to build a very simple site with little content, responsive may be the way to go. However for those businesses that already have a desktop site, redesigning it to be responsive can be very expensive and difficult. Beyond the restructuring that must be done to build a new site with mobile in mind, re-coding the entire thing brings a whole new set of complications.</p>
<p>Responsive sites not only suffer from stunted design creativity, they can also negatively impact your site&rsquo;s SEO status. Building a separate site for mobile allows you to incorporate a whole new set of information, which in turn gives search engines more material to work with. When building responsive sites, the more content you include the more you risk slowing down or cluttering the mobile version of your site, whereas building two separate sites gives you the ability to incorporate more diverse material without losing any features on either version.</p>
<p>Now, I know some of you may be thinking we&rsquo;re a bit biased on this whole responsive vs. mobile debate, and the truth is we are, but for a good reason. While we love the idea of responsive design, we see that there are far too many holes in it to be considered the be-all-end-all solution many people think it is. The much more practical implementation of responsive design is to use it in concert with mobile design. Build things like splash pages or individual campaigns to be responsive while your permanent endeavors all have fully specified versions built.</p>
<p>Businesses that are not looking to include dynamic media content, or simply need an informational site for reference purposes, can see great benefits in responsive design, while businesses that rely on more intricate or interactive web designs will see far better results by developing for individual platforms (e.g., desktop, mobile, tablet).</p>
<p>So, if you are among the many few who have the resources and the talent on hand to create responsive, intelligent sites then I say congrats. To the far more of you that aren&rsquo;t looking to take the huge gamble that your responsive efforts don&rsquo;t turn into a lingering frustration that will have you starting over again and again, it may be time to look into building for mobile.</p>
<p><i>About the Author</i></p>
<p>Mike DiMarco is the Director of Media for <a target="_blank" href="http://www.fiddlefly.com/">FiddleFly</a>, Inc. He has been writing for publications around the Web, as well as film, television and print since 2006. Since 2011, his work has focused on researching and writing about the mobile Web.</p>
<p>&nbsp;</p>
<div style="clear:both;"></div><img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=23091" width="1" height="1">mobile designwmfeatureresponsive designwm-designdevfiddleflyMike DiMarco