Announcement

Collapse
No announcement yet.

Responsive and Adaptive Web Design: 2013

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Responsive and Adaptive Web Design: 2013


    As of right now, July 2013, there is no real standardization on when you should break your content, how you should create your responsive design, or what methods you should use. The responsive web methodology is still new and you should expected to change over the next few months. However, this should not stop you from creating responsive websites today.

    Article that started it all: Responsive Web Design by Ethatn Marcotte -- May 25, 2010 -- A List Apart

    Web designers must be fluent in HTML and CSS or you will have a near impossible task in creating responsive and adaptive webdesign. HTML5 and CSS3 are the new standards.

    The size of the devices viewing web is anywhere from less than 300 pixels to 2880 pixels wide (retina displays). This has caused a revolution in 2013 on how the websites are created and coded to be visually pleasing and functionally working for any display type.

    In order to be current with this new and yet evolving web practice, a person must first think of how the content is being viewed on these wide variety of displays and devices. How can I make one image that works at 300 pixels wide work on a device that is 2880 pixels wide? A web designer overcomes problems like the raster image scaling and content "switching" display by using a combination of CSS, Javascript and HTML 5. (Serverside loading content into the html markup does not matter if the html markup is responsive and adaptive)

    The number of people using mobile devices and multiple displays in their daily life is going to increase to 50% or more by the end of 2013. People have voiced their opinion on how crappy the websites appear, how difficult it is to navigate webpages, and how slow these websites load on their mobile device. A solution needed to be found.

    Previously, we were trying to detect what device the person was using and create a separate website that was dedicated to that type of device(s). The problem with this, is that there is new device sizes emerging at such a rapid pace that there was no way to keep up. The method was flawed and a bit of a headache to maintain 2 or more sites. You have probably seen many sites use a different URL such as mobile.smashingmagazine.com/sample-article.

    Then came the idea of using one website and using CSS to manipulate the visuals on the mobile device. In theory this sounded great, in practice the problems arose of how to handle static content such as video and images. A pure CSS solution does not work very well in most cases. The introduction of HTML 5 and JavaScript allows for expansive control over content.

    Responsive means that the content and images are fluid and design is scaled by resizing the browser window or shrinking content to fit the size of a mobile device. This is done by using percentages in the layout and on images. Obviously, you can only scale raster images so far for you distinctly see pixelation. And you are still loading full size images and extra http hits that waste time and bandwidth.

    How do you overcome the problem of static content? Adaptive layouts.

    Adaptive means that at a certain resolution or breaking point the content switches to another CSS command and adapts the visual content on your monitor or mobile device. The breaking point is a logical place for your contents to switch to another layout that is assisted by CSS, JavaScript and HTML 5.


    As designers we need to choose the method that best fits the content that we need to present to the web. What this method is, is entirely up to the person who's creating the site.

    12 column grid system. The grid system allows you to create a master framework of CSS for content layout management. Web designers can easily build complicated layouts without a lot of complicated code or custom elements. Many of the frameworks listed below use this concept.

    Frameworks and Boilerplates are prewritten code that you can use to build your website. Some people find this nice quick solution to get into responsive design. The pitfall to watch out for is that any framework you choose is not magical you still need to know how to manipulate and code your images, video, and content so that it displays properly in that framework. Frameworks come from the very light CSS and HTML markup, to very heavy code where they assume everything. Frameworks are popping up all over the place, a web designer still needs to know what to do with them.


    A few standardized frameworks. Read each one to see what fits best with your project.

    Bootstrap is build by the team at Twitter.

    Frameless This is the big brother to [url=http://lessframework.com/]Less Framwork, which is now considered old.

    Skeleton is a boilerplate which has a small collection of CSS files for rapid development.

    Foundation is a full front end framework.


    Other Frameworks and Boilerplates can be found through these articles.

    20 Exceptional CSS Boilerplates and Frameworks - Mashable

    Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained - Design Shack


    Learning about Responsive & Adaptive Web Design

    What is the difference between responsive vs. adaptive web design? -- Tech Republic

    Guidelines for Responsive Web Design -- Smashing Magazine (2011 article is still valid when combined with an adaptive approach)

    Solving Adaptive Images In Responsive Web Design -- By Estelle Weyl -- Smashing Magazine

    This uses SASS project code found at github. https://github.com/nex3

    Responsive Web Design -- The Sass way

    Responsive images and dealing with images in browsers that don't support HTML5 or CSS3 entirely (aka: IE8 and below).
    Fluid Images -- Unstopable Robot Ninja

    Windows version of Responsive Web Design (good tips)
    Responsive Web Design --MSDN Magazine


    SOON - I will be following up this article with one for HTML 5 and CSS, typography and what images to use, including creating images out of pure css.
    Last edited by Drazan; 07-13-2013, 01:48 PM.

  • #2
    Hi Drazan, thanks for all this very useful information! One thing I'm trying to figure out though is how I should send the final artwork to a developer for a responsive/adaptive website? Do I just create artwork for the largest size that I want the site to be seen at (and the developer does the rest) or do I need to send multiple versions of the design in chosen sizes?

    Comment


    • #3
      If you know what your "break" sizes are, and that you know how your layout looks at each break size, then you can export the proper sized images. It's really like designing the website three times over. 1) regular site as seen on a desktop 2) tablet sized site as seen on anything from an ipad to an e-reader (kindle fire) 3) phone size (optional 4) retina display device 2880px wide Each one of these sizes can have it's own layout to be considered adaptive.

      Comment


      • #4
        Thanks for the overview.

        I'm prioritizing getting my Wordpress site responsive/adaptive (it really has become a necessity); but I've began considering purchasing a new theme altogether; due to my own time restraints and the cost to hire a designer to make changes to my existing site!

        Comment


        • #5
          Why purchase? There are many free responsive wordpress themes. Many built on Bootstrap, even.

          Comment


          • #6
            Simply because I discovered a theme that fitted my purpose and thought the price was fair. I'm very particular about the presentation. Support has recently been dropped as the author removed their theme from the site. I'm also wary about "free" themes as I want to avoid those with malicious code. I do believe you get what you pay for, although, if you know of a good resource for quality themes that do not cost anything - please point me in the right direction. Thanks.

            Comment


            • #7
              The themes from the wordpress directory are tested out (from what I understand), one site right now I'm using a custom version of Customizr. It's a bootstrap theme, so all the styling that you can do with bootstrap is available. It has been quite easy to modify it using a child theme and html/css from the bootstrap framework site.

              Comment


              • #8
                Thanks for the quick reply and suggestion, Drazan. I'm really not certain I can achieve my aim of a well-functioning and adaptable gallery/portfolio, but really I only have time to lose. I'll spend my weekend experimenting on a local server and try to see what I am capable of. Cheers.

                Comment


                • #9
                  Drazan thanks for such an informative article. wow - one of the best I have read on the subject.

                  Comment


                  • #10
                    Thanks for this great overview.

                    I'm prioritizing getting my Wordpress site responsive/adaptive. The themes from the wordpress directory are tested out. Responsive templates are quite interesting, previously, we held the problem and was time consuming,through this you can write the full content and create full image after maximize the window size..its amazing.

                    Comment


                    • #11
                      Hi Kitch. thansk for the kind message, i cant see any bit relating to rules, but im guessing its just be a good sport and show loads of respect. sure thats about right. take it easy sir.

                      Comment


                      • #12
                        Thanks for this nice resources.I like bootstap

                        Comment

                        Search

                        Collapse

                        Sponsor

                        Collapse

                        Incredible Stock

                        Latest Topics

                        Collapse

                        GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                        Working...
                        X