[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 447
  • Last Modified:

create bookmarklet in safari

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?
0
nsitedesigns
Asked:
nsitedesigns
  • 4
  • 3
5 Solutions
 
EdTechyCommented:
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.
0
 
nsitedesignsAuthor Commented:
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!
0
 
Craig KehlerDirector of Quality Assurance & Community RelationsCommented:
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
EdTechyCommented:
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.
Screen-Shot-2014-03-19-at-2.05.1.png
0
 
nsitedesignsAuthor Commented:
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.
0
 
EdTechyCommented:
View>Show Bookmarks Bar
I tried it and it works with Safari 5
0
 
nsitedesignsAuthor Commented:
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.
0
 
EdTechyCommented:
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now