SkelJS — Build responsive sites and apps

Proty — Responsive, interactive wireframes

부가서비스, 확장프로그램

Chrome to Phone  : https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco?hl=ko

설명

Google Chrome to Phone 확장 프로그램을 사용하면 링크 및 기타 정보를 크롬에서 개인 Android 기기로 전송할 수 있습니다.

이 확장 프로그램을 설치하면 링크, 지도, 현재 선택한 텍스트와 전화번호를 내 Android 기기로 손쉽게 전송할 수 있는 버튼이 Google 크롬에 추가됩니다. 링크나 웹페이지
의 선택 영역을 마우스 오른쪽 버튼으로 클릭하여 내 Android 기기로 보낼 수도 있습>니다.

이 기능을 사용하려면 휴대전화에도 'Chrome to Phone' Android 애플리케이션을 설치>해야 합니다. 애플리케이션은 마켓에서 다운로드할 수 있으며('Chrome to Phone' 검색
), Android 2.2('Froyo') 이상이 탑재된 휴대전화에서 사용하실 수 있습니다.

참고: 이 확장 프로그램을 설치하면 다음 약관에 동의하는 것으로 간주됩니다. - http://chrome.google.com/extensions/intl/en/gallery_tos.html 해당 제품의 소스 코드는
 개발자 웹사이트에서 Apache 2.0 라이센스를 부여받아 사용하실 수 있습니다.

Chrome 웹 스토어 : https://chrome.google.com/webstore/category/apps?hl=ko

responsive 도구 :  Dimensions

Json 데이터 검증 : JSON Formatter

                     Javascript Tools

소스 공유 :           GitHub

Dimensions

설명

Easily test responsive websites, even offline.

Dimensions is a responsive web design testing tool. It is the easiest way to test responsive websites at different viewports. It works offline & is compatible with LiveReload.

Features:

* Draggable handle to find breakpoints
* Works with local or remote servers
* Preview Mode shows your site in various types of devices
* Works with JS auto-refreshers including LiveReload

More devices will be coming soon! Head over to http://dimensionsapp.com and add feedback on which devices you would like to see.

Responsive web design testing tool

이전다음

012

Pure — Small, responsive CSS modules for every project

Homepage: http://purecss.io/
GitHub: https://github.com/yui/pure/

Pure는 설치가 간단한, 반응형 CSS 모듈이다.

Pure is a set of small, responsive CSS modules that can be used in all of your web projects.

 There are modules for everything from grids to forms to menus and much more,

all with a minimal footprint (ranging from .6KB for the tables module to 1.4KB for the forms module).

Free PSD Responsive Web Templates

 

 

What is Responsive Web Design (RWD)? Responsive Web Design is the answer to the easy accessibility which is both efficient and profitable. In cases where a site cannot be viewed on laptop and desktop systems or on tablets and Smartphone, all of which happen to come in wide range of screen sizes and resolutions, that it almost comes to the same as to it not being viewed at all. When it comes to dealing about this issue of accessibility, which is against the whole idea of having the presence of the internet and giving rise to various issues, it becomes imperative that we come up with effective solutions.

Responsive website development is easier then ever. Responsive Web Design is making the web design more powerful in different areas. Fast, Secure, Responsive, Interactive and beautiful. Responsive Web Design have many features that allow developers and designers to create apps and websites with the functionality, speed, performance, and experience of desktop applications.

As we know Responsive Web Designing are more popular day by day and designers are looking for Responsive Web Templates for their web project. So here we are put to gathered a fresh collection of Free Responsive Web Templates with PSD Files which can use for both personal and commercial projects.

You may be interested in the following modern trends related articles as well.

• 15 Fresh FreeFonts For Your Designs
• High Quallity Free Flat UI Kits For Designers
• Fresh News & Magazine Responsive WordPress Themes
• 25 Outstanding Examples Of Branding, Visual Identity and Logo Designs

Please feel free to join us & follow on Facebook, Twitter and Google+ for updates.

Subscribe to our RSS via email, simply enter your email address & click subscribe.

Subscribe

Free Responsive Web Templates with PSD

Today we’re gathered a list of Free PSD Templates for Responsive Web Design. Let’s take a quick look at some amazing new trend web templates to keep in mind when designing your next web project.

Prechu – Responsive PSD Template free

Prechu is a beautiful responsive website template, the download version included two designs version for desktop and mobile. The design is well crafted moden stylish template, you can use it for almost any purposes.

Source

Responsive HTML5/CSS3 Website Template

Free responsive HTML5/CSS3 template. This template is a good example of Responsive Web Design. You can use it absolutely free of charge.

Source

Parallelism Responsive Html5 Theme

Source

Zeni Responsive HTML 5 Portfolio Template

Zeni works great for creative’s portfolio, blog and corporative and business sites. We’re working on a WordPress version, stay tuned!

Source

FlexApp – Responsive Website Template For Your Mobile App

FlexApp is a free, fully responsive website template for marketing your mobile application. The design uses CSS3 to scale the content proportionally to whatever device is being used. Give it a try by resizing your browser!

Source

Liguid Gem – A fully responsive HTML portfolio template

Liquid Gem utilises CSS media queries and percentage layouts to give a completely responsive design. It also includes an image carousel, a fully working PHP contact form and a sample work page.

Source

Serendipity – Free Responsive HTML Template

Serendipity comeup with the HTML version of our fully responsive premium WordPress theme. (Free for only personal use.) If you are not feeling good about HTML and would like to have the theme with an admin panel along with gallery featuring Tumblr-like lightbox, working contact form and font/color/background options, WordPress version of Serendipity is what you are looking for.

Source

Proximet – Free responsive website template

Proximet is a free HTML5 /CSS3 Responsive Template. It is compatible with Major Browsers, Smartphones and Tablets. Just resize the browser window to see it in action! It is based on 960 grid and elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). And it is responsive. Designed by Ana.

Source

Folder – Responsive Showcase Perfect for Creatives and Designers

Folder is a responsive HTML 5 template that adapts to any devices and browser sizes. Perfect for creatives showcase and business. Its retro and minimal design gives importance to the content and gives a friendly air to the visitors.

Source

Legend – Free Responsive Bootstrap Template

Legend is multi-purpose responsive one page template built on Twitter Bootstrap. You can use this template as a landing page, online portfolio for creative folks or even as a business theme.

Source

Codester – Free Responsive Bootstrap Template

Codester is an awesome responsive Bootstrap template released for free. It is basically a portfolio template for creative people like designers, photographers, graphics artists and more. But with some basic customization you can actually transform this template into your desired website. Codester comes with complete customizable package including latest JavaScript, Scaffolding, Base CSS and Components.

Source

Verti – Responsive Html5 Theme

This is Verti, a free and fully responsive HTML5 site template by HTML5 Up! It’s built on 5grid, which means it’s easy to customize and works very nicely on mobile devices (try it for yourself — size the window down and hit reload). Like everything else at HTML5 Up!, Verti is released under the Creative Commons Attribution license, so feel free to use it for pretty much anything you want (be it a personal project or a commercial venture), just don’t forget to credit us!

Source

Brownie – Free Responsive HTML5 Portfolio / Business Website Template

Created by using the latest HTML5 and CSS3 techniques, Brownie is a simple and clean Free Responsive HTML5 portfolio and business website template.

Source

It Fits – Free HTML5 CSS3 Responsive Template

Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features. Even icons are fonts – hmm super fast page loading.

Source

Dopetrope – Responsive Html5 Theme

Dopetrope a free, fully responsive HTML5 site template by AJ for HTML5 Up! It’s released for free under the CCA license so feel free to use it for any personal or commercial project

Source

Madison – Responsive Html5 Theme

Source

least.js

Random & Responsive HTML 5, CSS3 Gallery with LazyLoad

http://kamilczujowski.github.io/least/

Least.js creates random and responsive HTML5 and CSS3 image galleries that include Lazyload. Installation and usage is simple, and the end result is quite beautiful.

adaptive - 적응

responsive - 반응

interactive - 대화형

RESPONSIVE WEB DESIGN (RWD)

ADAPTIVE WEB DESIGN (AWD)

http://www.junowebdesign.com/responsive-vs-adaptive-web-design/

반응형 보다는 적응형이 좋다는 얘기.

반응형은 모든걸 다 load해야 하는 반면, 적응형은 Device에 따라서 보여줄것만 load 하기 때문에 로딩속도나 사용자 경험 측면에서 더 낳다.

In case you haven’t noticed, mobile web design has arrived. With mobile traffic now accounting for around 12.5% (and rising) of all website visitors it’s high time you started putting effective mobile design at the top of your to-do list, because if you fail to do so you’ll be missing out on a huge sector of the market. And we mean huge. According to recent statistics 9 out of 10 mobile searches result in some action and over half the time that action is a purchase—mobile users are falling over themselves to buy something from you, so if you want to get those sales you need to make sure you’re giving visitors what they want.

And what they want is a site that works on their chosen device. Sounds simple enough but it’s surprising how many companies get it wrong—they don’t have an effective strategy in place and instead expect customers to use the desktop layout on their mobile, and that will easily send them elsewhere—so it’s time you considered the options and embraced the brand new world of mobile design. In that world there are two main options to choose from, responsive web design and adaptive, and here’s a quick run-through of each:

RESPONSIVE WEB DESIGN (RWD)

In this method you’re running the website from one content management system but it simply adapts and readjusts according to the dimensions of the device it’s being viewed on. The content stays the same but the layout changes—it might be in 3 columns on a desktop and 1 on a smartphone, for example—with it automatically adjusting and wrapping around columns to suit the screen. This method is quick and easy to implement but there are a few drawbacks, namely that the user doesn’t get a fully-optimised experience—searchers behave differently when using mobile devices and regular websites will take far too long to load on a smaller screen, damaging the overall experience. That’s where adaptive web design comes in.

ADAPTIVE WEB DESIGN (AWD)

This offers all the benefits of responsive design without the drawbacks, and this relatively new concept is rapidly gaining popularity. In this form of design not only does the content adapt to the size of the screen but it takes into account the capabilities of the device as well, offering a much better user experience as the whole design will be based on context. Certain elements will change depending on whether the user’s got a touch screen or a traditional mouse and keyboard arrangement and different layouts will be offered for tablets and mobiles, and images and videos can be edited or even completely removed to speed up the loading times of a page.

Adaptive web design enhances the user experience in a way that RWD can’t match to offer total usability and a more customer-focused result, but of course, the method that’s right for you will depend on your business, your budget and the type of content you provide. Either one of them could be perfect for your needs, so as long as you choose one you can be confident you’re hitting the mobile web design mark to give customers what they’re looking for.

http://www.bosweb.com.au/bosweb-blog/responsive-website-design-the-new-black

Responsive Web Design is the latest buzzword in the web design & development community, but what is it exactly?

To put it simply, Responsive Web Design is an approach used when developing a website that ensures it scales onto any device that is used to view it and responds to the users behaviour.

The central idea of Responsive Web Design is that a website can use the same HTML/CSS/Javascript to serve a number of different devices with varying screen sizes/resolutions and automatically adjust to fit correctly. For example if you've ever browsed the web on a mobile device or tablet you will have noticed that when viewing some websites they appear tiny and you have to zoom in to read the content. Responsive Web Design aims to conquer this by ultimately using the available space and scaling content to fit.

How is this achieved?

Responsive Web Design uses a number of techniques to adjust and adapt to the screen size/resolution of the devices that are being used:

• CSS Media Queries: Media Queries allow multiple layouts to be built within the same HTML document by selectively serving CSS Styles/Stylesheets based on the features of the device that is being used to view it. These features may include window/screen size, orientation and available colour output range. Basically it allows a layout to be specifically tailored to a range of devices without having to modify the HTML content behind it.

• Flexible Layouts: When developing the HTML for a Responsive site Flexible Layouts are normally used to structure the elements of a page into modular components. This separation allows for independent scaling and movement of the components and the content within them. Using CSS Media Queries the layout of these components can be adjusted to fit the screen size of the device being used to view a website. Commonly on Desktop browsers page components are positioned into multiple columns sitting next to each other, whereas Tablet and Mobile device layouts would adjust the page components to stack on top of each other.

• Responsive Images: Responsive Images are used in conjunction with CSS Media Queries and a Fluid Grid Layout, they scale and move automatically according to the layout that a device is using. This allows one version of an image to be used in multiple layouts, no extra loading is required. These are most commonly controlled through the "max-width : 100%" CSS rule.

Benefits of Responsive Web Design

• Responsive Web Design negates the need for separate device templates and content duplication, one set of HTML/CSS/Javascript can be used to serve multiple layouts to devices and switch accordingly.

• A website is not locked down to a specific screen resolution, rather it shifts and adapts to the screen that it is being viewed at.

• No messy redirects are needed to switch between desktop and device layouts.

• Improved SEO; your desktop/device content is served from the same URL.

• Enhanced User Experience as the layout of a website has been tailored to suit the viewer.

Leveraging Device Features

The User Experience of a website can also be improved by utilising the native features of the users device in conjunction with Responsive Web Design. These features differ per device, the most common are listed below:

• Phone: Utilising the phone feature of a device allows a user to dial a specified number straight from a website's content, no application switching necessary.

• Email: Similarly to the phone feature, the email feature of a device allows a user to click a specified email address in content of a website, this will normally then open the email client of the device to send a new email to the specified email address.

• Map: If you want to point a user to an address within a website the map feature can be used, this allows a link to be inserted into the website content and when it is clicked the devices default mapping program will open and show the provided address.

• Location: The location function allows a device's browser to detect and find the geographic location of a user. This is particularly useful in providing proximity based searches.

Useful Links

• Responsive Web Design Interactive Guide
• Media Queries - A collection of responsive websites.