Responsive Web Design, Websites

35 replies
  • WEB DESIGN
  • |
What's one of the best way to make my website responsive?
#design #responsive #web #websites
  • Profile picture of the author Cesar Sampaio
    You have to clarify what you mean by responsive.
    Signature
    A Step-By-Step Guide! Do Just This One Thing And Finally Make Money As An Amazon Affiliate
    {{ DiscussionBoard.errors[10835454].message }}
    • Profile picture of the author riztechpro
      Originally Posted by Cesar Sampaio View Post

      You have to clarify what you mean by responsive.
      Responsive website means that works across multiple screen sizes and device types.

      It would be very hard for you to make your site responsive if you are a not a proper developer. so i would suggest to use a responsive theme demo, replace your contents and custom graphics. And you will get a fully responsive site.
      {{ DiscussionBoard.errors[10835583].message }}
  • Profile picture of the author XSV1
    Try starting with a template that already has it built in, such as a WP theme. From there, break it down and try to teach yourself how to set them up.

    Start reading through design sites as well.
    HTML Responsive Web Design
    https://responsivedesign.is/examples
    {{ DiscussionBoard.errors[10835592].message }}
  • Profile picture of the author mcb247
    A lot of Wordpress themes are fully responsive I personally use Thrive Themes as all their themes are responsive.
    Signature

    Create Your Own Sales Funnels More Info Here
    Get Your Wordpress Blog Live On The Internet More Info Here

    {{ DiscussionBoard.errors[10839679].message }}
  • Profile picture of the author trevordd
    Hi there! I am learning responsive design too, and I can recommend you to read some articles on it from MonsterPost blog (http://www.templatemonster.com/blog/...endly-website/). It will surely be very useful for you in terms of website design. I hope I helped you somehow
    {{ DiscussionBoard.errors[10839845].message }}
  • Profile picture of the author mandy29
    This is super easy.

    Since the idea of a 'responsive website' has been around since about 2010, developers have been busy creating 'out of the box' themes that are responsive. Each year they get better and better.

    Just google 'responsive wordpress theme'. Then spend some time looking choosing 4-5 that you like. Play with the demos. If they don't offer a demo, then move on. You should test each one to see how it will look on a phone, a tablet, etc. If the demo doesn't have this capability, then Google 'online mobile simulators'. Another way to test is to simply resize your browser window. Do you like the way it looks? Are there areas that don't fit nicely in a small screen size? If yes, move on. It will take some time to find the right one for you. But the extra effort is well worth it. Don't get FREE themes. They always lack in some way and you will need to have developer's skills to fill in the holes.

    Also, look for evidence of a good support system should you need it.

    Good luck!
    Signature

    Mandy Moon - Designer/Developer
    Douglas County Real Estate

    {{ DiscussionBoard.errors[10845922].message }}
  • Profile picture of the author Tabslogic
    [DELETED]
    {{ DiscussionBoard.errors[10851049].message }}
    • Profile picture of the author PPG19
      Originally Posted by Tabslogic View Post

      Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the device one is viewing with. creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.
      This is the Wikipedia definition of Responsive Web Design
      {{ DiscussionBoard.errors[10851067].message }}
  • Profile picture of the author alexseoking
    Bootstrap is inherently responsive by design. Bootstrap is pretty easy. If your website requirement is not too complex maybe I could help you out.
    {{ DiscussionBoard.errors[10852984].message }}
  • Profile picture of the author Sakauat Sakib
    Bootstrap is responsive by design. Bootstrap is pretty easy.You can make it using HTML also. The best way is to use percentage for div .........
    {{ DiscussionBoard.errors[10853040].message }}
  • Profile picture of the author simonz
    The best way is to create a programmer to do that for you. He will create it as you want and will do it quick and professionally.

    Another way is to buy a prepared design (which will not be unique and it will be hard to customize it if you don't know coding)

    And the slower way is to learn to code it by yourself.

    Also there's one more way, it's to use some website creation software/generator online. It may be somehow unique, but it will not be professional.
    {{ DiscussionBoard.errors[10853711].message }}
  • Profile picture of the author sunsetcoder
    For making responsive layout you should have a knowledge of css and html5 if you have it you can use any editor like dreamweaver to make site responsive
    {{ DiscussionBoard.errors[10855113].message }}
  • Profile picture of the author 3wCorner
    What your website made of? Is it based on cms like Wordpress and Joomla? Then use a responsive theme.

    Is it made from scratch? Then use bootstrap.
    {{ DiscussionBoard.errors[10855532].message }}
  • Profile picture of the author Honey Raj
    Why Your Business Should Upgrade to a Responsive Web Design Sooner Rather Than Later

    Why should my business have a responsive web design?

    Responsive web design has become the go-to solution for businesses who want a user friendly interface and higher customer retention. If your company has come this far without taking advantage of all the benefits it has to offer, you may have already begun to see lower visitor numbers and a disappointing conversion rate.

    As a responsible business owner, you'll probably need convincing before paying to upgrade your web presence to one that includes responsive design. However, by opting in you'll soon see a return on investment that will make it worthwhile. In a nutshell, responsive design is just better than what has gone before and in order to keep up with the competition, you'll need it too.

    Responsive web design is crucial for the majority of businesses because it allows your users to achieve their goals quickly and smoothly. The important elements of your website can be pulled up on a smart phone and appear as a fully functional version of the original, complete with all the utility you'd offer to customers on a laptop or desktop computer. If you fail to provide a mobile-friendly experience like this for your visitors they won't hang around, they'll simply click away and complete the action or purchase on a rival site.

    Unhappy customers are not good for business and neither is going up against a major search engine. Google have recently confirmed what many insiders have suspected for some time - sites that are not optimised for multiple users will slip down their search rankings. Google bases their rankings on how useful a page is for the query a user has entered, plus the utility of the site - for example, can a user complete the action they would like to?

    Your page may be completely relevant to their search, but if visitors cannot access the content easily across a number of devices, your site may receive a less than positive review and be placed lower in the search results. If your company is reduced to a second or third page entry you'll lose a considerable amount of traffic, as people naturally select links from the first page.

    Google have also pointed out that companies which have a single responsive website - rather than one standard and one mobile version - are far easier for their bots to discover, because there is just one URL.

    If your site is responsive and ready to service mobile customers, you can take advantage of many tools and helpful apps like the click-to-call button, this enables a web user to make a voice call to your company immediately. Potential customers can also read reviews about your business or even find you in a busy place using Google Maps, both keenly relevant to the needs of mobile users.

    Branding is one of the ways in which we build a relationship of trust with a customer and keep them coming back for more of the same. This is pertinent to responsive design for two reasons, firstly, people do not feel confident in a site they cannot easily navigate and second, in order to create a uniform brand you'll need responsive design to produce a consistent web appearance; however your clients reach you.

    In today's market there are only a handful of reasons why a company may choose to stick with static design on their web page. Those who do not rely in any significant way on web traffic to drive sales, or those who have few competitors, or those who have already looked into responsive design and found it was not right for them. For everyone else, if you want to stay ahead of the curve, responsive design is the only way forward for your website.

    Responsive web design features

    Until recently web designers created different pages depending on where they would be viewed, a tablet for example has a different screen resolution to a laptop, and so the content would be optimised for viewing on that particular device.

    However, responsive web design has revolutionised the way in which users look at the internet, it has created an across the board experience allowing us to view pages on a PC, smart phone or notebook in exactly the same way. When they build a site, designers use the same coding on any number of resolutions, giving every device the same degree of functionality.

    Responsive web designers believe that their clients' web pages should be accessible to every visitor, giving them an optimal experience, regardless of the device they using. This kind of intelligent response to a web user's actions keeps your company relevant in an ever changing online market place; it boosts your e-commerce figures and makes visiting your site an enjoyable experience.

    In technical terms there are three key features of responsive web design, the secret ingredient is generally considered to be media queries. These are filters added on to the CSS or Cascading Style Sheets, affecting the look and feel of any individual page. CSS is a highly useful tool for web designers, but by tagging on a media queries adaption, the process of resizing, rendering and orienting a page becomes far easier.

    Another linchpin of responsive design is the flexible layout, this is based on a grid formation, ideal for formatting margins, positioning the key elements of a page and getting the spacing just right. This means a designer is not limited to a certain number of columns, they can choose as many or as few as is appropriate for the page. A flexible layout also removes the need to work out the layouts and text size based on pixels.

    Instead, designers use percentages which enable them to adopt a far more fluid approach to producing each page. Pixels work well in photographic images, but are a clumsy tool to use over a number of devices. One pixel may be expressed as three dots on a phone, but ten dots on a desktop, changing the quality of an image considerably between devices.

    The third component of responsive design involves the use of CSS or a dynamic resizing function to create flexible images, videos and other content. Text can flow relatively easily as the containing area resizes, but in order to spread this across more complex segments, web designers need to use different techniques. Dynamic resizing gives a web designer greater control over how a page behaves and enables them to add or remove components as needed.

    Taken a whole, these multiple technologies mean visitors can enjoy the feeling of familiarity, regardless of what device they happen to be using, or will be using in the future.

    When a mobile user changes from landscape to portrait mode, the intuitive design will ensure the page gets bigger or smaller. Furthermore, each element, be it an image, textbox or video will also resize itself to correspond with the different dimensions.

    If you have ever tried to access a website and discovered that it was almost impossible to navigate around without shrinking and enlarging the text or buttons, you'll understand why responsive design is considered good practice for the majority of website owners.

    Responsive web design Vs Mobile web design

    Until quite recently, mobile web design was considered far more relevant to modern consumers than it's responsive counterpart, this approach sees designers using smart phones as a starting point and upgrading the technology progressively, through to notepads, desktop computers and beyond. This method meant that companies needed two websites, one for their mobile pages and one for PC users.

    In the early golden years of mobile web design, there were a number of reasons why experts thought that web applications should always be designed first for use on a mobile device. Most important of these was the prevalence of smart phones and the fact that their popularity was continuing to skyrocket. By creating a platform that favoured these millions of users, companies could promote their service or product to what was seen as the next generation of computing consumers.

    Secondly, mobile design was said to foster a cleaner concept without room for extraneous elements or unnecessary page clutter. In a screen the size of that on a mobile phone, there simply is not enough room to crowbar in extra buttons and widgets - instead, a design team had to focus on what was actually needed. By giving users a clear route to what they want, it was assumed that their experience would be better, faster, leave them more inclined to return or convert them into a paying customer.

    Mobile applications were thought to have far more utility than PC based software, what users expected from their laptop paled in comparison to the capabilities offered on smart phones. From a digital compass, to gyroscopic effects, touch screen inputs and voice control, designers hoped to build on these tools to produce modern web design that was not limited by the constraints of a PC.

    Although there are pros and cons for the adoption of a mobile site to run parallel to a main site, responsively designed pages are ideal for retailers who want a robust, homogenous website with plenty of utility for every user. A single site also simplifies marketing campaigns; there is only a need to manage one site and one SEO strategy. Therefore, a website which features responsive design can save companies time and money, but also provide a seamless, convenient way for customers to shop.

    Responsive web design statistics

    When a team of designers build you a responsive website you know it will adapt intuitively to whatever device it is accessed from, but where is the evidence that proves this is a factor in commercial success?

    The content marketing company, Brand Point, found that over 90% of consumers buying decisions are affected by visual elements. In other words, if people land on your site and like the look of the place, they are more likely to stay and buy.

    Screen resolutions are changing all the time as new devices reach the market, web developers Spyderweb found that in 2010 there were just 97 unique screen resolution sizes, but by 2013 that figure had leapt to 232. The only way of tackling this increase is to have a responsive website that is optimised for every customer, whatever device they favour.

    Customers are driven away by high wait times and pages that take too long to appear; even way back in 2009, 47% of people expected a load time of just two seconds on a webpage. In a study carried out by cloud service providers, Akamai, it was also found that 40% of web users clicked away if they had not gained access to a page within 3 seconds. That is a pretty slim window of opportunity, and it's fair to assume that people's expectations have increased since this study was compiled.

    Although external factors like a lack of Wi-Fi or 4G can also affect wait times, the importance of speed for business sites cannot be underestimated. Wed designers can write code for your responsive site that makes it selectively load the elements needed, or even bring in graphics at a later stage.

    Design matters because it can have a huge impact on the number of new visitors to your pages, these are people who have reached you through typing in a specific search criteria and decided to click on the link to your site. Web designers, Domain7, have reported that in the case of their client Regent College, there was a leap of 99% in unique visitors after a revamp of their responsive web design.

    If your mobile pages leave an unpleasant taste in the mouth of your visitors, they are far less likely to view your entire organisation favourably, and they'll tell their friends. Industry experts at the Search Engine Journal discovered that 57% of people would never recommend a company that had poorly designed pages, strengthening the case for a consistent web strategy that performs the way your customers want it to - wherever they happen to be.
    Signature
    {{ DiscussionBoard.errors[10856184].message }}
  • Profile picture of the author yooonpa
    Originally Posted by Khalidw3c View Post

    What's one of the best way to make my website responsive?
    Use wordpress platform and a theme called DIVI from elegantthemes.

    It is already a responsive theme and has a drag n drop functionality.
    {{ DiscussionBoard.errors[10859927].message }}
  • Profile picture of the author YongC
    If your site is simple and don't have any different about feature between mobile version and desktop version you can using media queries or bootstrap but you site is a big website with meny feature i think the best you should using two template like twitter,facebook and other big site using.
    {{ DiscussionBoard.errors[10860178].message }}
  • Profile picture of the author sakshi2
    Want to make your website responsive go for WordPress or check with bootstrap and media query for developing the website by ur own or get some expert designers with softwaree developers India page and also you can get free consultation

    Thanks
    {{ DiscussionBoard.errors[10860725].message }}
  • Profile picture of the author ynef
    Media Queries

    Responsive Web Design Media Queries

    Making a website responsive is actually one of the easiest aspects of web development.
    Signature

    Content writer, web developer, SEO consultant - Ynef's Portfolio

    {{ DiscussionBoard.errors[10861123].message }}
  • Profile picture of the author LuisPeril
    Ditto. Bootstrap.
    {{ DiscussionBoard.errors[10873854].message }}
  • Profile picture of the author lindseysan494
    Use a clean HTML 5 template and a content management system like Wordpress. Don't flood your site with large images, use thumbnails or smaller version that people can click on to enlarge.
    Signature
    Rank First, Pay After - If you don't rank, you don't pay!
    {{ DiscussionBoard.errors[10874087].message }}
  • Profile picture of the author Hatuko
    As already mentioned Bootstrap and similar make RWD easy, but I am not a big fan. You can achieve the same with just media queries without having to use something heavy behind.

    Personally, I don't even like RWD too much.... Rather than "adapting" the same views to both desktop and mobile I prefer to serve views optimised for each type of client. But I am not a designer so that's just my 2c
    {{ DiscussionBoard.errors[10874608].message }}
  • Profile picture of the author Claire Koch
    you can use any kind of website you want and then get yourself a mobile template with a redirect script once you are set up anyone on their smartphone who goes to your site will go to the mobile site instead. Or just go get a responsive template. Search for free one page sites. If you know how to work with html you'll be ok. Pick up a mobile template at resell-rights-weekly.com take the the $1 trial.
    {{ DiscussionBoard.errors[10875744].message }}
  • Profile picture of the author dvlper
    Originally Posted by Khalidw3c View Post

    What's one of the best way to make my website responsive?
    1st you should learn basics of web design courses like PHP,Wordpress etc.,After to design your simple website after to learn depth of all of those after to design rich and responsive website design .
    {{ DiscussionBoard.errors[10878505].message }}
  • Profile picture of the author trlitsolutions
    Use Wordpress platform for your website with responsive web design template which are available in the market. That's the best and easiest way for you here.
    Signature

    Let's create your own business website or mobile app

    {{ DiscussionBoard.errors[10928386].message }}
    • Profile picture of the author TopNetworks
      Originally Posted by trlitsolutions View Post

      Use Wordpress platform for your website with responsive web design template which are available in the market. That's the best and easiest way for you here.
      I would have to say i have built over 100 websites and only about 10 of them was not with wordpress, so many web designers are going to wordpress because its simple.. bit like building a store/shop... one click and its installed and ready to go...
      Signature
      TopNetworks.com ranks the top advertising networks based on reviews from affiliate marketers.
      {{ DiscussionBoard.errors[10928449].message }}
  • Profile picture of the author ryanormrod
    I've been doing this for a long time as a developer. You will need to have a good understanding of CSS, cross browser compatibility, HTML and JavaScript as they all play a part in the making of a responsive website. Bootstrap is a framework that is widely used, but if your website is not that complicated then just use @media queries in your CSS. Not an easy task if you're not a developer.
    {{ DiscussionBoard.errors[10929645].message }}
  • Profile picture of the author PBScott
    Without knowing how your website is built I can not offer any suggestions. It is not that complicated, and depending on your situation might not be worthwhile.

    I made my website what Google considered responsive, but saw no change in traffic after six months, so I then put it back the old way. Since I actually preferred the look of the old way on all devices and had a higher conversion ratio on the old design. Probably because all my users also found it better the old way as well.

    I am a firm believe that people should be controlling robots rather than robots controlling people, so make sure you build for the customer, not Google.
    Signature

    If you don't look at this => Really Funny Shirts <= you missed something in life

    {{ DiscussionBoard.errors[10929733].message }}
  • Profile picture of the author Gregor Fremerey
    [DELETED]
    {{ DiscussionBoard.errors[10931177].message }}
  • Profile picture of the author Daniel Lezcano
    If you want a plugin content builder that gives you absolute control over responsive design get Slider Revolution and any old page builder ... and your off. Be ready however to design 4 versions of your site.

    Still, its absolute control ....
    {{ DiscussionBoard.errors[10939212].message }}
  • Profile picture of the author Mohin Patwary
    Hello, Are you want to do responsive layout for your site?

    Then don't worry, Its easy, Only need some rules. Which your need for responsive.
    If you make out by bootstarp your website. Then you see bootstarp category at css,
    there have responsive for details.
    I told you some about,
    First need media query, without media query responsive may be don't supported.
    Responsive means user friendly for any devices layout. mainly need for responsive 1920 x 1200 large monitor, 1199 x 992 normal desktop, 991 x 768 tablet layout. 767 x 480 large mobile mobile and small mobile 0-767 container width 320px.
    {{ DiscussionBoard.errors[10943400].message }}
  • Profile picture of the author brettb
    Bootstrap works well for me, but if I was building a simple blog or something then I'd use something like Skeleton. Lightweight and it loads incredibly fast (which Google is really into these days as it tries to compete with Facebook in the content space).
    Signature
    {{ DiscussionBoard.errors[10959456].message }}
  • Profile picture of the author Jenery Alest
    WP is easy to use. Setting themes and pluging and play
    {{ DiscussionBoard.errors[10961160].message }}
  • you can use bootstrap or if your planning to make a website,try using WordPress or Wix in making your web design.
    {{ DiscussionBoard.errors[10964945].message }}
  • Profile picture of the author dijani
    Best suggestion is pay to get premium template in stead of free template , most premium templates are fully responsive that works with desktop and tablets.
    Signature
    ====> ❁ Need a Cheap Website Design?
    Contact me ☛ Here! ✔ SUBSCRIBE us on YouTube Here! or find me on my Website here
    {{ DiscussionBoard.errors[10967793].message }}
  • Responsive Web Design is the recent trend that has come up for the wide growth in the usage of the cellphones. Why we need a Responsive Web Design?
    All the websites neither be seen nor be accessed from all the platforms and most of the people nowadays rely on the smartphones instead of logging into the desktops, cause they're convenient & portable. So, a website should be accessible through multiple platforms for obtaining more traffic to the site.
    {{ DiscussionBoard.errors[10977042].message }}
  • Profile picture of the author Fahad Nazir
    I suggest you to go through the bootstrap versions. It will help you in every aspect you need. It is a guide for new comers in the designing field.
    {{ DiscussionBoard.errors[10997870].message }}
  • Profile picture of the author mdshahinkhan
    Bootstrap is the best way to make your website responsive. If you have basic knowledge about CSS, you can use CSS3 Media Queries.

    For example;
    Code:
    /* Tablet Layout: 768px. */
    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .container {
            width: 750px;
        }
    }
    {{ DiscussionBoard.errors[11004807].message }}

Trending Topics