Web Design

I've been interested in web design for many years. I started playing around with creating websites in the late 1990s/early 2000s using WYSIWYG editors, then moved on to learning HTML and CSS properly so I could write up the websites from scratch. I tend to prefer hand-coding websites over using editors with pre-made templates (with two notable exceptions, one of them being this Portfolio!) because when I look at the page source, the code looks nice and clean, as opposed to the jumble of messy extra code that editors leave behind.

I am by no means an expert on web design. My technique has improved over the years, both in the technical side (simpleness of the code, organization of the folder structure) and in the presentation side (fonts, shapes, color schemes), but I'm not very versatile and still have much more to learn. In the future, I intend to learn more tools and techniques to create better-structured and nicer-looking websites.

For now, here you can take a look at the websites I've created. They are presented in chronological order, to show how I've improved over time.

SPS - RUM (2001-2003)The webpage for the Society of Physics Students at the University of Puerto Rico, Mayagüez Campus ("Sociedad de Estudiantes de Física del Recinto Universitario de Mayagüez") was the first full multi-page website I created. It all came about because someone noticed that our SPS didn't have a website, and I went and volunteered to make one. The first version of the website, circa 2001, was a horrendous Yahoo Geocities page, full of animated GIFs, scrolling marquees and sparklies following the cursor around. I never saved a screenshot of that page, so I can't show you how truly awful it looked (though back then I must have thought it looked neat). After the SPS faculty advisor gave us some space on the department's web server, I redid the SPS site using a WYSIWYG editor (I think it was Microsoft Front Page, but I can't remember exactly). Over time I grew frustrated with the editor and gave myself the task to learn HTML, and then after that I once again redid the website. The screenshot at the right (click on it to see the full-size image) shows the last version of the website that I managed, dating from early 2003. It has a busy background that makes the text a bit hard to read, one animated GIF and a scrolling marquee at the top. Oh, and Comic Sans, a font which back then I used on everything.

Emily's Universe - Version 1.0 (mid-late 2003)My old personal and professional website, "Emily's Universe" was something that I started writing around May 2003 and finally published in September of the same year, after I started grad school at Penn State. You can see a screenshot of this website here on the left, and if you click on it then you can see it at full-size. Notice once again that I've made a website with a very busy background image that makes the text hard to read, as well as the abundance of Comic Sans. The Puerto Rican flag at the bottom-right is an animated GIF. The section titled "What's New in my Universe" was where I'd put random bits of info, in a sort of blog-like format, and it eventually grew too much and made the front page too long. Also, every single file on the website was in the top-level directory of my webspace, making it ridiculously cluttered.

[Screenshot of Version 1.0 of my old website]

[Screenshot of the SPS website I created]

Emily's Universe - Version 2.0 (mid 2004)The first upgrade I made to my website, around Summer 2004, was to create subdirectories and organize the files. This made it much easier to find things, and to this day I still wonder why I didn't do it like that from the very start. The next thing I did was to make each page into a table. The table layout allowed me to keep the busy background in the page (the image is the original Hubble Deep Field) but away from the text in the main content area, as you can see in the screenshot to the right (click it for full-size). I also added an archive page for past updates, a Site Map, and a horizontal navigation bar at the bottom. And yes, there's still Comic Sans in the page.

[Screenshot of Version 2.0 of my old website]

Emily's Universe - Version 3.0 (early 2005)It wasn't long before I got bored with the way my website looked and got the itch to redesign. However, by late 2004, the website consisted of dozens of pages, and rewriting every single page would be a nightmarish amount of work. It was then that I decided to learn CSS, so that in the future, if I wanted to redesign the website, I'd only have to change one single file instead of dozens of them. And by Spring 2005, my website had a brand new design, which you can see in the screenshot to the left (click on it for a full-size image). This version was the first one that I tested with more than one browser, to make sure that all the CSS boxes fit together properly. I kept the Hubble Deep Field as the page background, but I made the content boxes have a solid-color background to make them easy to read. I also added a new feature at the top of the main content box, a path that showed the location of the currently-viewed page within the hierarchical structure of the whole site. And finally, the Comic Sans was gone.

[Screenshot of Version 3.0 of my old website]

Grad Bios (2005-2006)The grad students in the Department of Astronomy at Penn State had a page called "Grad Bios" in which everyone wrote some personal details, with the purpose of getting to know one another. When I joined the department, the page was maintained by Michele Stark, but in my second year she was already very busy with her thesis and was unable to continue maintaining the site. So then I took over for her, first just by making sure the information was up-to-date, and soon enough I went and redesigned the site. The original site was just one really long page, so my first change was to make separate pages for each grad year. I made each page into a table, but then I started learning CSS to redesign my own website and decided to apply what I had learned to the Grad Bios page too. The design I settled on can be seen on the left-side image of the screenshot to the right. Sometime later I tweaked the design a bit, which can be seen on the right-side image of the same screenshot. Click on the screenshot to see the image in a larger size, which will help you notice the differences.

Grads' Web Resources (2005)The Grads' Web Resources page came into existence as a way to have a centralized place for various useful web resources for the graduate students in the Department of Astronomy at Penn State. This was the first webpage I designed in a fixed-width format, and that little detail started giving me ideas for redesigning my own "Emily's Universe" website once again. Also, since I wanted the banner image to be really pretty, and I wasn't very well-versed in image manipulation back then, I asked my husband (well, back then he was my boyfriend) to make me a nice astronomy-themed banner image, which he did, and he even made the title with shiny text. You can see a screenshot of this page on the left (click for full size). This central hub linked to the usual useful websites (department, graduate student handbook, grad school policies), and also additional resources such as the Grad Bios page, the thesis files page, the list of grad student committees, etc, and also a fun gallery of South Park pictures of the grad students in the department.

[Screenshot of the Grads' Web Resources website]

PSU Thesis Files (2005)One of the pages linked from Grads' Web Resources was a page with information about the required LaTeX format and style files for doctoral dissertations at Penn State, as well as specific departmental modifications. The information in this page had been compiled over the years by Michele Stark, and she handed over the pages to me when I linked them from the Web Resources page. At first I didn't do anything, I just copied over all the files and left them as they were, but soon I felt the urge to redesign the pages so that their look matched with the rest of the sites in the Resources. The screenshot to the right (click for full-size) shows what the page ended up looking like after I redesigned it, without altering any of the content.

Emily's Universe - Version 4.0 (2008)

[Screenshot of Version 4.0a of my old website]

[Screenshot of Version 4.0b of my old website]

[Screenshot of Version 4.0c of my old website]

After creating the Grads' Web Resources page, I started getting the idea of redesigning my website again, which would be its fourth version overall. It started with thinking about fixed-width design, and then it continued with the desire to create a coherent color scheme. I started working on this redesign in 2006 but soon abandoned the project because research and health problems resulted in a lack of free time for me. I went back to working on it some time later, and eventually finished with the redesign in early 2008. Version 4.0 was remarkably different than the previous versions. The page had a fixed-width design, which allowed me to fit the content between header and footer images with rounded edges. On the backend, I reorganized the folder structure a bit to clearly separate personal from professional, and I also cleaned up the HTML comments and the

formatting of the CSS stylesheets, which resulted in the most beautiful-looking text files I'd ever written up until that point in time. The entire website was also W3C compliant for CSS and HTML 4.01 Strict, and I tested it thoroughly in a variety of browsers. Finally, the key feature of this redesign was the use of three different stylesheets, each with a coherent color scheme. The main color scheme was burgundy/pink and it was used in the top-level pages and the personal pages; you can see a screenshot of it at the top-left of this entry. The second color scheme, seen in the screenshot on the bottom-left, consisted of shades of blue and was used for the professional pages (CV, research, teaching). And the third color scheme, in purple and violet and with a screenshot on the right, was used for the Update Archive, which I had finally promoted to 'pseudo-blog' status. Note that clicking on each of the screenshots allows you to see a larger-sized image.

And that's it. I haven't created any new websites in recent years. My husband and I had a 'wedsite' (a website for our wedding) with information for our wedding guests in English and Spanish, but I didn't create that website from scratch. I used a wedding website service with pre-designed templates, though I very heavily edited the template I used (really, at times I wondered if editing the template was turning out to be more difficult than creating the site from scratch). I didn't make the wedsite by hand because I was very busy with other things (research, wedding planning...) and had no time to sit down and create a beautiful-looking website. Plus, using a wedsite service allowed us to password-protect the site (which I didn't know how to do back then) and to have a guestbook. For the sake of completeness, I'm including a screenshot of the wedsite here to the right, taken a couple of weeks after the wedding (early 2010). Click the screenshot to make it bigger.

Though I haven't coded any new websites lately, I still plan on learning more about web design and creating new websites -- maybe learn some Javascript and PHP so I can create mobile versions of the websites I create. At the very least, at some point within the next few years I should create a new professional website, hand-coded from scratch of course, which will include most of the information in this Portfolio, but in a format that won't make my eyes twitch when I look at its source code.

Page updated

Google Sites

Report abuse