Responsive Design
close

on 17th December 2018 / by jake.rheude
Next time you’re in a crowded location, count out ten people. Eight of them will have used a mobile device for online shopping, and at least three will do all their online shopping solely on that mobile device1. If you’re an e-commerce store owner, the eight are great news. However, those three might be giving you some anxiety because you’re not sure the best way to reach them. You’ve heard about the promise of mobile apps and the benefits of a responsive website but aren’t sure where to put your development dollars. Not to worry, we’ll look at the core features of each and give you some suggestions that’ll make the choice a bit easier based on your brand and target markets. What’s Up with Native Apps? You’re probably familiar with apps on your phone, whether they’re called mobile or native apps. A native app is one that was built specifically for an operating system and sometimes is adjusted for an individual device. Such development enables the app to use the specific hardware and features of the mobile device, like its accelerometer, GPS, email, social apps, camera, and more. For an e-commerce brand, an app can be both an online store and a way to view a customer account. Your user will fire up the app and have access to their order history, current order status, and be able to shop your store, among other things. It can be anything from Amazon’s app to your local veterinarian’s app that allows you to refill your pooch’s flea prevention with just a click. The wonderful thing about an app is that you can completely control it. You get to set up the entire user interface, options, notifications it delivers, and so much more. Because an app is downloaded and tied to a specific account, it means you can collect a lot of customer data and show that individual user the offers and coupons most relevant to them. Personalization is at the heart of this interaction, which could increase your chance of sales. The other major benefit is that apps can automatically deliver information to your users, such as deals. Notifications are easy to view, and a single click gets them right to your content. Plus, if you combine this with email marketing, you get multiple chances to reach someone with a personalized offer. The big downside with an app is that you must create multiple versions for different operating systems, and sometimes different phones. There’s a whole lot of testing, and it is continuous. You must ensure the app works on all platforms whenever you make an update and review it across impacted devices whenever there is an update to a major operating system. Two requirements for an app to be successful are: It has to work whenever the user clicks, andYou have to make a compelling enough offer that they open your app consistently.Does a Responsive Website Make Sense? Responsive design is among the most favored design styles right now because it allows you to create once for any screen size. In this architecture, your website automatically arranges itself based on the width of the browser. It prioritizes content and moves things around when you’re working on a mobile device and makes the layout appear as clean and useful as possible. The great news here is that this is automatic once your site is live. You use rules to define how this all reacts, and the site takes care of the rest. It allows you to build once for use on any browser of any size. It’ll even respond when someone on a PC has their browser window maximized or smaller. Dynamic movements can be difficult to plan out, so there’s plenty of testing before your site goes live. The good news is that you don’t have to do much testing and reconfiguring once you’re happy with it. The main testing elements are when you decide to incorporate additional content, plugins, or pages with your website — you want to make sure that new chatbot doesn’t block photos on the mobile version while also isn’t too small to be seen on a desktop browser. For today’s apps, there are a variety of plugins that you can use for things like shopping carts. However, in general terms, it will usually be easier for you to add new features and support for third-party tools on a website because there’s less custom code. Shoppers will appreciate the fact that they don’t have to download a specific app to see your content and that they can buy however they want. If they see something on their phone but aren’t comfortable using a credit card on it, they can simply navigate to your site on their laptop and make a purchase. If you’ve got customer accounts where they can sign in and save a shopping cart or items to a wish list, you’ve just made it that much easier to make a purchase on a preferred platform. The major downside for a website is that it isn’t as interactive as an app and you can’t always support things like gestures or advancement movements through the accelerometer. You’ll also have to get people to sign up for emails to broadcast to reach them; there’s no inherent messaging like you get on an app. How Do You Pick What’s Best? Two factors guide the decision for a responsive website or an app: money and audience. If you can afford the development of a custom app, and you have an audience that has demonstrated a desire to shop on an app, then that’s definitely a good reason to go for it. The cost for developing your own app will depend on your requirements. Beyond that initial cost, there’s another thing to consider about your app: not everyone is going to download it. If one of your brand’s core cultural aspects is exclusivity, then that’s great. If not, you’ll have to get a website anyway, and it’ll most likely be responsive. Responsive websites are relatively inexpensive and, today, there are plenty of tools and services you can use from third parties to do things like improve your shopping cart, add lookbooks, link to CRM and order management tools, and much more. For your app, some partners have APIs that you can use, but you’ve got more custom development here too. A responsive website is always a must-have in today’s environment. A great app is a perfect way to maximize sales through direct personalization if you can afford that development pricing and have a hungry audience. Reference 1. https://www.statista.com/topics/1185/mobile-commerce/ App Development Ecommerce Responsive Design Leave a reply Your email address will not be published. Required fields are marker *
close

on 11th February 2016 / by deepa.n
Responsive sites and adaptive sites are the same in the sense that they both change appearance based on the browser environment they are being viewed on. One of the major challenges in creating a web design is how to create one that has lasting value, at least for a planned period of time. It is more likely that a first time visitor/customer may not be familiar with your products or services. There are other possibilities that your visitor is in a real hurry, or they’re on an iPad, at a coffee shop. Or maybe they’re on some device for which a website hasn’t been planned yet. It takes some careful thought and planning to design a responsive site that can be enjoyed equally across a range of devices. We call such designs as mobile-first, because we expand the design outward from a mobile view to a PC. The sites that embrace mobile first and responsive design are vital, because they prioritize the user experience. Drupal 8 and responsive web design There are many new ways of building mobile-friendly websites with Drupal, from mobile applications to using a mobile-specific theme. Responsive design is a much simpler way of designing for mobile. The goal of responsive/adaptive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on a variety of devices from mobile phones to large monitors. If the requirement is a rather custom theme than an immediate solution, then Drupal 7 can actually take care of it. Drupal 7 core does not really address responsiveness for the website. However, the Drupal community came up with responsive base themes which are simply awesome. Also, there are Drupal 7 modules that can help in making the Drupal 7 website responsive and mobile-friendly. If the requirement is to have a Content Management System that can adapt the site content to any modern device, then Drupal 8 is the best solution. Mobile-first is the new ‘responsive’. Drupal 8 is surely a winner here; not only are its themes responsive, even the admin pages can resize itself to the mobile screen size. Drupal 8 has turned super-fast and mobile-friendly, and managing the site is really effortless. Drupal 8 has been made with a mobile-first approach for users and end-users. With it’s incredibly useful mobile features such as the admin interface, themes, tables, and pictures, it fulfills the need for an extremely responsive website. At Zyxware, we have an experienced team of Drupal developers, Drupal experts, and technical architects who will help you build a power-packed Drupal website that meets your specific business requirements. Over the past few years, we have helped government sites and enterprises power their websites with Drupal. If you are planning to build a mobile-friendly Drupal website or migrate to Drupal 8, we are here to help you. Please Get in touch with us to know more about our Drupal development services. Drupal Development services Drupal Development Drupal 8 Drupal 7 Responsive Design Leave a reply Your email address will not be published. Required fields are marker *
close

on 07th December 2015 / by Moses Raymond
There has been a sea-change in the way people across the world browse the Internet. Over the years, there has been a proliferation in the devices used to access this deluge of websites. Today, PCs and laptops are being quickly replaced by smart phones and tablets, and this has pushed business owners into taking a relook at their website design. Everyone seems to be getting on to redesigning the website in order to give their users an enhanced and more responsive experience. Why should you redesign your website for mobile? Before you get into a tizzy over hiring a good (and cost-effective) web designing company to redesign your business website, here are a few reasons that would convince you of the significance of redesigning your website for mobile. This will also require a bit of research and a sound strategy in place to ensure complete success. Customer satisfaction: Any business gives absolutely top priority to client satisfaction and there is no better way of giving your customers the best experience than making your website mobile ready. Since the mobile site is equipped to collect visitor data, you can work almost real time on improving customer experiences, thus customizing it to the maximum. Ideal way of reaching out to customers: The simplest and the most effective way to reach across to your target customer is to engage them on their favourite social media site. For example, Facebook has proved to be the most downloaded app on the smart phone and this trend has grown phenomenally over the years. A responsive website has a better chance of being viewed than a non-mobile site, and you would surely not want your customer to fall in love with your competitors simply because you did not go the mobile way. Cost-saving: It is a well-known fact that mobile advertising is significantly cheaper and cost-effective as compared to TV and print advertising and also allows your product to connect to more potential customers at a lesser cost. Mobile advertising can also act as a test platform before you decide to move to other expensive mediums. Multichannel Navigation: The mobile phone or tablet is the modern man’s constant companion and increases the possibility of accessing your mobile site. Today, emails and SMS messages are being increasingly accessed via the smart phone and clearly provides your business with the opportunity to integrate a variety of channels and also ramp up social media marketing. User-friendly: Mobile websites are much easier to manage, improves SEO and is quick to adapt to any of the modern devices. You do not want your visitors to continue pinching at the screen to zoom in or out and finally exiting out of frustration. Why you need to choose Drupal for designing mobile-friendly websites? Drupal, the world's most popular open-source content management system, is the preferred choice for building mobile-friendly, responsive websites. One of the outstanding advantages of Drupal is that it operates well for almost all kinds of devices including iPhone, iPad, android and Blackberry. Moreover, it facilitates the efficient management, publishing and organizing of different types of content. Drupal focuses on “Mobile first approach“ that allows the user to make changes from any tablet or mobile with perfect ease. In addition, Drupal provides unique, mobile-friendly and easy-to-use themes and templates which allows content to be scaled to fit into any mobile device. Your business should not lose out to competition because your business site isn’t mobile ready. At Zyxware, we have the necessary expertise to help you make the transition to the next level, thus bringing your customer closer to your products. Call us today to know more about our Drupal website development services. We are here to help you. References: 8 Reasons Why Your Website Should Be Mobile Ready by Now 5 important reasons why you need to redesign your website for the mobile web Drupal Development services Drupal Development Responsive Design mobile commerce Leave a reply Your email address will not be published. Required fields are marker *
close

on 04th December 2015 / by Bipasha Baijulal
Thanks to the tremendous advancement in technology, today we can shop, pay our bills, book tickets and transfer funds through our mobile phones. Now we don’t have to pull out our laptop and wait for it to open in order to make purchases or pay bills, do we? Life has become much easier and quicker; you could say that now we have the world at our finger tips! Although m-commerce is gaining popularity when compared to e-commerce, mobile commerce seems to be developing only at a gradual pace. It is not because users don’t prefer m-commerce. This is mostly due to another reason - booking a train ticket or making any kind of online cash transaction is comparatively quicker when it is done through devices like a pc or a laptop instead of a mobile phone. The reason is that websites and mobile apps of most companies are too ancient to accommodate the m-commerce technology. So, how do some companies have a smoothly operating m-commerce system? The answer: All or most of them have a very functional responsive web design. Responsive web design: A responsive website design adjusts itself to suit the screen size of the device in which it is being viewed on. A responsive web design is a convenience for your customers who visit your website from a smart phone or mobile device. A responsive website design will help your online business to provide the best mobile user experience for your customers. In addition, it offers you a whole lot of benefits because you don’t have to build different websites for different platforms and saves you a significant amount of money. A content management system like Drupal allows developers to build flexible, fast and secure responsive websites and mobile apps which ensure the best m-commerce experience for customers. Drupal 8 and mobile-first approach: Drupal 8, the newest version, has a mobile-first architecture, which means it is equipped with mobile-friendly themes and modules that allow your website to blend into any device. Drupal’s breakpoint module and responsive image module lets your website and its images change without any disruptions to suit the various screen sizes. Moreover, Drupal powered sites are very fast to load and is speedy on every smart device, including mobile phones. Get a mobile-first web design with robust yet interactive mobile applications to improve mobile usability and to deliver a user- friendly experience to your customers. At Zyxware, we aspire to provide Drupal-based responsive website designs that meet every business goal and ensure a smooth m-commerce support for your customers. If you are keen to know more about our Drupal website development services or want to build a mobile-friendly ecommerce website on Drupal 8, please get in touch with us. References: The importance of responsive web design for ecommerce and mcommerce Drupal Development services Responsive Design mobile commerce Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 22nd June 2015 / by premshankar.pb
After smartphones born, people don't just use desktop computer or laptop anymore to visit the websites. They will go for smartphones, tablets, palmtops and so on. How can we keep design to all these different devices? There is a way, that`s responsive webdesign.As the name tells, its a matter of responding to the site user's device specifics. Where to start with the responsive design? All the major browsers support these techniques today.These are the major components of a responsive webdesign: CSS3 media queries Flexible grids Flexible media 1. CSS3 media queries CSS2 allowed us to serve different stylesheets based on media type. We could load a stylesheet when the user looks at the site on a desktop computer that is different from when the page is printed out or when the site is visited using a handheld device. CSS3 however, adds some new possibilities: media queries. Media queries allow us to actively query a device for specifics like device orientation, screen resolution, color depth or the type of screen.Using this, we can present suitable stylesheets for each device. Using media queries in our Drupal theme If we would like to load a different stylesheet when the user holds his device horizontally, we can add something like: stylesheets[all and (orientation:landscape)][] = style-landscape.css Multifile option: Embed your media queries in the .info file stylesheets[all][] = css/style.css stylesheets[print][] = css/print.css stylesheets[all and (min-width: 600px)][] = css/grid-600.css stylesheets[all and (min-width: 600px)][] = css/style-600.css stylesheets[all and (min-width: 480px)][] = css/style-480.css stylesheets[all and (min-width: 960px)][] = css/style-960.css stylesheets[all][] = css/fonts.css For single file : Write media queries inline in css files media all and (min-width: 461px) and (max-width: 900px) { //embed styles here } 2. Flexible grids Using a flexible grid, where we define elements proportionately rather than fixed, the design is allowed to change as per user's screen size. This is the fundamental part of any responsive webdesign. This makes possible to use the same base design structure (the grid) across different possible screens. Using a flexible grid is mostly a matter of writing the right stylesheets, so there is not much interfere from drupal to this. Eg: Omega theme, developed by Jake Strawn. 3. Flexible media Yes, we also need to be flexible with our images and video.We can set our images / videos[iframes] to have a maximum width of 100%, so they always stay within their containing box. The only drawback is that we have to serve unnecessarily heavy files to some devices. A solution for this problem comes in the form of a bit of Javascript and the HTML5 attribute "data-fullsrc", allow us to define an alternate image file in an img tag. By using a Javascript and an .htaccess file, the large image will load in screen resolutions over 480px wide. This will avoid an unnecessarily large request on a device that may have limited bandwidth. Sample tag: <img src="images/smallimg.jpg" data-fullsrc="images/bigimg.jpg" />Javascript then tests for the existence of the HTML5 attribute, "data-fullsrc", in every img tag in the page. The "data-fullsrc" attribute has already been written into the page by the Drupal. This allows Javascript to identify which images are candidates for dynamic rewriting. The "data-fullsrc" attribute points at the large version of the image, while the normal "src" attribute of the images points to the mobile version. By default, the mobile version of the image will be served if either of the following conditions are true: a) Javascript is off b) Check the size of the devices screen, detected by Javascript, is less than 480px wide. If not, it counts as a non-mobile device. In this case, Javascript loops through all img tags and change/rewrite the value of the "src" attribute to be the value of the "data-fullsrc" attribute and the page will immediately request the full-sized images from the server and display those instead of the 1-pixel rwd-image.gif. Sven Decabooter started a module ,provides an imagefield formatter that makes it possible to upload a small and large image, and serving to small screen and large screen devices respectively. Drupal Drupal 7 Responsive Design Leave a reply Your email address will not be published. Required fields are marker *
close

on 01st April 2015 / by uttam.kotekar
In this section we are going to add social media icons to the responsive theme in Drupal. Before starting we need to upload and install any responsive theme(I used CoperateClean theme of Drupal). We will implement this social media icons by creating a block in Drupal and then setting up the cascading style for that block. Below are the simple steps to add a social media icons: Step1: Create a block In Drupal block configuration, add a new block with body as ul and li tags of social icons image wrapped with anchor tag. Below is code to be written in body. Set the body page to FULL HTML and set region to the search region. Remember to change the URLs in the anchor tags to point to your social media profiles. <ul> <li><a href="http://www.facebook.com/?"><img src="sites/all/themes/corporateclean/images/social-media-facebook.png" alt = "facebook"/></a></li> <li><a href="http://www.linkedin.com"><img src="sites/all/themes/corporateclean/images/social-media-linkedin.png" alt = "linkedin" ></a></li> <li><a href="https://twitter.com/"><img src="sites/all/themes/corporateclean/images/social-media-twitter.png" alt = "twitter" ></a></li> </ul> This will create a added block with social media icons. Step2: Styling the block Below is the css code for styling the social media icons to the top right area(style.css). The classes must be modified to suit the names of the classes of the regions in your header in your theme. #header-inside-right .region-search-area { float : right; } #block-block-1 li { float : left; list-style : none; padding-left : 5px; } The above code will do styling the social media block. Now you'll find your social media icons in the top right corner. Drupal Responsive Design Leave a reply Your email address will not be published. Required fields are marker *
close

on 20th March 2015 / by aby.va
Responsive web design is a new technique for building websites that work on tablets, desktop screens and mobile devices. websites were typically designed for desktop and laptop screen resolutions. This worked well until the advent of web supported tablets and smart phones. Responsive Web Design is a new concept which leads to design an application or website in such a way that the same design can be rendered in various devices of different orientations and screen sizes providing the users with the super possible user experience, if not similar. Responsive themeing involves three main principles that come together to form the whole that is responsive design. Fluid Grids Fluid Images Media Queries 1.Fluid Grids Normally, websites have been defined in terms of pixels. For find the transition to using percentages there’s a simple math formula that looks like this: target / context = result From this, we can say that you have a website that has a wrapper containing the site to a width of 960 pixels, and you’re looking at this site in a maximized browser window on a screen that’s 1920 pixels wide. 960px / 1920px = 50% 2.Fluid Images There is many advances in responsive images , but the main idea is that images should be able to shrink within the confines of a fluid grid. This is done very simply with a single line of CSS code: img { max-width: 100%; } 3.Media Queries Take original two column layout and try to shrink it down to a mobile phone, it’s a challenging one. Typically smartphones are used in the screen is taller than it is wide like portrait mode. This tends itself to websites that scroll vertically, but it is not good for wide layouts with several columns. That’s where media queries come in. Media queries are a CSS technology that have been available in browsers for several years now, and they’re a core component of responsive design. Media queries allow CSS to only be applied when specific conditions are met. The trick of responsive design is CSS3 media query. It is same as if conditions to tell the browser how to render the page for specified viewport width. For example, If the browser reaches a specific width and write a media query that will only applies CSS. That means that when a design is too small or too large , a media query used for detect the site width and serve CSS that appropriately Correct the site’s content. @media screen and (min-width: 600px) { /* ...tablet styles here... */ } @media screen and (min-width: 900px) { /* ...desktop styles here... */ } The main purpose of the media queries of for specified viewport width is to apply different CSS rules to achieve different layouts. The media queries can be in a separate file or in the same stylesheet. Reference:drupal.org/project/media_responsive_theme Responsive Design Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 23rd May 2013 / by tintu.manuel
Nowadays we can easily access internet in different devices such as mobile, tablet etc. So its necessary to make a website compatible with popular devices like iPhone, iPad etc. In Drupal, we have a simple method to make a website adapt to different devices. In this method we can convert a normal theme to responsive theme easily. To get this we have to modify the .info file and add the media query stylesheets in .info file. We will also have to add the responsive style rules to the separate media query stylesheets See the example : In this example The first three stylesheets contain common CSS for all layouts. And the remaining four stylesheets are added to make the website responsive. That means when our browser width/device width reaches to any prescribed width mentioned above, the corresponding stylesheet will be loading along with the global CSS. In this .info file you can find the common stylesheets and conditional stylesheets. name = responsivetheme description = An example of using Media Queries in Drupal7 screenshot = screenshot.png package = Core core = 7.x stylesheets[all][] = css/reset.css stylesheets[all][] = css/global-layout.css stylesheets[all][] = css/global-style.css stylesheets[(min-width: 480px)][] = css/480.css stylesheets[(min-width: 720px)][] = css/720.css stylesheets[(min-width: 960px)][] = css/960.css stylesheets[(min-width: 1280px)][] = css/1280.css regions[primarynav] = Primary Nav regions[secondarymenu] = Secondary Menu regions[leftsidemenu] = Left Side Menu ...And it is necessery to change container width property in CSS files according to the device width in different stylesheets. See the example : In 480.css the maximum width of the outer container div would be 480px. This is so that the contents will fit in 480px and it is viewable in mobile devices. .container { margin-left: auto; margin-right: auto; width: 480px; } But in 960.css the maximum width of the container div would be 960px. This is targeted at desktops. .container { margin-left: auto; margin-right: auto; width: 960px; }Like this we will have to change other settings that differ between the different layouts at the different widths. After making these changes clear the 'cache' from Drupal and change the browser width or check in different devices and you can see that when the browser width reaches any of these widths mentioned above, then the corresponding stylesheet gets loaded and the layout changes accordingly based on the CSS specified in the corresponding CSS file. Using these conditional stylesheets we will be able to control the behavior of the Drupal theme for the different widths for which we design the theme for. Once you get that hang of this you will see that responsive design is not rocket science and it is pretty easy. If you are looking to get your next drupal website built using a responsive web design let us know Drupal Drupal Theming Responsive Design Leave a reply Your email address will not be published. Required fields are marker *