Major haul-over of the webpage layout

I have spent my free time the last week or two playing around with responsive CSS design for this web page, and changing the way the – now very old – page functions. I wanted it to work for smaller (in particular mobile) screens in a simple and comprehensive way, that wouldn’t mean that I’d have to rewrite every single page on the site.

I stumbled on the Pure CSS library while looking up solutions to some of the design-changes I wanted to make, and decided to go with it. My old layout was using tables for everything – a little piece of the past already when I started with the site – and it has annoyed me for years. Now everything is in CSS, and works in simple responsive ways to different window sizes. A comparison of the old and the new page layouts for the front page of the site:

There have been a bunch of changes to the site, but I will try to list some of the more important ones:

  • I used to have a search field at the bottom of each page, which showed the search results inside the page by simply extending the height of the page with the results. This has now been changed to a smaller search field in the top menu (for big screen sizes – more on that in a moment), that leads to a landing page with google results as a pop-up.
  • All icons have been changed from small png files to actual vector graphics, through various CSS defined fonts. The website Fontello, where you can create your own font package to use for just this, was an enormous help.
  • I’ve added standard social sharing buttons, that changes content of the actual buttons depending on the user that see the page. These are buttons created and served by AddThis – most people probably recognize their “plus” icon. These buttons automatically hide for smaller screen sizes, to not be in the way.

The new responsive menu is part of the Pure CSS library as well. I’ve had a lot of fun making it respond to different screen sizes, such that a small phone screen would still be able to see all the top-menu points, while more information can be shown on bigger screens. The three different behaviors of the menu can be seen below:

Different sizes of the menu

The new menu, which changes depending on the size of the window

When the screen gets smaller, first the description text disappears from the icons. Then, the social network links, translation links and search bar disappear, the latter two merging into the top menu as new icons.

Finally, I made sure that the sub-menu (and the top-menu, if a screen can even get that small) are scrollable in a flickable way on mobile devices, as well as on PC’s that have the capability of scrolling sideways. I am still trying to figure out a way of overlaying a little arrow in the sides of the sub-menu when this option is in action, but so far I have not found a solution.

Share this:
Posted by PJR in Website, 0 comments

Way too few updates

It feels like I’ve been updating this blog way too rarely the last couple of years – and that’s also the case for the web site as a whole. The last couple of days I have been procrastinating a bit, and had some fun with re-coding parts of the page, and setting up statistics. Turns out, a lot of the notes collections and old hand-ins get a lot of traffic, and it’s interesting for me to look at statistics for this.

Since the last post, I participated in several workshops, courses, experiments and conferences. Worth mentioning was the ICNS conference in Edinburgh, Scotland, two summers ago (July 2013), and a very exciting experiment at IN12 (ILL, France) the same month.

I finished all my teaching responsibilities, after having been a course instructor in the Experimental Physics course three times (although the first time was before I started my PhD) and once in the Neutron Scattering course, plus a couple of smaller things at different summer schools. I’m also almost done with taking courses, since I participated in a large number of workshops during the first part of my studies. I’ve had over a year long hiatus from my studies due to personal issues, and am currently working on getting back, by finishing my master thesis so I can continue on the PhD plan I started back in March 2012. Hopefully this will be over with in the beginning of this summer.

Share this:
Posted by PJR in Experiments, Studies, Teaching, Website, Workshops, schools, and courses, 0 comments
I got married, and I’ve changed my name

I got married, and I’ve changed my name

My old name is Pia Jensen, but since my now husband has such an awesome last name, I’ve decided to keep my previous surname as only a middle name, and adopt his surname – Ray. So my name is now Pia Jensen Ray in full, or just Pia Ray or P. J. Ray for short.

The name change also inspired me to get a new domain, For ages now, I’ve used the (or really mostly the website address for my personal website as well as e-mail. However, I felt like maybe it was time to do something else. Unfortunately, just was already taken by someone that only uses it for e-mails (I even wrote with the person to ask if I could buy it off of them, but alas) – that would have been way cooler to own.

For now, this new domain will simply redirect to the old pages, since I don’t have much time to remake the website like I want to. One day, I’ll sit down and see if I can get a CMS like Drupal or just good old WordPress working on there. The coding I have done on this old website is starting to annoy me, since so much of it is very manual and time-consuming to update. An actual CMS with a log-in, and more of a WYSIWYG approach, would be a nice change.

On another note, this name change also comes at a fairly convenient time with regards to scientific publications. It’s always better to keep to a single name throughout, instead of changing it in the middle of a career. We have a publication coming out soon, and I’ve managed to get my new name on there before it was sent it – so that’s a good start.

Share this:
Posted by PJR in Website, 0 comments

Finally a blog!

Yep, the day finally came when I made myself a small blog. I guess I’ve been missing it once in a while, whenever something should be written on my web page, and I didn’t have anywhere to put it… So I sat down and wrote some simple PHP code to show what I write, and am now writing this first entry. I guess I might add different capabilities later, such as RSS feeds, permanent links, etc. But for now, this should do fine.

If you haven’t seen this web page before, let me introduce it in a very short manner: It is my personal web page, primarily containing things related to my education to get a degree in physics at the Niels Bohr Institute at the University of Copenhagen. You can read a little more about me on the biography page, or see my resume. The document page contains different documents that I’ve written over time – most popular are my gymnasium (somewhat like high school level) reports from physics and chemistry, and all the note collections that I’ve made during my university education. The studies page contain an overview of the courses I’ve taken at university level, both during my undergrad and grad student years. The books page contain an overview of the books I’ve used during my studies, with reviews and comments about some of them.

The entries of this blog will consist of small updates on my education (I will be starting my Ph.D. on March 1st), and on what I’ve changed on this site.

Share this:
Posted by PJR in Website, 0 comments