create bookmarklet in safari

Posted on 2014-03-19
Medium Priority
Last Modified: 2014-03-24
It was suggested I create a bookmarklet for this site, http://lab.maltewassermann.com/viewport-resizer/

The goal is for this to be a tool I can click on in safari while working on beta responsive sites to quickly see how they respond.  However, I can't figure out how to do this.  I can save it as a bookmark (not bookmarklet) but that doesn't do me any good because when I go to another website, I lose this bookmark.  Hence, the need for a bookmarklet.  Any ideas?
Question by:nsitedesigns
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 10

Assisted Solution

EdTechy earned 1600 total points
ID: 39940182
Follow your link to the site. You will see a blue box that says "Click or Bookmark" Make sure your Favorites Bar is showing - View>Show Favorites Bar. Click on the box and drag to your Favorites bar.

Author Comment

ID: 39940343
i have safari.  They don't have favorites.  I did save as a bookmark but again, when i visit another site, i can't go back to this test tool site to view  how it looks on various devices because I left that site!

Assisted Solution

by:Craig Kehler
Craig Kehler earned 400 total points
ID: 39940419
A bookmarklet contains some javascript that could measure your page load time, so you would have to generate that javascript or use one that someone has already created. However I highly recommend using something like the network tab in Google Chrome to see a waterfall graph of what requests are taking a long time. To do so, open the URL you are interested in, hit F12 (Windows/Linux) or command+option+I (Mac) and select the network tab, then fully reload the page (Control+Shift+R or Command+Shift+R). This will show you what the page load looks like for a first time visitor. If you want to test how well you are caching, then just refresh the page without the control refresh, 304 responses are cached.

If you want to dig deeper or get suggestions on optimizations install Google's Page Speed extension.

Also bear in mind if you are on the local network that is hosting the site, you will see much faster times than someone accessing the same site from the web depending on their connection speed etc. So if you have a large un-optimized image, it might load fast locally but very slow for a user with a slower connection. In that waterfall graph you can see the size of the content and PageSpeed will identify un-optimized images.
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

LVL 10

Assisted Solution

EdTechy earned 1600 total points
ID: 39940506
What version of Safari are you running? In both 6 and 7 there is a Favorites bar. It is the bar at the top of the page to put most used bookmarks. Chrome and FF call it the Bookmarks Bar.
Drag the blue box (see attached) to the bar? Bookmarking the page will not work(as you know).
Now when you go to a page, you can click on the toolbar icon and it will run the Javascript.

Author Comment

ID: 39940670
i am running safari 5.5.1.  I don't think I  download newer versions because  I have a mac osx  10.6.8.  So, that is probably why I am having problems.  When I check for software updates, Safari doesn't pop up.
LVL 10

Assisted Solution

EdTechy earned 1600 total points
ID: 39940755
View>Show Bookmarks Bar
I tried it and it works with Safari 5

Author Comment

ID: 39940761
Yes, I can see the bookmarks.  That is not the problem.  I need to create a bookmarkLET which is different from a bookmark  At least, that is what my research has told me.
LVL 10

Accepted Solution

EdTechy earned 1600 total points
ID: 39940809
Go to the site you listed in your original post, drag the Blue box (this is the the bookmarklet on this site, it is already created) to the bookmark bar. You will then have an icon called Resizer on the bookmark bar. That is your Bookmarklet. When you go to a different page and then click on the Bookmarklet, it brings up a toolbar at the top of the page that gives you options such as changing the size of the page to see what the page looks like on a different size device.
It appears to be a bookmark but it acts differently.
From what I understand, this is what you want.

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question