1. Mobile 1st Web Design - Responsive Design

    01:28

    from Joe Caprio / Added

    21 Plays / / 0 Comments

    At Mobile 1st Web Design, we don't just build websites, we build customer conversion engines that are SEO optimized and "responsive" to fit any screen size! The way both customers and search engines judge your website has changed. Is your business prepared to compete in the mobile revolution?

    + More details
    • Aptus Websites Promo

      02:04

      from Naked Lime Marketing / Added

      457 Plays / / 0 Comments

      With Aptus Websites by Naked Lime, you can customize your website to provide a unique experience to every prospect, on any device.

      + More details
      • Demo of RestBugs - using HTML Hypermedia APIs and Adaptive Web Design

        06:02

        from Gustaf Nilsson Kotte / Added

        60 Plays / / 1 Comment

        Github repo: https://github.com/gustafnk/RestBugs Original blog post: http://www.jayway.com/2012/08/01/combining-html-hypermedia-apis-and-adaptive-web-design/ Using HTML as the media type for your API: http://codeartisan.blogspot.se/2012/07/using-html-as-media-type-for-your-api.html Running demo: http://restbugs.herokuapp.com/ http://restbugs-api.herokuapp.com/

        + More details
        • An Overview Adaptive and Responsive Web Design

          02:40

          from Atlas ID / Added

          67 Plays / / 0 Comments

          An overview of adaptive/responsive website design and why it is an important consideration when developing a website.

          + More details
          • Design & Development of myfountainsquare.com

            00:00

            from us digital partners / Added

            187 Plays / / 0 Comments

            This video is about US Digital Partners designing a new brand and website for Fountain Square (www.MyFountainSquare.com), the heart of Cincinnati. We want to thank 3CDC (www.3cdc.org) for hiring us to do this great project. To learn more about US Digital Partners please visit our website @ www.usdigitalpartners.com.

            + More details
            • I.O.T.

              00:57

              from ZAAK ZURICH / Added

              478 Plays / / 0 Comments

              Schaffen Sie einen Raum oder ein Schaufenster mit Objekten, Apparaten und Licht und geben Sie jedem Besucher oder Passanten die Möglichkeit mit dem persönlichen Smartphone/Tablet auf alle Inhalte zuzugreifen. Das Internet of Things verbindet das Internet mit physischen Gegenständen. Die Anwendung besteht aus einer adaptiven Website die das Steuer-Interface bildet, ähnlich einer Fernbedienung und beliebigen Objekten, sowohl allen denkbaren strombetriebenen Apparaten. Das Internet of things bietet auch die Möglichkeit eine Installation zu Überwachen oder Sie zu steuern. Die Applikation kann von mehreren Benutzern gleichzeitig aufgerufen werden. Projektions Mapping Mit Hilfe eines Video-Projektors kann die Oberfläche von Objekten im 3-dimensionalen Raum, mit Grafiken, Texturen oder Videos verändert werden. Was ein höchst einladender Effekt erzielt. Einsatzgebiete : Schaufenster, Messen, Museum, Unterhaltungs Branche, Controlling Projekt Link: http://www.zaak.ch/iot_zaak.html

              + More details
              • Adaptive Website Design

                04:07

                from us digital partners / Added

                110 Plays / / 0 Comments

                How do you design and build a great website to also look great on tablets (e.g., iPad) and smartphones (iPhone and Android devices)? We created this video to show you how it works. Please track us down at www.usdigitalpartners.com to learn more.

                + More details
                • "Mobilize" Adaptive Web Design

                  01:44

                  from Alex Vera / Added

                  18 Plays / / 0 Comments

                  + More details
                  • Crafting Rich Experiences with Progressive Enhancement

                    30:50

                    from beyond tellerrand / Added

                    902 Plays / / 0 Comments

                    If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson answered all of these questions and provide concrete takeaways that help you to improve your web design skills. Additional material for this talk: Slides: http://slideshare.net/AaronGustafson/crafting-rich-experiences-with-progressive-enhancement-beyond-tellerrand-2011 Thanks to Frank Sippach for recording the videos at beyond tellerrand 2011. Find out about our events at http://beyondtellerrand.com and follow us on twitter @btconf (http://twitter.com/btconf)

                    + More details
                    • Responsive Web Design and Adaptive Web Design

                      12:44

                      from frederick weiss / Added

                      386 Plays / / 0 Comments

                      Responsive Web Design and Adaptive Web Design The Interweb "as we really know it" began as a small pond of ambitious servers in the 1990's. Dial-up internet access was cumbersome, it took a lifetime just to load a web page. Now in the 21st century, the Interwebs have become a vast ocean of data. We can surf the seas at the speed of fiber optic light from the comfort of our own homes, or at our favorite fishing hole via smart phone technologies. The speed and bandwidth of today is amazing, and it is only gaining momentum. We must be able to adapt to changes in browser technologies, as there are many new devices out there that must be supported. These new technologies do not just "surf" the Interwebs, they swim with the hunger of great White Whales consuming any data in their path. These new technologies can drive the "Captain Ahab" in you to grow angry and lose focus, but you must grab your harpoon and sail into the heart of the storm. Seek out new ideas, and learn new skills to keep your head above water like Ishmael to a twitter whale fail. Adapt, Respond, and Overcome "A List Apart" is one of the first places I always turn to for guidance. I found a great article by Ethan Marcotte titled "Responsive Web Design", Ethan's article really helped me get up-to-speed on the subject. Ethan explains the where and how to start using these new techniques. 1. A flexible, grid-based layout, 2. Flexible images and media, and 3. Media queries, a module from the CSS3 specification. I will touch on just a few of Ethan's points, but you need to read his book to get the full message. CSS3 Media Queries Media Types are something that most of us are already comfortable with. We use Media Types all the time to call Screen and Print style sheets. CSS3 Media Queries are a little different, these are used to call conditions of media features. We can call things like "orientation", "device-aspect-ratio", "min-device-width", and many others to accomplish our goals. CSS3 Media Queries give us a lot of freedom to style for present and future devices as web browsers change with time. We see that "max-device-width" is being used a lot to define devices and state styles for their sizes. This is an easy way to define a device's browser dimensions and then style appropriately. iPad, iPhone, and even their orientations are stated and styled via the CSS3 Media Queries. Responsive Web Design Let's go back to Ethan Marcotte's article and look at his example page. Try resizing his example page and you will see the design changes automatically to best fit the browser window. Some of Ethan's code is sized by percentages; the formula for calculating your desired percentage DIV size is simple. If you start your design at a base of 960px, then 960px will be 100% of the width. Say you want the base width of your footer DIV to be 633px, well you divide 633px by 960px giving you a width of 0.659375. Just take the decimal point and move it two spaces to get your percentage, so the width of 0.659375 is really 65.9375%. Let's now look at the CSS3 Media Queries in his example. He has a max-width: 600px, 400px, and a min-width: 1300px. The max-width property sets the maximum width of the elements, min-width property sets the minimum width of the elements. We can see that once we fall below 600px, the columns stop floating and become one column to better accommodate smaller screen sizes. Ethan is also using max and min-widths to state different sizes for other DIVs, then controlling those sizes by percentages as the user sizes the browser. The percentage technique is not just for users who resize their browser, but more importantly, to respond to different browser sizes in different devices. So Ethan's example is adapting to set browser sizes of 1300px, 600px, and 400px. Ethan's example is also responding to any changes in those browser sizes via percentages, thus making his example future-proof up to 1300px. Mobile Web Design A good combination of Adaptive and Responsive web design makes a healthy website. Device browser sizes can and will change over time; therefore, using percentages frees us from declaring a new CSS3 Media Query every time a new priority browser size is declared. The genesis of these new concepts may have been Mobile Web Design; the iPhone was really the beginning of easy mobile web browsing. From this point on who knows what's next, but we will be ready thanks to Responsive Web Design techniques.

                      + More details

                      What are Tags?

                      Tags

                      Tags are keywords that describe videos. For example, a video of your Hawaiian vacation might be tagged with "Hawaii," "beach," "surfing," and "sunburn."