Menu Close

Responsive web designs/ Media queries developers should know about

In the article Responsive Web Design it talks about how web designs are changing from the traditional desktop websites to a high demand for smartphone websites. The smartphone websites is an entirely different approach to build than a traditional website for non-smartphones. This articles discuss three technical ingredients for building a “Responsive Web Design,” and this is what you need: fluid grids, flexible images and media queries.

“Mobile browsing is expected to outpace desktop-based access within three to five years,” according to article publisher Ethan Marcotte who says” more companies are requesting an iPhone website.”

Screen Shot 2015-07-21 at 9.00.09 AM

In next article  Introduction to CSS to Media Queries written by Arpan Dhandhania explaining how CSS is capable of handling more that just one specific stylesheet for an HTML browser.  Since CSS2 and CSS3 have come out “media queries” allow specific screen sizes to be available for different devises. The enables web pages to be viewed on a large variety of screens such as laptops, iPads, tablets and smartphones devises. The CSS3 allows web developers to maintain multiple versions of each page to cater to each screen by using media queries.

“Media query is a powerful tool where websites are viewed on a huge range of devices,” said Dhandhania.

Screen Shot 2015-07-21 at 9.33.47 AMSome developers build a new website for desktop screens and then use media queries to optimize it for mobile or tablet devises, though this will work it’s suggested that media queries be used for design presentation not optimizations.

For more about intro to CSS to media queries and other useful tips like “linking to different stylesheets using media queries” and “how to test multiple devises visit: htmlgoodies.com

The last article I visit is The Pros and Cons of Responsive Web Design vs Mobile Website vs Native App Like the other two articles this also mentions how mobile optimization is becoming more trendy in todays global web traffic, and this number is continuing  to grow, according to Mashable in Aug 2013.Developers should choose wisely as to which method is best for their particular business. In this article is helps break down the pros and cons of a Responsive Web Design, Mobile Websites and Native App.

Responsive Web Design allows you to have a single website that automatically fits the screen size of the device on which it’s being viewed. This means you have one website that looks equally well on all types of devices.

The Pros

  • A single website – It’s easier to administer just one website for all devices
  • A single URL- This makes sure your users will find you on mobile devises without having to wait for redirects, and is helpful on slower connections.
  • Easy marketing- no extra work for the marketing department is required to promote your website on mobile.
  • Low cost- one website is cheaper!

The cons 

  • A single website – Having just one website for all devises may be east for you, but not always for your users.
  • Technical- As responsive website design is a relatively new technology, there are still some outdated devises with old browsers that will load the website too slowly or even not fully.
  • Users Experience-mobile is different than desktop, if you try to satisfy both mobile and desktop users with the same user interface, you may end up satisfying no one.

Mobile Website is designed specifically for mobile devices. While developing a mobile website you should keep in mind the small screen size, interaction methods and limited connection speed (2G/3G). Content should be easily accessible, fast-loading and readable. Each mobile websites has to be responsive to fit every screen.

The Pros

  • Speed- your website will load fast and easily on mobile platforms
  • Cost-  Building a mobile website is not a cheap option as compared to responsive we design, but still reasonable prices for the value.
  • Benefit form local search- Search engines tend to provide a good local search results for mobile optimization.
  • Immediately Accessible- Users get to pass through download and installation process.

The cons

  • Multiple URLs- Your customer has to remember at least two URLs, or otherwise be redirected to mobile website, which takes several seconds.
  • Maintenance- Maintain two websites.
  • Not Universally Compatible- A single mobile website will not look the same way across all device types.

Native app is a software specifically developed for mobile devices. Native apps are not common for all devices, because they are made for a particular operating system. users have to download the app from a specific OS store, like Google Play or the Apple Store and install it on the mobile device. This has mobile-specific features such as camera, click-to-call buttons, GPS data, contacts and galleries.

The Pros

  • User experience- Native app can have better UX than any other mobile optimization solution.
  • Accessibility and Speed- Applications can operate even without internet connection making all your information available anytime.
  • Everything you can imagine- You can think outside the box and get creative. Mobile platforms, like touchscreen navigation gives you features to work in order to provide excellent UX.
  • Visibility- once a user installed your app on a mobile device, it stays there, showing up with unique icon in app menus.

The cons 

  • Not accessible on all devices- your app is built only for a particular operating system and this means it will not operate on devices with different OS.
  • Goodbye flexibility- All application updates will have to be submitted and approved by the app store every time.
  • It’s costly- Native mobile app development is expensive.
  • Marketing and SEO- A marketing strategy must be a applied for your mobile app promotion and you may beed help from a mobile marketing professional.

These three articles all touch on specific points where a developer needs to stop and think what is the best direction for choosing how to go about developing a website, and a mobile website. All these solutions can very and either work well, but the clear decision is based on the developers choice and what will work best for them!

 

Good luck and check out these articles to better help you make a decision on what solution is best for your business or personal web development.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.