• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • 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 Customer Service & 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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