Thanks so much to all who responded! As I said before, I was reluctant to
share the full context with the list because I didn't want to share the
in-house mock-ups I've received with the entire list. Here's a summary of
the question and answers received:
Context: Our library homepage is being redesigned to responsively resize.
The work is being done by an outside design firm. Imagine that our
homepage content looks like this, where x, y, z and 1, 2, 3 are all
distinct blocks of content on our homepage.:
X Y Z
1 2 3
When this homepage responsively resizes for smaller screens, the content
arranges in a column, as below:
X
Y
Z
1
2
3
Problem: "2" is a space where we often post graphics to market upcoming
library events, so we wanted "2" to appear at the very top of our page, in
mobile view (as below),
2
X
Y
Z
1
3
but the outside design company told us that this wouldn't be possible.
They said: "It’s really a coding issue. When building a page with
responsive design in mind, the code is going to stack elements almost like
reading a book - top to bottom, left to right to fit the mobile view . . .
We have ["2"] almost at the “end” of content on desktop and sandwiched
between to other elements, to pull that up as the very first item for
mobile presents issues and may cause the transition between desktop and
mobile to break."
Answers received: Multiple people suggested creating a duplicate version
of "2," wrapped in a div and at the top of all of our other homepage
content, and using media queries to either display or hide this div,
depending on the user's screen size. Additionally, we would use media
queries to hide the original "2" div when in mobile view.
Much gratitude to Matt Sherman, Jason Bengtson, Marya Sawaf, Cary Gordon,
Heather Rayl, Andy Wagner, Lisa Haitz, and Michael Schofield for their
helpful responses!
Regards,
Kyle
On Thu, Oct 29, 2015 at 11:21 AM, Kyle Breneman <[log in to unmask]>
wrote:
> Our library is currently working with the public relations department at
> our university to complete a responsive redesign of the library website.
> The redesign is being driven by the PR department, who is contracting with
> an outside design firm for all of the actual coding.
>
> We'd like to make some changes to the order in which our homepage content
> displays when our site responsively resized for mobile, but we're being
> told that the changes we want are not possible. I'm pretty certain that
> what we want can be achieved by CSS positioning, but I'd welcome responses,
> off-list, where I can share more details and get a better understanding of
> what code would be needed to achieve our objectives.
>
> Regards,
> Kyle Breneman
> Langsdale Library
> University of Baltimore
>
|