모바일웹을 직접 기기에서 일일이 모두 테스트하기란 생각보다 쉽지 않다


우선 모든 기기를 구할수 없다는게 가장 큰 이유 이기도 하다.


과거 포스팅에서 관련 내용으로 몇번 소개했던 프로그램으로도 가능하지만 최근에 사용하는 두가지 방법을 소개하고자 한다.


> 다음 트로이 ( Troy ) - 모바일웹의 사이즈만 테스트 한다면 추천

- 단순히 모바일 기기의 사이즈만 규격화 한 테스트만 가능하다.

- 하지만 여러기기 에대한 정리가 잘되어있고, 멀티스크린 모드로 (모니터만 크다면) 많은 기기를 동시에 볼수있다.

- 제법 국내 지원 기기들을 지원(사이즈만..)한다.

- 물론 트로이는 반응형 웹 테스터 이다  그리고 약 2년전에 다음 labs 에서 제공한 서비스 이다.



1. 우선 트로이 접속 ( http://troy.labs.daum.net )


- 접속하면 아래와 같은 화면을 볼수있다. 여기서 위에 주소란에 원하는 사이트 주소를 입력하고 좌측에 디바이스를 선택만 하면 

바로 우측공간에서 확인이 가능하다.

- 이때 좌측 상단에 멀티스크린모드 스위치를 켜주면 여러 디바이스를 동시에 확인해 볼수 있다.

직접 user_agent 를 적용하거나 수정 할수 있는 기능은 없어 내 블로그 주소를 넣었지만 모바일 페이지로 보여지지는 않고 있다;;




2. 상세 기능 사용법


- 1. 회전 을 클릭하면 기기가 가로 형태로 변경되는것을 볼수있다.

- 2. 주소창보이기 는 클릭시 실제 기기내 브라우져의 주소창을 재연하여 반응형 구현 내용을 디테일하게 확인해 볼 수 있다.



총평 : 반응형 사이트를 운영중이라면 여러 기기에서 동시에 테스트를 진행해 볼수 있는점은 장점 이라 하겠다.



> 크롬 카나리 ( Chrome Canary ) - 추천


- 크롬은 크롬이지만 '강심장에게만 권장', '야간업데이트', '병렬 설치' 등의 카피로 소개 하고 있는 크롬의 카나리 이다.

- 사용중인 크롬 정식 버전과 '병렬 설치' 가능하다 ( 같이 쓸수있다는 말을 참 어렵게 표현한  구글..

-  위에서 소개한 다음 트로이와 는 달리 user_agent 를 직접 반영한 테스트가 가능하며, 통신망 을 선택하여 실제 기기에서의 모바일웹페이지의 상태를 제법 유사하게 테스트 해볼수 있다.

- 트로이에 비해 기기 종류는 다양하진 않지만~! user_agent 수정과 디바이스 사이즈를 직접 조정 할수 있어 테스트 하려는 기기의 스팩만 안다면 얼마든지 테스트 해볼수 있다.


1. 우선 크롬 카나리 다운로드 페이지 에서 프로그램을 다운로드 하여 설치 한다 (설치 과정은 생략)

: https://www.google.co.kr/chrome/browser/canary.html



2. 사용방법

- 우선 설치후 카나리를 실행하면 일반 크롬의 영문버전으로 밖에 보이지 않는다.

F12 를 눌러 개발자 도구를 열고 아래 그림에 왼쪽 맨하단에 파란색 스마튼폰 모양을 클릭하면 아래와 같은 UI 를 볼수있다.

- UI가 단순 하여 대충 봐도 다 아시리리 생각된다.




3. 상세 기능 사용법

- 우선 Device 옆 셀렉트박스를 클릭해보면 여러 디바이스가 정의 되어있다. 원하는 기기를 선택하면

- 내용은 해당기기의 사이즈로 설정되고 UA 에는 해당기기의 일반적인 user_agent 가 자동으로 작성되고, 실제 기기의 접속 화면과 같은 모습을 볼수있다. ( 즉, user_agent 로 구분하여 사이트를 보여주는 경우에도 실제 구동 화면을 확인할수 있다.)

- Portait : 카나리 역시 가로형 변형 모드가 존재한다.




- Network 는 예상하는것처럼 실제 통신사 에서 제공할법한 속도를 제현 하여 테스트 해볼수 있다 ( 3G, 4G, wifi 등)

그외에 하단에 Screen 에서는 원하는 사이즈를, UA 에서는 원하는 실제 user_agent 를 설정하여 테스트 해볼수 있다.

- 그외에 아래 기기 모양에서도 가로 세로르 직접 수정 할수도 있다.


- 조금더 디테일한 기기 테스트도 가능하다. 스크린샷에서는 안나왔지만 하단부를 좀더 열어보면 아래와 같은 화면을 볼수있다.

- 특히 Emulation > Sensors 에서는 터치스크린, GPS 는 물론 스마트폰 기울기 까지 테스트가 가능하다 !

- Rendering 에서도 Show paint rectangles , Show composited layer borders , Show FPS meter , Enable continuous page  repainting , Show potential scroll bottlenecks 등의 내용을 적용할수 있다.



총평 : 크롬 카나리 에서는 제법 실제 기기와 비슷한 많은 테스트가 가능하다! 적극 추천!


끝~


이전에 소개한적이 있었던 반응형 모바일 청첩장 달팽에서 이번엔 돌잔치 초대장을 오픈했다~


뭐 살펴보니 기존의 반응형 청첩장의 기능을 그대로 이용가능하고~


아기 프로필 추가기능 (쌍둥이, 다둥이 도 되는) 무한대 추가.....


뭐 여하튼 현재 돌잔치 카테고리 오픈 이벤트로 스킨은 총 4종을 무료로 이용 할수 있고~ 달팽 자체 이벤트로 한달 이용 가능~!


즉 무료로 한달은 돌잔치 모든 스킨 사용을 이용 할 수 있다는 소리!


단, 몇몇 디테일한 기능은 유료화 되어있다~


상단 이미지 정렬, 텍스트 색상/정렬, 네이버 지도 등등 의 기능은 유료 결재 ( 19,800 ) 를 통해 이용이 가능하다.




달팽 돌잔치 알림 메일
달팽 돌잔치 알림 메일
달팽 돌잔치 알림 메일
달팽 가격
달팽 주요 기능
달팽 신청 바로가기

기존에 블로그에서 추천 하던 달팽에서 특이한 스킨이 추가되었다.


무료 모바일 청첩장을 표방하고 있는데 아직까지는 이벤트로 무료를 유지하고 있다~!


청첩장 바닥에서 흔히 볼수 없었던 크리스마스 시즌 스킨;;;


독특하다!


크리스마스 웨딩~!


12월 결혼 하는 분들 한번 도전해보심이~ 어떨런지


다른데서라면 3~7만원 까지 하는 모바일 청첩장


디자인도 떨어지지 않는!


언제 오픈이벤트가 끝날지 모르니 늦기전에 어서가서 신청하시길~~


네이버에서 ' 달팽 모바일 청첩장 ' 으로 검색하면 찾을수 있다~ [네이버 검색 바로가기]




몇일전 포스팅 으로 소개를 했던 달팽 모바일 청첩장을 실제로 사용해 보았다.


현재 오픈 이벤트로 개인의 경우 한개의 청첩장이 무료 생성이 가능하다 (동시에 결혼을 두번할일이 없으니 ;; 한개면 충분!!)


만들었던 도메인을 바꾸려고 삭제했다가 새로 생성하니 과금이 되서 고객센터 문의해서 기존주소를 복구했다;; (주의)


달팽 바로가기 : http://dalpeng.com


1. 우선 회원가입~! (단순한 내용의 내용 입력후 메일 인증만 받으면 가입 끝)


- 가입후 상단에 신청하기를 클릭해서 신청을 진행한다 ( 현재 오픈이벤트로 완전 무료 )



2. 로그인후 메인 화면 에서 우측 상단 초대장 관리를 클릭 하면 생성했던 청첩장 이 나오고 '관리' 버튼을 클릭





3. 여기가 청첩장 내용을 입력 관리하는 빌더 화면이다. 중간에 보이는 탭메뉴를 클릭하면 각각의 내용을 수정/설정 할수 있다.

(여기서 왼쪽의 휴대폰 화면 미리보기 화면에 우측에 입력내용 클릭해서 보고있는 내용부분이 실시간으로 반영되어 보여진다!)







신랑 신부 사진을 각각 올리라고 되어있는데 이건 왜그런가 했더니 특정 스킨 좌우측에 신랑 신부의 연락처 등의 공간이 있는데 그부분에 나오는 사진이였다.

사진 업로드후 좌측 공간에서 스크롤 / 드래그로 사진을 크롭 할수있었다 (페이스북 사진 크롭 UI 와 동일한)




방명록은 다른 곳과는 다르게 2종의 자체 제작 이모티콘을 제공하고있다. ㅎㅎ 나름 귀엽고 재미있는 이모티콘이 많아 쓸만해 보임






갤러리는 여러사진을 동시에 올릴수도 있고~ 순서 변경도 드래그로 쉽게 가능했다







기본적인 SNS 공유기능~ 사진 첨부 가능한 카카오톡, 라인 공유 기능  까지~




모든 입력 후 우측 하단의 초대장 수정하기를 클릭하면 완료~



개인정보 보호상 내용중 일부는 포토샾으로 지웠다. (큐알코드까지 지우는 치밀함 ㅋㅋ)


달팽 자체내에 문자 보내기 를 이용하면 생성된 주소를 이미지와 함께 MMS 를 보낼수도 있었다.


재미있던건 자신의 주소뒤에 .qr 를 입력하면 바로 큐알코드 주소를 사용 할수있었다.


태그를 조금 안다면 <img src="http://dalpeng.com/주소.qr" /> 의 태그로 자신의 블로그에도 직접 큐알코드를 쉽게 넣을수도 있다.






달팽 바로가기 : http://dalpeng.com




무료 반응형 모바일 청첩장 서비스 달팽 오픈



반응형이란?


쉽게 얘기해서 하나의 사이트가 데스크탑  모니터 사이즈 상관없이, 태블릿 pc 화면, 모바일 화면 에서 모두 알맞게 구성된 화면으로 제공되는 형태를 의미한다.


반응형이고, 스마트폰 네비게이션 연결되는기능에, 이모티콘 쓰는 방명록 까지 무료로 사용이 가능하다~


결혼 준비 하시는분들께 도움이 될듯 합니다.


사이트 주소 : 달팽 (http://dalpeng.com)



아래는 달팽측 서비스 소개 


---------------------------------------------------------------



주요기능

Invitation card 세상에 없던 초대장

PC, 테블릿, 모바일에 모두 반응하는 초대장, 
보내기만 하고 끝이였던 초대장이 아니라 
이제는 친구들 지인들과의 커뮤니케이션이 가능한 초대장, 
예식이 끝나도 갤러리 앨범, 방명록에서 소식을 전하는 초대장

01

PC, 모바일, 태블릿 
어떤 화면이든 
자유자재로 알맞게

제이쿼리 모바일을 이용한 반응형 스킨으로 
어떠한 기기에서든 자유자재로 알맞게 형태가 맞춰집니다.

02

보내기만 하고 끝이었던 
초대장이 아니라
친구들 지인들과의 
커뮤니케이션이 가능

SNS를 통해 나의 웨딩앨범과 방명록에 친구들이 글을 남기고 
내가 그 글에 답글을 남기고 그 글은 sns로 공유가 되며 
자연스레 커뮤니티가 형성되어 초대장 이상의 가치를 얻게 됩니다.

03

초대장에서 
버튼만 누르면
네비로 바로 연결

초대장과 네비게이션 앱 연동으로
초대장의 네비 버튼만 누르면 예식장으로
바로 길찾기 안내가 시작됩니다.

04

문자나 카카오톡에서
이미지 전송으로
스미싱 걱정없이!

이미지를 함께 전송함으로써
최근 많은 사람들이 꺼려하는 모바일 초대장 스미싱
오해에서 벗어날 수 있습니다.

05

웨딩사진을
더욱 즐겁게 볼 수 있는
사진 댓글 기능

나의 웨딩앨범에 올린 사진에도 여러 사람이 댓글을 달 수 있어 
더욱 즐겁게 청첩장을 보실 수 있습니다.

06

다양한 이모티콘으로
커뮤니케이션을
더욱 풍성하게

달팽이에서 특별 제작한 이모티콘으로 
초대장의 커뮤니케이션을 더욱 풍성하게 나눌 수 있습니다.


On the Internet today, there’s a “need for speed.”

Customer behavior is one thing; online behavior for every customer is totally something else. The speed at which a website loads is the moment of truth. Unless the website loads properly and quickly enough, the customer is long gone (unlike traditional business outlets where customers tend to be slightly more patient with lags and delays). The web is a medium that demands precision, focus, and multiple elements working together to get it all in sync with the primary purpose of the website.

Thanks to the rise of the mobile web, we now have responsive websites. Surprisingly, even responsive designs don’t necessary load quick. On one hand, there are many websites that are not responsive yet. For those websites that have gone the extra mile with a mobile website or a responsive design, the websites still don’t load quickly. While responsive design will demand a series of courses, books, and reams of information by itself, our focus here is to find out how to speed up responsive websites. Here’s how you can speed up responsive websites:

Determine Primary Use and Deploy Responsive Design

Responsive

The ultimate struggle between designers and marketers is this: designers focus on the design and marketers want the website to help convert. Often, these goals belong to two different sets of professionals. As a result, websites suffer.

The first rule in website design is to make sure that the website is developed by designers to fulfill a marketing need. While designers can play with their tools, techniques, and inputs, the goal should align with that of the marketers (or business owners): to generate leads and convert customers.

If you are designing responsive landing pages, the goal of the page is to get visitors to convert. If it’s a magazine or an online publication, then the responsive version of the magazine should load quickly without the graphics and images (at least not all of them).

If you are working with marketers or business owners, bring them on board. Collaborate with others and make sure everyone is on the same page while designing web pages.

Go for Mobile-First Design

Mobile first design calls for simplicity and focus. It’s a method of design that streamlines your work and helps you design websites exclusively for mobiles. The idea is to create websites that’d have content suitable for display on mobile phones taking mobile phone real estate into account. According to Frank Kurland of McKnight Kurland, mobile reaches about 87% of the world’s population. That’s why, mobile first design is a mandate and not optional. Vincent Jordan talks about mobile first and insists on building responsive or mobile websites for experience first and responsive design next in terms of priority.

Responsive Design is All about Simplicity

Simplicity

Strip. Strip. Strip. Anything that takes time to load has to go out of the window. While desktop versions of websites can have a lot more design elements than the responsive versions, it’s important to identify what exactly should show up on a responsive website. Responsive design doesn’t have to be identical design (identical to the desktop version, that is). A large part of “responsive” has to do with “adaptation” depending on the device customers are using to access websites. What goes well on a desktop version might also go well (with adaptation) on tablets but will not work on smart phones at all.

Compress

Performance of webpages depends on the elements that have to load when the website is called for. Page size, images, text, and many other elements perform best on responsive design when they are minimal in quantity and are compressed well. In responsive design, you’d only send out what’s really needed to the target device. Compress CSS and JavaScript in general using tools such as Compass. If JavaScript needs compression, you may also use tools such asUglifyJS. As text or fonts can cause display issues too, use FitText to auto-update font size and configure display options with maximum and minimum size options.

Note: FitText cannot be used for entire paragraphs. It’s best used for headlines.

Minimize Loading Time

fast-bullet-wallpapers_27781_1280x800 

Johan Johansson of Smashing Magazine wrote a helpful post on how to make your websites faster on mobile devices. He also quotes research findings on how more than 80% of people are disappointed with the experience of browsing the web on their mobile phones. At least 64% of smartphone users expect websites to load in less than 4 seconds. That’s your window of opportunity. Perhaps you might want to take it as your goal or benchmark to achieve faster loading responsive websites.

Reduce Dependencies

You can achieve faster loading times by reducing dependencies by loading images through CSS, keeping external style sheets to a minimum, use CSS3 instead of images, use image sprites, font icons, avoiding inline frames, and use inline scalable vector graphics (SVG). Linda Bustos of Get Elastic also suggests eliminating redirects to m-dot sites, using fast and reliable CDN (Content Delivery Networks).

She also suggests using responsive images and to reduce client-side processes to a minimum by reducing use of JavaScript, avoiding widgets, and using specific server side techniques such as RESS.

Test, Test, Test

Test

Just as testing is a necessary element for marketing optimization; design also needs testing as a part of your workflow. If you have a design already, put it to test. If you are about to create design from scratch, prepare to test it out on various parameters such as browser tests, OS tests, device tests, speed, utility, links, navigation, aesthetics, and even conversions. Use tools such as Optimizely or MobiTest.

Testing gives you real-time feedback using which you can make your responsive websites worthy enough for your clients to benefit from.

Today’s demand is to reach customers no matter what kind of computing device they might use. Design across browsers, device types, and make sure that websites can be access irrespective of connection speeds.

It’s challenging, but it’s rewarding.

Abhishek Agarwal is Director of Business Development at Rightway Solution, a premiummobile app development company. Abhishek is also an expert on ecommerce website design. Feel free to have a chat with him on Google+.

from : http://spyrestudios.com/7-tips-to-speed-up-responsive-websites/

+ Recent posts

티스토리 툴바