Because of a conflict with the progressive design stylesheet we’re using, which adjusts the size of your web page to the visitor’s screen size, the ability to scale a photo within the CommonSpot image dialog box has been turned off. This means that, while you can add a border or space around an image through CommonSpot image tools, you can no longer resize (scale) from this feature. Images and graphics need to be sized correctly before being placed on your web page.
For those of you who don’t use PhotoShop, Becky has created a great tutorial introducing two FREE online photo editors that are super easy to use–even for beginners!
iPiccy requires no registration and is easy to use for cropping a picture or resizing. fotoflexer doesn’t require you to join or register, either, and has many fun special effects. For a great explanation, see this Simple Image Editing—
For those Mac or Windows users who decide to try either of these editors, please Yam your experiences using either eidtor on the CommonSpot User Yammer Group.
Responsive design simply means that a web layout adjusts to the size of a device’s browser window (including the screen resolution). So no matter if a user is viewing your page on a desktop, laptop, iPad, smart phone or TV, your important information is sized to the screen in a readable form.
Even better for designers, there’s only one layout to create, not one for regular screens and then another for a mobile version.
How does this Work?
Responsive design uses a “media query” to detect the height, width and resolution of the user’s browser and then adjusts the layout accordingly through the Cascading Style Sheet (CSS). Properties such as display width, page orientation, pixel resolution and other device features determine which style sheet is used to render the page for a user.
As the browser window narrows, columns/containers stack one on top of the other so that the page narrows and lengthens to fit the screen. Font size and images are reduced. For larger devices, columns, fonts, images and other features expand to their fullest size into a more horizontal layout.
Rather than a “one-size-fits-all” solution for the size of a web page, a media query allows a designer to target styles based on device properties like screen size or layout orientation.
All of this resides in the default page code, so ECU’s department designers are no longer required to
- Create separate mobile versions of their web pages
- Manually update two sets of pages
What do ECU webmasters need to know?
- Once this feature is live, a mobile version is automatically available for new pages created using the 960-pixel templates.
- Pages based on the old 770-pixel layout cannot take advantage of the responsive style sheet.
- Images for new pages should be cropped and sized for the space—not scaled—so they load faster and display appropriately on any size device.
When will this happen?
Currently in the testing phase, the Web team intends to transition ECU departments and colleges to this new feature throughout the summer. Web administrators will be contacted beforehand. It’s important to note again that only new pages created from the 960-wide templates will use the responsive design style sheet.